js经典校验之注册与登录校验

Posted 高亮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js经典校验之注册与登录校验相关的知识，希望对你有一定的参考价值。

 

       平时都专注于后台功能的实现和逻辑需求的分析及数据库方面的设计，很少关注前端的设计，而项目开发过程中专门负责后台是不太可能的事，所以前端我们也需要会用，除了漂亮的首页等其他的交给美工来做，一些功能性的东西还是有负责模块开发的人来完成，所以除了后台、数据库外，前端也需要开发人员懂其一二。

 

例子1

 

用户注册校验

 

用户注册jsp页面

 

[html] view plain copy
 
 
 
 技术分享图片技术分享图片
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  3.   
  4.   
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  6. <html>  
  7.   <head>  
  8.     <title>注册页面</title>  
  9.       
  10.     <meta http-equiv="pragma" content="no-cache">  
  11.     <meta http-equiv="cache-control" content="no-cache">  
  12.     <meta http-equiv="expires" content="0">      
  13.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  14.     <meta http-equiv="description" content="This is my page">  
  15.     <link rel="stylesheet" type="text/css" href="<c:url value=‘/jsps/css/user/regist.css‘/>">  
  16.     <script type="text/javascript" src="<c:url value=‘/jquery/jquery-1.5.1.js‘/>"></script>  
  17.     <script type="text/javascript" src="<c:url value=‘/jsps/js/user/regist.js‘/>"></script>  
  18.   </head>  
  19.     
  20.   <body>  
  21. <div id="divMain">  
  22.   <div id="divTitle">  
  23.     <span id="spanTitle">新用户注册</span>  
  24.   </div>  
  25.   <div id="divBody">  
  26. <form action="<c:url value=‘/UserServlet‘/>" method="post" id="registForm">  
  27.     <input type="hidden" name="method" value="regist"/>    
  28.     <table id="tableForm">  
  29.       <tr>  
  30.         <td class="tdText">用户名：</td>  
  31.         <td class="tdInput">  
  32.           <input class="inputClass" type="text" name="loginname" id="loginname" value="${form.loginname }"/>  
  33.         </td>  
  34.         <td class="tdError">  
  35.           <label class="errorClass" id="loginnameError">${errors.loginname }</label>  
  36.         </td>  
  37.       </tr>  
  38.       <tr>  
  39.         <td class="tdText">登录密码：</td>  
  40.         <td>  
  41.           <input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/>  
  42.         </td>  
  43.         <td>  
  44.           <label class="errorClass" id="loginpassError">${errors.loginpass }</label>  
  45.         </td>  
  46.       </tr>  
  47.       <tr>  
  48.         <td class="tdText">确认密码：</td>  
  49.         <td>  
  50.           <input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/>  
  51.         </td>  
  52.         <td>  
  53.           <label class="errorClass" id="reloginpassError">${errors.reloginpass}</label>  
  54.         </td>  
  55.       </tr>  
  56.       <tr>  
  57.         <td class="tdText">Email：</td>  
  58.         <td>  
  59.           <input class="inputClass" type="text" name="email" id="email" value="${form.email }"/>  
  60.         </td>  
  61.         <td>  
  62.           <label class="errorClass" id="emailError">${errors.email}</label>  
  63.         </td>  
  64.       </tr>  
  65.       <tr>  
  66.         <td class="tdText">验证码：</td>  
  67.         <td>  
  68.           <input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/>  
  69.         </td>  
  70.         <td>  
  71.           <label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label>  
  72.         </td>  
  73.       </tr>  
  74.       <tr>  
  75.         <td></td>  
  76.         <td>  
  77.           <div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value=‘/VerifyCodeServlet‘/>"/></div>  
  78.         </td>  
  79.         <td>  
  80.           <label><a href="javascript:_hyz()">换一张</a></label>  
  81.         </td>  
  82.       </tr>  
  83.       <tr>  
  84.         <td></td>  
  85.         <td>  
  86.           <input type="image" src="<c:url value=‘/images/regist1.jpg‘/>" id="submitBtn"/>  
  87.         </td>  
  88.         <td>  
  89.           <label></label>  
  90.         </td>  
  91.       </tr>  
  92.     </table>  
  93. </form>      
  94.   </div>  
  95. </div>  
  96.   </body>  
  97. </html>  


