碼上快樂

相關內容    簡體    繁體

js經典校驗之注冊與登錄校驗

本文轉載自   查看原文   2018-02-28 18:44   8331    3.JavaScript

 

       平時都專注於后台功能的實現和邏輯需求的分析及數據庫方面的設計，很少關注前端的設計，而項目開發過程中專門負責后台是不太可能的事，所以前端我們也需要會用，除了漂亮的首頁等其他的交給美工來做，一些功能性的東西還是有負責模塊開發的人來完成，所以除了后台、數據庫外，前端也需要開發人員懂其一二。

 

例子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. }  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 帶你玩轉JavaWeb開發之四 -如何用JS做登錄注冊頁面校驗 Vue(vue+node.js+mongodb)_登錄注冊（密碼登錄） go+js登錄注冊例子(帶郵箱驗證) JavaScript學習——使用JS完成注冊頁面表單校驗 登錄注冊代碼 # 會員注冊與登錄模塊 iOS 注冊登錄頁面 Angular之簡單的登錄注冊 基於人臉識別的登錄與注冊 登錄注冊頁面
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM