一.完成简易验证码的制作
$(function(){myf();//给验证码添加点击事件$("#yzm").click(function(){myf();//刷新验证码});})//随机验证码=刷新验证码function myf(){//下标：0-33var arr = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的var str = "";//用来拼接for(var i=0;i<4;i++){//随机数 无限逼近0-33 四舍五入 var a=Math.round(Math.random()*33);//下标//console.info(arr[a]);//根据下标取元素str+=arr[a];}//给span赋值 $("#yzm").html(str);//innerHTML}
注释：输错或点击验证码都会自动切换
二.完成登录
界面以及功能代码
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>用户登录</title><link href="images/login.css" rel="stylesheet" type="text/css" /><!-- 引入jQuery的类库 --><script type="text/javascript" src="js/jquery-3.3.1.js"></script><!-- 另起script块 --><script type="text/javascript">$(function(){myf();//给验证码添加点击事件$("#yzm").click(function(){myf();//刷新验证码});})//随机验证码=刷新验证码function myf(){//下标：0-33var arr = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的var str = "";//用来拼接for(var i=0;i<4;i++){//随机数 无限逼近0-33 四舍五入 var a=Math.round(Math.random()*33);//下标//console.info(arr[a]);//根据下标取元素str+=arr[a];}//给span赋值 $("#yzm").html(str);//innerHTML}//验证登录function yzLogin(){//依次获取用户名、密码、用户输入的验证码、随机产生的验证码 不能为空var name=$("#xx").val();var pwd=$("#yy").val();var yzm1=$("#zz").val();var yzm2=$("#yzm").html();if(name==""){alert("用户名不能为空");return false;}if(pwd==""){alert("密码不能为空");return false;}if(yzm1==""){alert("验证码不能为空");return false;}else{//当验证码不为空的情况下//作业1：要求验证码不区分大小写 if(yzm1!=yzm2){//不一致的时候 提示alert("验证码有误");myf();//刷新验证码$("#zz").val("");//清空文本框return false;}}return true;}</script></head><body><form action="dologin.jsp" method="post" onsubmit="return yzLogin()"><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"><div id="user">用 户<input type="text" name="aa" id="xx"/></div><div id="password">密 码<input type="password" name="bb" id="yy" /></div><div id="password">验证码<input id="zz" style="width: 40px;" type="text" name="cc" /> <span id="yzm" style="color:red;font-size:20px;cursor:pointer;">XXXX</span></div><div id="btn"><!-- <a href="#">登录</a><a href="#">清空</a> --><input type="submit" value="登录"/><input type="reset" value="清空"/></div></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></form></body></html>
验证以及代码
<%@page import="java.sql.ResultSet"%><%@page import="java.sql.PreparedStatement"%><%@page import="java.sql.DriverManager"%><%@page import="java.sql.Connection"%><%@page import="oracle.jdbc.driver.OracleDriver"%><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%//设置编码方式request.setCharacterEncoding("utf-8");//接收表单提交过来的值:用户名 密码 根据name值取value值 String name=request.getParameter("aa");String pwd=request.getParameter("bb");//jdbc连接Oracle做判断 String URL="jdbc:oracle:thin:@localhost:1521:orcl";String CNAME="oracle.jdbc.driver.OracleDriver";//加载驱动Class.forName(CNAME);//创建连接Connection con=DriverManager.getConnection(URL, "scott", "tiger");//定义sql语句String sql="select * from tb_0325 where sname=? and spwd=?";//获得执行对象PreparedStatement ps=con.prepareStatement(sql);//给占位符赋值ps.setString(1, name);ps.setString(2, pwd);//开始执行ResultSet rs=ps.executeQuery();//判断 遍历if(rs.next()){//说明登录成功 跳转到新闻发布系统的管理员界面 //重定向//response.sendRedirect("news/admin.jsp");//转发request.getRequestDispatcher("news/admin.jsp").forward(request, response);}else{//说明登录失败out.print("<script>alert('用户名或者密码有误');location.href='login.jsp';</script>");}//关闭资源if(con!=null&&!con.isClosed()){con.close();}if(ps!=null){ps.close();}if(rs!=null){rs.close();}%>
三.补充(类似标识列的效果)
//两个字符串String URL="jdbc:oracle:thin:@localhost:1521:orcl";String CNAME="oracle.jdbc.driver.OracleDriver";//加载驱动Class.forName(CNAME);//创建连接Connection con=DriverManager.getConnection(URL, "scott", "tiger");//定义sql语句String sql="select nvl(max(nid),0) from tb_0328";//获得执行对象PreparedStatement ps=con.prepareStatement(sql);//获取结果集ResultSet rs=ps.executeQuery();int nid=0;//扩大作用域//判断 遍历if(rs.next()){//赋值nid=rs.getInt(1)+1;//获取主键的最大序号加1}