用户注册校验js

 

 

[html] view plain copy
 
 
 
 技术分享图片技术分享图片
  1. $(function() {  
  2.     /*  
  3.      * 1. 得到所有的错误信息，循环遍历之。调用一个方法来确定是否显示错误信息！  
  4.      */  
  5.     $(".errorClass").each(function() {  
  6.         showError($(this));//遍历每个元素，使用每个元素来调用showError方法  
  7.     });  
  8.       
  9.     /*  
  10.      * 2. 切换注册按钮的图片  
  11.      */  
  12.     $("#submitBtn").hover(  
  13.         function() {  
  14.             $("#submitBtn").attr("src", "/goods/images/regist2.jpg");  
  15.         },  
  16.         function() {  
  17.             $("#submitBtn").attr("src", "/goods/images/regist1.jpg");  
  18.         }  
  19.     );  
  20.       
  21.     /*  
  22.      * 3. 输入框得到焦点隐藏错误信息  
  23.      */  
  24.     $(".inputClass").focus(function() {  
  25.         var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id  
  26.         $("#" + labelId).text("");//把label的内容清空！  
  27.         showError($("#" + labelId));//隐藏没有信息的label  
  28.     });  
  29.       
  30.     /*  
  31.      * 4. 输入框失去焦点进行校验  
  32.      */  
  33.     $(".inputClass").blur(function() {  
  34.         var id = $(this).attr("id");//获取当前输入框的id  
  35.         var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名  
  36.         eval(funName);//执行函数调用  
  37.     });  
  38.       
  39.     /*  
  40.      * 5. 表单提交时进行校验  
  41.      */  
  42.     $("#registForm").submit(function() {  
  43.         var bool = true;//表示校验通过  
  44.         if(!validateLoginname()) {  
  45.             bool = false;  
  46.         }  
  47.         if(!validateLoginpass()) {  
  48.             bool = false;  
  49.         }  
  50.         if(!validateReloginpass()) {  
  51.             bool = false;  
  52.         }  
  53.         if(!validateEmail()) {  
  54.             bool = false;  
  55.         }  
  56.         if(!validateVerifyCode()) {  
  57.             bool = false;  
  58.         }  
  59.           
  60.         return bool;  
  61.     });  
  62. });  
  63.   
  64. /*  
  65.  * 登录名校验方法  
  66.  */  
  67. function validateLoginname() {  
  68.     var id = "loginname";  
  69.     var value = $("#" + id).val();//获取输入框内容  
  70.     /*  
  71.      * 1. 非空校验  
  72.      */  
  73.     if(!value) {  
  74.         /*  
  75.          * 获取对应的label  
  76.          * 添加错误信息  
  77.          * 显示label  
  78.          */  
  79.         $("#" + id + "Error").text("用户名不能为空！");  
  80.         showError($("#" + id + "Error"));  
  81.         return false;  
  82.     }  
  83.     /*  
  84.      * 2. 长度校验  
  85.      */  
  86.     if(value.length < 3 || value.length > 20) {  
  87.         /*  
  88.          * 获取对应的label  
  89.          * 添加错误信息  
  90.          * 显示label  
  91.          */  
  92.         $("#" + id + "Error").text("用户名长度必须在3 ~ 20之间！");  
  93.         showError($("#" + id + "Error"));  
  94.         false;  
  95.     }  
  96.     /*  
  97.      * 3. 是否注册校验  
  98.      */  
  99.     $.ajax({  
  100.         url:"/goods/UserServlet",//要请求的servlet  
  101.         data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数  
  102.         type:"POST",  
  103.         dataType:"json",  
  104.         async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。  
  105.         cache:false,  
  106.         success:function(result) {  
  107.             if(!result) {//如果校验失败  
  108.                 $("#" + id + "Error").text("用户名已被注册！");  
  109.                 showError($("#" + id + "Error"));  
  110.                 return false;  
  111.             }  
  112.         }  
  113.     });  
  114.     return true;  
  115. }  
  116.   
  117. /*  
  118.  * 登录密码校验方法  
  119.  */  
  120. function validateLoginpass() {  
  121.     var id = "loginpass";  
  122.     var value = $("#" + id).val();//获取输入框内容  
  123.     /*  
  124.      * 1. 非空校验  
  125.      */  
  126.     if(!value) {  
  127.         /*  
  128.          * 获取对应的label  
  129.          * 添加错误信息  
  130.          * 显示label  
  131.          */  
  132.         $("#" + id + "Error").text("密码不能为空！");  
  133.         showError($("#" + id + "Error"));  
  134.         return false;  
  135.     }  
  136.     /*  
  137.      * 2. 长度校验  
  138.      */  
  139.     if(value.length < 3 || value.length > 20) {  
  140.         /*  
  141.          * 获取对应的label  
  142.          * 添加错误信息  
  143.          * 显示label  
  144.          */  
  145.         $("#" + id + "Error").text("密码长度必须在3 ~ 20之间！");  
  146.         showError($("#" + id + "Error"));  
  147.         false;  
  148.     }  
  149.     return true;      
  150. }  
  151.   
  152. /*  
  153.  * 确认密码校验方法  
  154.  */  
  155. function validateReloginpass() {  
  156.     var id = "reloginpass";  
  157.     var value = $("#" + id).val();//获取输入框内容  
  158.     /*  
  159.      * 1. 非空校验  
  160.      */  
  161.     if(!value) {  
  162.         /*  
  163.          * 获取对应的label  
  164.          * 添加错误信息  
  165.          * 显示label  
  166.          */  
  167.         $("#" + id + "Error").text("确认密码不能为空！");  
  168.         showError($("#" + id + "Error"));  
  169.         return false;  
  170.     }  
  171.     /*  
  172.      * 2. 两次输入是否一致校验  
  173.      */  
  174.     if(value != $("#loginpass").val()) {  
  175.         /*  
  176.          * 获取对应的label  
  177.          * 添加错误信息  
  178.          * 显示label  
  179.          */  
  180.         $("#" + id + "Error").text("两次输入不一致！");  
  181.         showError($("#" + id + "Error"));  
  182.         false;  
  183.     }  
  184.     return true;      
  185. }  
  186.   
  187. /*  
  188.  * Email校验方法  
  189.  */  
  190. function validateEmail() {  
  191.     var id = "email";  
  192.     var value = $("#" + id).val();//获取输入框内容  
  193.     /*  
  194.      * 1. 非空校验  
  195.      */  
  196.     if(!value) {  
  197.         /*  
  198.          * 获取对应的label  
  199.          * 添加错误信息  
  200.          * 显示label  
  201.          */  
  202.         $("#" + id + "Error").text("Email不能为空！");  
  203.         showError($("#" + id + "Error"));  
  204.         return false;  
  205.     }  
  206.     /*  
  207.      * 2. Email格式校验  
  208.      */  
  209.     if(!/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {  
  210.         /*  
  211.          * 获取对应的label  
  212.          * 添加错误信息  
  213.          * 显示label  
  214.          */  
  215.         $("#" + id + "Error").text("错误的Email格式！");  
  216.         showError($("#" + id + "Error"));  
  217.         false;  
  218.     }  
  219.     /*  
  220.      * 3. 是否注册校验  
  221.      */  
  222.     $.ajax({  
  223.         url:"/goods/UserServlet",//要请求的servlet  
  224.         data:{method:"ajaxValidateEmail", email:value},//给服务器的参数  
  225.         type:"POST",  
  226.         dataType:"json",  
  227.         async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。  
  228.         cache:false,  
  229.         success:function(result) {  
  230.             if(!result) {//如果校验失败  
  231.                 $("#" + id + "Error").text("Email已被注册！");  
  232.                 showError($("#" + id + "Error"));  
  233.                 return false;  
  234.             }  
  235.         }  
  236.     });  
  237.     return true;          
  238. }  
  239.   
  240. /*  
  241.  * 验证码校验方法  
  242.  */  
  243. function validateVerifyCode() {  
  244.     var id = "verifyCode";  
  245.     var value = $("#" + id).val();//获取输入框内容  
  246.     /*  
  247.      * 1. 非空校验  
  248.      */  
  249.     if(!value) {  
  250.         /*  
  251.          * 获取对应的label  
  252.          * 添加错误信息  
  253.          * 显示label  
  254.          */  
  255.         $("#" + id + "Error").text("验证码不能为空！");  
  256.         showError($("#" + id + "Error"));  
  257.         return false;  
  258.     }  
  259.     /*  
  260.      * 2. 长度校验  
  261.      */  
  262.     if(value.length != 4) {  
  263.         /*  
  264.          * 获取对应的label  
  265.          * 添加错误信息  
  266.          * 显示label  
  267.          */  
  268.         $("#" + id + "Error").text("错误的验证码！");  
  269.         showError($("#" + id + "Error"));  
  270.         false;  
  271.     }  
  272.     /*  
  273.      * 3. 是否正确  
  274.      */  
  275.     $.ajax({  
  276.         url:"/goods/UserServlet",//要请求的servlet  
  277.         data:{method:"ajaxValidateVerifyCode", verifyCode:value},//给服务器的参数  
  278.         type:"POST",  
  279.         dataType:"json",  
  280.         async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。  
  281.         cache:false,  
  282.         success:function(result) {  
  283.             if(!result) {//如果校验失败  
  284.                 $("#" + id + "Error").text("验证码错误！");  
  285.                 showError($("#" + id + "Error"));  
  286.                 return false;  
  287.             }  
  288.         }  
  289.     });  
  290.     return true;          
  291. }  
  292.   
  293. /*  
  294.  * 判断当前元素是否存在内容，如果存在显示，不页面不显示！  
  295.  */  
  296. function showError(ele) {  
  297.     var text = ele.text();//获取元素的内容  
  298.     if(!text) {//如果没有内容  
  299.         ele.css("display", "none");//隐藏元素  
  300.     } else {//如果有内容  
  301.         ele.css("display", "");//显示元素  
  302.     }  
  303. }  
  304.   
  305. /*  
  306.  * 换一张验证码  
  307.  */  
  308. function _hyz() {  
  309.     /*  
  310.      * 1. 获取<img>元素  
  311.      * 2. 重新设置它的src  
  312.      * 3. 使用毫秒来添加参数  
  313.      */  
  314.     $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());  
  315. }  

 

 

