100字范文 > 验证码的实现与jQuery阻止跳转封装数据库工具类oracle

验证码的实现与jQuery阻止跳转封装数据库工具类oracle

时间：2019-04-25 20:58:23

1.验证码的实现 jQuery 加 js 实现

2.jQuery表单验证与jQuery 的表单阻止e.preventDefault(); //jQery防止表单提交

3.css 的一些属性方法与五中跳转方式

css的一些属性设置

4.封装oracle数据库帮助类

4.1.数据库帮助类

4.2.实体类的编写

4.3.dao方法的编写添加方法

4.4jsp页面的调用直接import引入即可使用

1.验证码的实现 jQuery 加 js 实现

var cns = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m','M','N','B','V','C','X','Z','A','S','D','F','G','H','J','K','L','P','O','I','U','Y','T','R','E','W','Q','0','1','2','3','4','5','6','7','8','9'];function setAutoCode() {var str="";for(var i=0;i<4;i++){var index=Math.floor(Math.random()*cns.length);str+=cns[index];}$("#yz").html(str); 这里也可以使用js获取标签设置}

2.jQuery表单验证与jQuery 的表单阻止e.preventDefault(); //jQery防止表单提交

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>新闻发布系统-管理员登录</title><link rel="stylesheet" type="text/css" href="css/login.css" /><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><style type="text/css">.error{color: red;text-align: left;}</style><script type="text/javascript">$(function() {// 密码验证正则表达式添加插件jQuery.validator.addMethod("regexPassword", function(value, element) {return this.optional(element) || /^(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/.test(value);}, "一个大写，一个小写，一个符号");$("#formset").validate({rules:{user:{required: true,rangelength:[2,16]},password:{required: true,rangelength:[3,14],// regexPassword: true}},messages: {user: {required: "*必填",rangelength: "2-16*"},password: {required: "*必填",rangelength: "3-14*"}}})使用提交按钮设置点击事件 $("#buttonDiv>input:submit").click(function (e) {var nul=$("#code").val();if(!nul){alert("验证码不可为空");e.preventDefault();}else{var yz=$("#yz").html();if(nul != yz){alert("验证码错误");e.preventDefault(); //jQery防止表单提交}}})setAutoCode();$("#yz").click(function () {setAutoCode();})})var cns = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m','M','N','B','V','C','X','Z','A','S','D','F','G','H','J','K','L','P','O','I','U','Y','T','R','E','W','Q','0','1','2','3','4','5','6','7','8','9'];function setAutoCode() {var str="";for(var i=0;i<4;i++){var index=Math.floor(Math.random()*cns.length);str+=cns[index];}$("#yz").html(str);}</script></head><body><div id="login"><div id="top"><div id="top_left"><img src="images/login_03.gif" /></div><div id="top_center"></div></div><div id="center"><div id="center_left"></div><div id="center_middle"><form id="formset" action="dologin.jsp" method="post"><div id="username"><label>账号：</label><input id="user" name="user" type="text"></div><div id="passwordDiv"><label>密码：</label> <input type="password" id="password"name="password"></div><div id="codeDiv"><label>验证码：</label> <input type="text" id="code" name="code"><span id="yz">BTNt</span></div><div id="outoLoginDiv"></div><div id="buttonDiv"><input type="submit" value="登录" /> <input type="reset" value="重置" /></div></form></div><div id="center_right"></div></div><div id="down"><div id="down_left"><div id="inf"><span class="inf_text">版本信息</span> <span class="copyright">管理信息系统 v2.0</span></div></div><div id="down_center"></div></div></div><%String i=request.getParameter("i");if(i!=null){out.print("<script>$(function() {alert('账号或密码错误');location.href='login.jsp'})</script>");}%></body></html>

3.css 的一些属性方法与五中跳转方式

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%//1.JSP页面的跳转方式//(1)form表单提交跳转//action method //传值 action = "index.jsp?username=admin"<input type = "hidden" name = "xxx" value = ""/>//(2)HTML超链接标签进行跳转<a href = "index.jsp?username=admin&pwd=123"></a>//(3)js脚本中的BOM对象 locationscript标签内 location.href="index.jsp?username=admin"//(4)java的方式--请求转发request.getRequestDispatcher("跳转路径").forward(request, response);//(5)java的方式--请求重定向response.sendRedirect("跳转路径");//在所有的中转站页面中做页面跳转。//1,2 不行的3,4,5可以的//2.JDBCClass.forName("驱动路径");//oracleDriver alt+/ 该页面第一行代码中import值//url地址jdbc:oracle:thin:@localhost:1521:orcl//接口以及实现类//DriverManager//Connection//PreparedStatement ps//占位符的概念？ ps.setXxx(序号,数值);//ResultSet rs next();//rs.getXxx()%>
css的一些属性设置
/* 对其方式 */text-align: center;/* 垂直剧中 */line-height: 40px; 此大小要与高度一样才能实现水平居中设置字体大小font-size: 15px;设置字体加粗font-weight:bold;设置字体样式字体font-family: "楷体";/* 左缩颈 */text-indent: 0.9em;/* 每个字符之间的间隙 */letter-spacing: 4px;背景颜色background: white;/* 鼠标样式 */cursor: pointer;

4.封装oracle数据库帮助类

4.1.数据库帮助类
package com.baidu.utlis;/** 数据库帮助类*/import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;加载jar驱动public class DBHelper {static {try {Class.forName("oracle.jdbc.driver.OracleDriver");} catch (Exception e) {e.printStackTrace();}}链接数据库public static Connection getConn() {Connection conn=null;try {String url="jdbc:oracle:thin:@localhost:1521:orcl";conn=DriverManager.getConnection(url, "f_lkf", "123");} catch (Exception e) {e.printStackTrace();}return conn;}//关闭数据库public static void myClose(Connection conn,PreparedStatement ps, ResultSet rs) {try {if(conn!=null&&!conn.isClosed()) {conn.close();}if(ps!=null) {ps.close();}if(rs!=null) {rs.close();}} catch (Exception e) {e.printStackTrace();// TODO: handle exception}}}

4.2.实体类的编写

1.编写好你需要的属性根据数据库而定

2.主界面右键

3.创建有参函数几个参数根据需求而定

4.选择好需要的属性确定即可

5.创建get与set方法

6.选择好属性确定即可

4.3.dao方法的编写添加方法

package com.baidu.dao;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import com.baidu.entity.NewsXwFb;import com.baidu.utlis.DBHelper;/** 新闻发布dao方法*/public class XwFbDao {/** 新增新闻的方法*/public int addXw(NewsXwFb xw) {int n=0;Connection conn=null;PreparedStatement ps=null;ResultSet rs=null;try{conn=DBHelper.getConn();String sql="insert into tb_news values(?,?,?,?,?,?,?,to_date(?,'yyyy-mm-dd hh24:mi:ss'),?)";ps=conn.prepareStatement(sql);ps.setInt(1, xw.getNid());ps.setInt(2, xw.getNtid());ps.setString(3, xw.getNtitle());ps.setString(4, xw.getNauthor());ps.setString(5, xw.getNsummary());ps.setString(6, xw.getNcontent());ps.setString(7, xw.getNimage());ps.setString(8, xw.getNdate());ps.setInt(9, xw.getNcount());n=ps.executeUpdate();}catch(Exception e){e.printStackTrace();}finally{DBHelper.myClose(conn, ps, rs);}return n;}}
4.4jsp页面的调用直接import引入即可使用
<%@page import="com.baidu.entity.NewsXwFb"%><%@page import="com.baidu.dao.XwFbDao"%><%@page import=".apache.bcel.internal.generic.SIPUSH"%><%@page import="java.text.SimpleDateFormat"%><%@page import="java.util.Date"%><%@page import="com.baidu.dao.UserDao"%><%@page import="com.baidu.utlis.DBHelper"%><%@page import="java.sql.ResultSet"%><%@page import="java.sql.PreparedStatement"%><%@page import="java.sql.Connection"%><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><%request.setCharacterEncoding("utf-8");//编号int sid=new UserDao().getid();out.println(sid);//分类编号String nid=request.getParameter("ntid");int nidd=Integer.valueOf(nid);out.println(nid);//标题String nauthor=request.getParameter("ntitle");//作者String nsummary=request.getParameter("nauthor");//摘要String ncontent=request.getParameter("nsummary");//类容String nconte=request.getParameter("ncontent");//图片String nimage="images\\1.jpg";//注册时间Date date =new Date();SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");String ndate=sdf.format(date);//点击量int ncount=0;int i=new XwFbDao().addXw(new NewsXwFb(sid,nidd,nauthor,nsummary,ncontent,nconte,nimage,ndate,ncount)); if(i>0){//请求转发页面跳转//out.println("<script>alert('登录成功') </script>");request.getRequestDispatcher("admin.jsp?c=1").forward(request, response);}else{out.println("<script>location.href='admin_addNews.jsp?i=0'</script>");} %>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。