程序博客网 > 新浪手游助手mac

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

来源：互联网 发布：新浪手游助手mac 编辑：程序博客网 时间：2024/06/04 01:11

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



前言


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


例子1


用户注册校验


用户注册jsp页面

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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_-])+@([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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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. }  

0 0
新浪手游助手mac 新浪手游助手mac
原创粉丝点击
热门IT博客
淘宝直播怎么申请开通淘宝直播怎么申请开通
教父刀数据教父刀数据
windows多线程
红包尾数软件
dnf淘宝
mysql 按照字段排序
口袋妖怪究极日月淘宝
量子光学 知乎
fifaonline3挂机软件
zknu教务网络管理系统
手机短信软件哪个好
阿里云免费套餐9.9
像素软件 pixelgame
极限挑战第三季 知乎
阿里云 搬瓦工 cn2
sql server 费用
星际战甲怎么设置端口
淘宝卖家收钱多久到账
编程语言难度排行
淘宝卖家的基本义务
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 惠崇春江晚景 中村知惠 给惠网 秦惠文王 水野淑惠 轻井泽惠 陈正林子惠 惠存什么意思 惠存意思 惠锁屏 惠农网 惠比特犬 滝川惠理 齐鲁工惠app 陈正林子惠免费阅读 齐鲁工惠 滚筒洗衣机惠而浦 真野惠里菜 惠文后 罗茜汉丁顿惠特莉 移动惠生活 惠顾什么意思 阳光惠生活app 友信普惠 惠灵顿 惠生活 极云普惠云电脑 陈正林子惠免费全文 微销惠 泽惠天下万人绿合49hznet 平安普惠为什么一直招人 惠州惠东 惠东 惠东论坛 惠东西子 惠东限行 惠东双月湾 惠东西子江畔惠东窗口 惠东高铁站 惠东高铁 惠东论坛惠东窗口

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里