例子2

 

 

用户登录校验

 

用户登录jsp

 

[html] view plain copy
 
 
 
 技术分享图片技术分享图片
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  3.   
  4.   
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  6. <html>  
  7.   <head>    
  8.     <title>登录</title>  
  9.     <meta http-equiv="pragma" content="no-cache">  
  10.     <meta http-equiv="cache-control" content="no-cache">  
  11.     <meta http-equiv="expires" content="0">      
  12.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  13.     <meta http-equiv="description" content="This is my page">  
  14.     <meta http-equiv="content-type" content="text/html;charset=utf-8">  
  15.     <link rel="stylesheet" type="text/css" href="<c:url value=‘/jsps/css/user/login.css‘/>">  
  16.     <script type="text/javascript" src="<c:url value=‘/jquery/jquery-1.5.1.js‘/>"></script>  
  17.     <script type="text/javascript" src="<c:url value=‘/jsps/js/user/login.js‘/>"></script>  
  18.     <script src="<c:url value=‘/js/common.js‘/>"></script>  
  19.   
  20. <script type="text/javascript">  
  21.     $(function() {/*Map<String(Cookie名称),Cookie(Cookie本身)>*/  
  22.         // 获取cookie中的用户名  
  23.         var loginname = window.decodeURI("${cookie.loginname.value}");  
  24.         if("${requestScope.user.loginname}") {  
  25.             loginname = "${requestScope.user.loginname}";  
  26.         }  
  27.         $("#loginname").val(loginname);  
  28.     });  
  29. </script>  
  30.   </head>  
  31.     
  32.   <body>  
  33.     <div class="main">  
  34.       <div><img src="<c:url value=‘/images/logo.gif‘/>" /></div>  
  35.       <div>  
  36.         <div class="imageDiv"><img class="img" src="<c:url value=‘/images/zj.png‘/>"/></div>  
  37.         <div class="login1">  
  38.           <div class="login2">  
  39.             <div class="loginTopDiv">  
  40.               <span class="loginTop">传智会员登录</span>  
  41.               <span>  
  42.                 <a href="<c:url value=‘/jsps/user/regist.jsp‘/>" class="registBtn"></a>  
  43.               </span>  
  44.             </div>  
  45.             <div>  
  46.               <form target="_top" action="<c:url value=‘/UserServlet‘/>" method="post" id="loginForm">  
  47.                 <input type="hidden" name="method" value="login" />  
  48.                   <table>  
  49.                     <tr>  
  50.                       <td width="50"></td>  
  51.                       <td><label class="error" id="msg">${msg }</label></td>  
  52.                     </tr>  
  53.                     <tr>  
  54.                       <td width="50">用户名</td>  
  55.                       <td><input class="input" type="text" name="loginname" id="loginname"/></td>  
  56.                     </tr>  
  57.                     <tr>  
  58.                       <td height="20"> </td>  
  59.                       <td><label id="loginnameError" class="error"></label></td>  
  60.                     </tr>  
  61.                     <tr>  
  62.                       <td>密　码</td>  
  63.                       <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass }"/></td>  
  64.                     </tr>  
  65.                     <tr>  
  66.                       <td height="20"> </td>  
  67.                       <td><label id="loginpassError" class="error"></label></td>  
  68.                     </tr>  
  69.                     <tr>  
  70.                       <td>验证码</td>  
  71.                       <td>  
  72.                         <input class="input yzm" type="text" name="verifyCode" id="verifyCode" value="${user.verifyCode }"/>  
  73.                         <img id="vCode" src="<c:url value=‘/VerifyCodeServlet‘/>"/>  
  74.                         <a id="verifyCode">换张图</a>  
  75.                       </td>  
  76.                     </tr>  
  77.                     <tr>  
  78.                       <td height="20px"> </td>  
  79.                       <td><label id="verifyCodeError" class="error"></label></td>  
  80.                     </tr>  
  81.                     <tr>  
  82.                       <td> </td>  
  83.                       <td align="left">  
  84.                         <input type="image" id="submit" src="<c:url value=‘/images/login1.jpg‘/>" class="loginBtn"/>  
  85.                       </td>  
  86.                     </tr>                                                                               
  87.                  </table>  
  88.               </form>  
  89.             </div>  
  90.           </div>  
  91.         </div>  
  92.       </div>  
  93.     </div>  
  94.   </body>  
  95. </html>  
  96.       


用户登录校验js

 

 

[html] view plain copy
 
 
 
 技术分享图片技术分享图片
  1. <span style="font-size:18px;">$(function() {  
  2.     /*  
  3.      * 1. 让登录按钮在得到和失去焦点时切换图片  
  4.      */  
  5.     $("#submit").hover(  
  6.         function() {  
  7.             $("#submit").attr("src", "/goods/images/login2.jpg");  
  8.         },  
  9.         function() {  
  10.             $("#submit").attr("src", "/goods/images/login1.jpg");  
  11.         }  
  12.     );  
  13.       
  14.     /*  
  15.      * 2. 给注册按钮添加submit()事件，完成表单校验  
  16.      */  
  17.     $("#submit").submit(function(){  
  18.         $("#msg").text("");  
  19.         var bool = true;  
  20.         $(".input").each(function() {  
  21.             var inputName = $(this).attr("name");  
  22.             if(!invokeValidateFunction(inputName)) {  
  23.                 bool = false;  
  24.             }  
  25.         });  
  26.         return bool;  
  27.     });  
  28.       
  29.     /*  
  30.      * 3. 输入框得到焦点时隐藏错误信息  
  31.      */  
  32.     $(".input").focus(function() {  
  33.         var inputName = $(this).attr("name");  
  34.         $("#" + inputName + "Error").css("display", "none");  
  35.     });  
  36.       
  37.     /*  
  38.      * 4. 输入框推动焦点时进行校验  
  39.      */  
  40.     $(".input").blur(function() {  
  41.         var inputName = $(this).attr("name");  
  42.         invokeValidateFunction(inputName);  
  43.     })  
  44. });  
  45.   
  46. /*  
  47.  * 输入input名称，调用对应的validate方法。  
  48.  * 例如input名称为：loginname，那么调用validateLoginname()方法。  
  49.  */  
  50. function invokeValidateFunction(inputName) {  
  51.     inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);  
  52.     var functionName = "validate" + inputName;  
  53.     return eval(functionName + "()");     
  54. }  
  55.   
  56. /*  
  57.  * 校验登录名  
  58.  */  
  59. function validateLoginname() {  
  60.     var bool = true;  
  61.     $("#loginnameError").css("display", "none");  
  62.     var value = $("#loginname").val();  
  63.     if(!value) {// 非空校验  
  64.         $("#loginnameError").css("display", "");  
  65.         $("#loginnameError").text("用户名不能为空！");  
  66.         bool = false;  
  67.     } else if(value.length < 3 || value.length > 20) {//长度校验  
  68.         $("#loginnameError").css("display", "");  
  69.         $("#loginnameError").text("用户名长度必须在3 ~ 20之间！");  
  70.         bool = false;  
  71.     }  
  72.     return bool;  
  73. }  
  74.   
  75. /*  
  76.  * 校验密码  
  77.  */  
  78. function validateLoginpass() {  
  79.     var bool = true;  
  80.     $("#loginpassError").css("display", "none");  
  81.     var value = $("#loginpass").val();  
  82.     if(!value) {// 非空校验  
  83.         $("#loginpassError").css("display", "");  
  84.         $("#loginpassError").text("密码不能为空！");  
  85.         bool = false;  
  86.     } else if(value.length < 3 || value.length > 20) {//长度校验  
  87.         $("#loginpassError").css("display", "");  
  88.         $("#loginpassError").text("密码长度必须在3 ~ 20之间！");  
  89.         bool = false;  
  90.     }  
  91.     return bool;  
  92. }  
  93.   
  94. /*  
  95.  * 校验验证码  
  96.  */  
  97. function validateVerifyCode() {  
  98.     var bool = true;  
  99.     $("#verifyCodeError").css("display", "none");  
  100.     var value = $("#verifyCode").val();  
  101.     if(!value) {//非空校验  
  102.         $("#verifyCodeError").css("display", "");  
  103.         $("#verifyCodeError").text("验证码不能为空！");  
  104.         bool = false;  
  105.     } else if(value.length != 4) {//长度不为4就是错误的  
  106.         $("#verifyCodeError").css("display", "");  
  107.         $("#verifyCodeError").text("错误的验证码！");  
  108.         bool = false;  
  109.     } else {//验证码是否正确  
  110.         $.ajax({  
  111.             cache: false,  
  112.             async: false,  
  113.             type: "POST",  
  114.             dataType: "json",  
  115.             data: {method: "ajaxValidateVerifyCode", verifyCode: value},  
  116.             url: "/goods/UserServlet",  
  117.             success: function(flag) {  
  118.                 if(!flag) {  
  119.                     $("#verifyCodeError").css("display", "");  
  120.                     $("#verifyCodeError").text("错误的验证码！");  
  121.                     bool = false;                     
  122.                 }  
  123.             }  
  124.         });  
  125.     }  
  126.     return bool;  
  127. }</span>  



 

例子3

 

用户修改密码校验

 

用户修改密码jsp

 

[html] view plain copy
 
 
 
 技术分享图片技术分享图片
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  3.   
  4.   
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  6. <html>  
  7.   <head>  
  8.     <title>pwd.jsp</title>  
  9.       
  10.     <meta http-equiv="pragma" content="no-cache">  
  11.     <meta http-equiv="cache-control" content="no-cache">  
  12.     <meta http-equiv="expires" content="0">      
  13.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  14.     <meta http-equiv="description" content="This is my page">  
  15.     <!-- 
  16.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  17.     -->  
  18.     <link rel="stylesheet" type="text/css" href="<c:url value=‘/css/css.css‘/>">  
  19.     <link rel="stylesheet" type="text/css" href="<c:url value=‘/jsps/css/user/pwd.css‘/>">  
  20.     <script type="text/javascript" src="<c:url value=‘/jquery/jquery-1.5.1.js‘/>"></script>  
  21.     <script type="text/javascript" src="<c:url value=‘/jsps/js/user/pwd.js‘/>"></script>  
  22.     <script src="<c:url value=‘/js/common.js‘/>"></script>  
  23.   </head>  
  24.     
  25.   <body>  
  26.     <div class="div0">  
  27.         <span>修改密码</span>  
  28.     </div>  
  29.   
  30.     <div class="div1">  
  31.         <form action="<c:url value=‘/UserServlet‘/>" method="post" target="_top">  
  32.             <input type="hidden" name="method" value="updatePassword"/>  
  33.         <table>  
  34.             <tr>  
  35.                 <td><label class="error">${msg }</label></td>  
  36.                 <td colspan="2"> </td>  
  37.             </tr>  
  38.             <tr>  
  39.                 <td align="right">原密码:</td>  
  40.                 <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass }"/></td>  
  41.                 <td><label id="loginpassError" class="error"></label></td>  
  42.             </tr>  
  43.             <tr>  
  44.                 <td align="right">新密码:</td>  
  45.                 <td><input class="input" type="password" name="newpass" id="newpass" value="${user.newpass }""/></td>  
  46.                 <td><label id="newpassError" class="error"></label></td>  
  47.             </tr>  
  48.             <tr>  
  49.                 <td align="right">确认密码:</td>  
  50.                 <td><input class="input" type="password" name="reloginpass" id="reloginpass" value="${user.reloginpass }""/></td>  
  51.                 <td><label id="reloginpassError" class="error"></label></td>  
  52.             </tr>  
  53.             <tr>  
  54.                 <td align="right"></td>  
  55.                 <td>  
  56.                   <img id="vCode" src="<c:url value=‘/VerifyCodeServlet‘/>" border="1"/>  
  57.                   <a href="javascript:_change();">看不清，换一张</a>  
  58.                 </td>  
  59.             </tr>  
  60.             <tr>  
  61.                 <td align="right">验证码:</td>  
  62.                 <td>  
  63.                   <input class="input" type="text" name="verifyCode" id="verifyCode" value="${user.verifyCode }""/>  
  64.                 </td>  
  65.                 <td><label id="verifyCodeError" class="error"></label></td>  
  66.             </tr>  
  67.             <tr>  
  68.                 <td align="right"></td>  
  69.                 <td><input id="submit" type="submit" value="修改密码"/></td>  
  70.             </tr>  
  71.         </table>  
  72.         </form>  
  73.     </div>  
  74.   </body>  
  75. </html>  


用户修改密码校验js

 

 

[html] view plain copy
 
 
 
 技术分享图片技术分享图片
    1. $(function() {    
    2.     /*  
    3.      * 1. 给注册按钮添加submit()事件，完成表单校验  
    4.      */  
    5.     $("#submit").submit(function(){  
    6.         $("#msg").text("");  
    7.         var bool = true;  
    8.         $(".input").each(function() {  
    9.             var inputName = $(this).attr("name");  
    10.             if(!invokeValidateFunction(inputName)) {  
    11.                 bool = false;  
    12.             }  
    13.         });  
    14.         return bool;  
    15.     });  
    16.       
    17.     /*  
    18.      * 3. 输入框推动焦点时进行校验  
    19.      */  
    20.     $(".input").blur(function() {  
    21.         var inputName = $(this).attr("name");  
    22.         invokeValidateFunction(inputName);  
    23.     });  
    24. });  
    25.   
    26. /*  
    27.  * 输入input名称，调用对应的validate方法。  
    28.  * 例如input名称为：loginname，那么调用validateLoginname()方法。  
    29.  */  
    30. function invokeValidateFunction(inputName) {  
    31.     inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);  
    32.     var functionName = "validate" + inputName;  
    33.     return eval(functionName + "()");     
    34. }  
    35.   
    36. /*  
    37.  * 校验密码  
    38.  */  
    39. function validateLoginpass() {  
    40.     var bool = true;  
    41.     $("#loginpassError").css("display", "none");  
    42.     var value = $("#loginpass").val();  
    43.     if(!value) {// 非空校验  
    44.         $("#loginpassError").css("display", "");  
    45.         $("#loginpassError").text("密码不能为空！");  
    46.         bool = false;  
    47.     } else if(value.length < 3 || value.length > 20) {//长度校验  
    48.         $("#loginpassError").css("display", "");  
    49.         $("#loginpassError").text("密码长度必须在3 ~ 20之间！");  
    50.         bool = false;  
    51.     });  
    52.     return bool;  
    53. }  
    54.   
    55. // 校验新密码  
    56. function validateNewpass() {  
    57.     var bool = true;  
    58.     $("#newpassError").css("display", "none");  
    59.     var value = $("#newpass").val();  
    60.     if(!value) {// 非空校验  
    61.         $("#newpassError").css("display", "");  
    62.         $("#newpassError").text("新密码不能为空！");  
    63.         bool = false;  
    64.     } else if(value.length < 3 || value.length > 20) {//长度校验  
    65.         $("#newpassError").css("display", "");  
    66.         $("#newpassError").text("新密码长度必须在3 ~ 20之间！");  
    67.         bool = false;  
    68.     }  
    69.     return bool;  
    70. }  
    71.   
    72. /*  
    73.  * 校验确认密码  
    74.  */  
    75. function validateReloginpass() {  
    76.     var bool = true;  
    77.     $("#reloginpassError").css("display", "none");  
    78.     var value = $("#reloginpass").val();  
    79.     if(!value) {// 非空校验  
    80.         $("#reloginpassError").css("display", "");  
    81.         $("#reloginpassError").text("确认密码不能为空！");  
    82.         bool = false;  
    83.     } else if(value != $("#newpass").val()) {//两次输入是否一致  
    84.         $("#reloginpassError").css("display", "");  
    85.         $("#reloginpassError").text("两次密码输入不一致！");  
    86.         bool = false;  
    87.     }  
    88.     return bool;      
    89. }  
    90.   
    91. /*  
    92.  * 校验验证码  
    93.  */  
    94. function validateVerifyCode() {  
    95.     var bool = true;  
    96.     $("#verifyCodeError").css("display", "none");  
    97.     var value = $("#verifyCode").val();  
    98.     if(!value) {//非空校验  
    99.         $("#verifyCodeError").css("display", "");  
    100.         $("#verifyCodeError").text("验证码不能为空！");  
    101.         bool = false;  
    102.     } else if(value.length != 4) {//长度不为4就是错误的  
    103.         $("#verifyCodeError").css("display", "");  
    104.         $("#verifyCodeError").text("错误的验证码！");  
    105.         bool = false;  
    106.     } else {//验证码是否正确  
    107.         $.ajax({  
    108.             cache: false,  
    109.             async: false,  
    110.             type: "POST",  
    111.             dataType: "json",  
    112.             data: {method: "ajaxValidateVerifyCode", verifyCode: value},  
    113.             url: "/goods/UserServlet",  
    114.             success: function(flag) {  
    115.                 if(!flag) {  
    116.                     $("#verifyCodeError").css("display", "");  
    117.                     $("#verifyCodeError").text("错误的验证码！");  
    118.                     bool = false;                     
    119.                 }  
    120.             }  
    121.         });  
    122.     }  
    123.     return bool;  
    124. }  




以上是关于js经典校验之注册与登录校验的主要内容，如果未能解决你的问题，请参考以下文章

javaweb用户登录注册时是在前台用js校验，还是在后台用servlet校验好？

登录校验之滑块验证码完整实现（vue + springboot）

Django之outh模块

crm 系统项目 登录,注册,校验

JavaWeb网上图书商城完整项目--day02-5.ajax校验功能之服务器端三层实现

2021-11-08 杭州 工作学习遇到的（经典+重点+难点）分享 CASE 1重复点击提交产生多笔数据保持数据只操作一次----＞接口幂等性校验