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

轉發：https://www.cnblogs.com/gluncle/p/8485198.html

例子1

1.1用戶註冊jsp頁面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>註冊頁面</title>  

    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">  
    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>  
    <script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>  
  </head>  

  <body>  
<div id="divMain">  
  <div id="divTitle">  
    <span id="spanTitle">新用戶註冊</span>  
  </div>  
  <div id="divBody">  
<form action="<c:url value='/UserServlet'/>" method="post" id="registForm">  
    <input type="hidden" name="method" value="regist"/>    
    <table id="tableForm">  
      <tr>  
        <td class="tdText">用戶名：</td>  
        <td class="tdInput">  
          <input class="inputClass" type="text" name="loginname" id="loginname" value="${form.loginname }"/>  
        </td>  
        <td class="tdError">  
          <label class="errorClass" id="loginnameError">${errors.loginname }</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">登錄密碼：</td>  
        <td>  
          <input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="loginpassError">${errors.loginpass }</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">確認密碼：</td>  
        <td>  
          <input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="reloginpassError">${errors.reloginpass}</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">Email：</td>  
        <td>  
          <input class="inputClass" type="text" name="email" id="email" value="${form.email }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="emailError">${errors.email}</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">驗證碼：</td>  
        <td>  
          <input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label>  
        </td>  
      </tr>  
      <tr>  
        <td></td>  
        <td>  
          <div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div>  
        </td>  
        <td>  
          <label><a href="javascript:_hyz()">換一張</a></label>  
        </td>  
      </tr>  
      <tr>  
        <td></td>  
        <td>  
          <input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>  
        </td>  
        <td>  
          <label></label>  
        </td>  
      </tr>  
    </table>  
</form>      
  </div>  
</div>  
  </body>  
</html>

1.2 用戶註冊校驗js

$(function() {  
    /*  
     * 1. 得到所有的錯誤信息，循環遍歷之。調用一個方法來確定是否顯示錯誤信息！  
     */  
    $(".errorClass").each(function() {  
        showError($(this));//遍歷每個元素，使用每個元素來調用showError方法  
    });  

    /*  
     * 2. 切換註冊按鈕的圖片  
     */  
    $("#submitBtn").hover(  
        function() {  
            $("#submitBtn").attr("src", "/goods/images/regist2.jpg");  
        },  
        function() {  
            $("#submitBtn").attr("src", "/goods/images/regist1.jpg");  
        }  
    );  

    /*  
     * 3. 輸入框得到焦點隱藏錯誤信息  
     */  
    $(".inputClass").focus(function() {  
        var labelId = $(this).attr("id") + "Error";//通過輸入框找到對應的label的id  
        $("#" + labelId).text("");//把label的內容清空！  
        showError($("#" + labelId));//隱藏沒有信息的label  
    });  

    /*  
     * 4. 輸入框失去焦點進行校驗  
     */  
    $(".inputClass").blur(function() {  
        var id = $(this).attr("id");//獲取當前輸入框的id  
        var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到對應的校驗函數名  
        eval(funName);//執行函數調用  
    });  

    /*  
     * 5. 表單提交時進行校驗  
     */  
    $("#registForm").submit(function() {  
        var bool = true;//表示校驗通過  
        if(!validateLoginname()) {  
            bool = false;  
        }  
        if(!validateLoginpass()) {  
            bool = false;  
        }  
        if(!validateReloginpass()) {  
            bool = false;  
        }  
        if(!validateEmail()) {  
            bool = false;  
        }  
        if(!validateVerifyCode()) {  
            bool = false;  
        }  

        return bool;  
    });  
});  

/*  
 * 登錄名校驗方法  
 */  
function validateLoginname() {  
    var id = "loginname";  
    var value = $("#" + id).val();//獲取輸入框內容  
    /*  
     * 1. 非空校驗  
     */  
    if(!value) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("用戶名不能爲空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /*  
     * 2. 長度校驗  
     */  
    if(value.length < 3 || value.length > 20) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("用戶名長度必須在3 ~ 20之間！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    /*  
     * 3. 是否註冊校驗  
     */  
    $.ajax({  
        url:"/goods/UserServlet",//要請求的servlet  
        data:{method:"ajaxValidateLoginname", loginname:value},//給服務器的參數  
        type:"POST",  
        dataType:"json",  
        async:false,//是否異步請求，如果是異步，那麼不會等服務器返回，我們這個函數就向下運行了。  
        cache:false,  
        success:function(result) {  
            if(!result) {//如果校驗失敗  
                $("#" + id + "Error").text("用戶名已被註冊！");  
                showError($("#" + id + "Error"));  
                return false;  
            }  
        }  
    });  
    return true;  
}  

/*  
 * 登錄密碼校驗方法  
 */  
function validateLoginpass() {  
    var id = "loginpass";  
    var value = $("#" + id).val();//獲取輸入框內容  
    /*  
     * 1. 非空校驗  
     */  
    if(!value) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("密碼不能爲空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /*  
     * 2. 長度校驗  
     */  
    if(value.length < 3 || value.length > 20) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("密碼長度必須在3 ~ 20之間！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    return true;      
}  

/*  
 * 確認密碼校驗方法  
 */  
function validateReloginpass() {  
    var id = "reloginpass";  
    var value = $("#" + id).val();//獲取輸入框內容  
    /*  
     * 1. 非空校驗  
     */  
    if(!value) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("確認密碼不能爲空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /*  
     * 2. 兩次輸入是否一致校驗  
     */  
    if(value != $("#loginpass").val()) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("兩次輸入不一致！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    return true;      
}  

/*  
 * Email校驗方法  
 */  
function validateEmail() {  
    var id = "email";  
    var value = $("#" + id).val();//獲取輸入框內容  
    /*  
     * 1. 非空校驗  
     */  
    if(!value) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("Email不能爲空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /*  
     * 2. Email格式校驗  
     */  
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("錯誤的Email格式！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    /*  
     * 3. 是否註冊校驗  
     */  
    $.ajax({  
        url:"/goods/UserServlet",//要請求的servlet  
        data:{method:"ajaxValidateEmail", email:value},//給服務器的參數  
        type:"POST",  
        dataType:"json",  
        async:false,//是否異步請求，如果是異步，那麼不會等服務器返回，我們這個函數就向下運行了。  
        cache:false,  
        success:function(result) {  
            if(!result) {//如果校驗失敗  
                $("#" + id + "Error").text("Email已被註冊！");  
                showError($("#" + id + "Error"));  
                return false;  
            }  
        }  
    });  
    return true;          
}  

/*  
 * 驗證碼校驗方法  
 */  
function validateVerifyCode() {  
    var id = "verifyCode";  
    var value = $("#" + id).val();//獲取輸入框內容  
    /*  
     * 1. 非空校驗  
     */  
    if(!value) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("驗證碼不能爲空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /*  
     * 2. 長度校驗  
     */  
    if(value.length != 4) {  
        /*  
         * 獲取對應的label  
         * 添加錯誤信息  
         * 顯示label  
         */  
        $("#" + id + "Error").text("錯誤的驗證碼！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    /*  
     * 3. 是否正確  
     */  
    $.ajax({  
        url:"/goods/UserServlet",//要請求的servlet  
        data:{method:"ajaxValidateVerifyCode", verifyCode:value},//給服務器的參數  
        type:"POST",  
        dataType:"json",  
        async:false,//是否異步請求，如果是異步，那麼不會等服務器返回，我們這個函數就向下運行了。  
        cache:false,  
        success:function(result) {  
            if(!result) {//如果校驗失敗  
                $("#" + id + "Error").text("驗證碼錯誤！");  
                showError($("#" + id + "Error"));  
                return false;  
            }  
        }  
    });  
    return true;          
}  

/*  
 * 判斷當前元素是否存在內容，如果存在顯示，不頁面不顯示！  
 */  
function showError(ele) {  
    var text = ele.text();//獲取元素的內容  
    if(!text) {//如果沒有內容  
        ele.css("display", "none");//隱藏元素  
    } else {//如果有內容  
        ele.css("display", "");//顯示元素  
    }  
}  

/*  
 * 換一張驗證碼  
 */  
function _hyz() {  
    /*  
     * 1. 獲取<img>元素  
     * 2. 重新設置它的src  
     * 3. 使用毫秒來添加參數  
     */  
    $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());  
}

例子2

2.1 用戶登錄jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>    
    <title>登錄</title>  
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/login.css'/>">  
    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>  
    <script type="text/javascript" src="<c:url value='/jsps/js/user/login.js'/>"></script>  
    <script src="<c:url value='/js/common.js'/>"></script>  

<script type="text/javascript">  
    $(function() {/*Map<String(Cookie名稱),Cookie(Cookie本身)>*/  
        // 獲取cookie中的用戶名  
        var loginname = window.decodeURI("${cookie.loginname.value}");  
        if("${requestScope.user.loginname}") {  
            loginname = "${requestScope.user.loginname}";  
        }  
        $("#loginname").val(loginname);  
    });  
</script>  
  </head>  

  <body>  
    <div class="main">  
      <div><img src="<c:url value='/images/logo.gif'/>" /></div>  
      <div>  
        <div class="imageDiv"><img class="img" src="<c:url value='/images/zj.png'/>"/></div>  
        <div class="login1">  
          <div class="login2">  
            <div class="loginTopDiv">  
              <span class="loginTop">傳智會員登錄</span>  
              <span>  
                <a href="<c:url value='/jsps/user/regist.jsp'/>" class="registBtn"></a>  
              </span>  
            </div>  
            <div>  
              <form target="_top" action="<c:url value='/UserServlet'/>" method="post" id="loginForm">  
                <input type="hidden" name="method" value="login" />  
                  <table>  
                    <tr>  
                      <td width="50"></td>  
                      <td><label class="error" id="msg">${msg }</label></td>  
                    </tr>  
                    <tr>  
                      <td width="50">用戶名</td>  
                      <td><input class="input" type="text" name="loginname" id="loginname"/></td>  
                    </tr>  
                    <tr>  
                      <td height="20"> </td>  
                      <td><label id="loginnameError" class="error"></label></td>  
                    </tr>  
                    <tr>  
                      <td>密　碼</td>  
                      <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass }"/></td>  
                    </tr>  
                    <tr>  
                      <td height="20"> </td>  
                      <td><label id="loginpassError" class="error"></label></td>  
                    </tr>  
                    <tr>  
                      <td>驗證碼</td>  
                      <td>  
                        <input class="input yzm" type="text" name="verifyCode" id="verifyCode" value="${user.verifyCode }"/>  
                        <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>"/>  
                        <a id="verifyCode">換張圖</a>  
                      </td>  
                    </tr>  
                    <tr>  
                      <td height="20px"> </td>  
                      <td><label id="verifyCodeError" class="error"></label></td>  
                    </tr>  
                    <tr>  
                      <td> </td>  
                      <td align="left">  
                        <input type="image" id="submit" src="<c:url value='/images/login1.jpg'/>" class="loginBtn"/>  
                      </td>  
                    </tr>                                                                               
                 </table>  
              </form>  
            </div>  
          </div>  
        </div>  
      </div>  
    </div>  
  </body>  
</html>

2.2 用戶登錄校驗js

<span style="font-size:18px;">$(function() {  
    /*  
     * 1. 讓登錄按鈕在得到和失去焦點時切換圖片  
     */  
    $("#submit").hover(  
        function() {  
            $("#submit").attr("src", "/goods/images/login2.jpg");  
        },  
        function() {  
            $("#submit").attr("src", "/goods/images/login1.jpg");  
        }  
    );  

    /*  
     * 2. 給註冊按鈕添加submit()事件，完成表單校驗  
     */  
    $("#submit").submit(function(){  
        $("#msg").text("");  
        var bool = true;  
        $(".input").each(function() {  
            var inputName = $(this).attr("name");  
            if(!invokeValidateFunction(inputName)) {  
                bool = false;  
            }  
        });  
        return bool;  
    });  

    /*  
     * 3. 輸入框得到焦點時隱藏錯誤信息  
     */  
    $(".input").focus(function() {  
        var inputName = $(this).attr("name");  
        $("#" + inputName + "Error").css("display", "none");  
    });  

    /*  
     * 4. 輸入框推動焦點時進行校驗  
     */  
    $(".input").blur(function() {  
        var inputName = $(this).attr("name");  
        invokeValidateFunction(inputName);  
    })  
});  

/*  
 * 輸入input名稱，調用對應的validate方法。  
 * 例如input名稱爲：loginname，那麼調用validateLoginname()方法。  
 */  
function invokeValidateFunction(inputName) {  
    inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);  
    var functionName = "validate" + inputName;  
    return eval(functionName + "()");     
}  

/*  
 * 校驗登錄名  
 */  
function validateLoginname() {  
    var bool = true;  
    $("#loginnameError").css("display", "none");  
    var value = $("#loginname").val();  
    if(!value) {// 非空校驗  
        $("#loginnameError").css("display", "");  
        $("#loginnameError").text("用戶名不能爲空！");  
        bool = false;  
    } else if(value.length < 3 || value.length > 20) {//長度校驗  
        $("#loginnameError").css("display", "");  
        $("#loginnameError").text("用戶名長度必須在3 ~ 20之間！");  
        bool = false;  
    }  
    return bool;  
}  

/*  
 * 校驗密碼  
 */  
function validateLoginpass() {  
    var bool = true;  
    $("#loginpassError").css("display", "none");  
    var value = $("#loginpass").val();  
    if(!value) {// 非空校驗  
        $("#loginpassError").css("display", "");  
        $("#loginpassError").text("密碼不能爲空！");  
        bool = false;  
    } else if(value.length < 3 || value.length > 20) {//長度校驗  
        $("#loginpassError").css("display", "");  
        $("#loginpassError").text("密碼長度必須在3 ~ 20之間！");  
        bool = false;  
    }  
    return bool;  
}  

/*  
 * 校驗驗證碼  
 */  
function validateVerifyCode() {  
    var bool = true;  
    $("#verifyCodeError").css("display", "none");  
    var value = $("#verifyCode").val();  
    if(!value) {//非空校驗  
        $("#verifyCodeError").css("display", "");  
        $("#verifyCodeError").text("驗證碼不能爲空！");  
        bool = false;  
    } else if(value.length != 4) {//長度不爲4就是錯誤的  
        $("#verifyCodeError").css("display", "");  
        $("#verifyCodeError").text("錯誤的驗證碼！");  
        bool = false;  
    } else {//驗證碼是否正確  
        $.ajax({  
            cache: false,  
            async: false,  
            type: "POST",  
            dataType: "json",  
            data: {method: "ajaxValidateVerifyCode", verifyCode: value},  
            url: "/goods/UserServlet",  
            success: function(flag) {  
                if(!flag) {  
                    $("#verifyCodeError").css("display", "");  
                    $("#verifyCodeError").text("錯誤的驗證碼！");  
                    bool = false;                     
                }  
            }  
        });  
    }  
    return bool;  
}</span>

例子三

3.1用戶修改密碼jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>pwd.jsp</title>  

    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <!-- 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    -->  
    <link rel="stylesheet" type="text/css" href="<c:url value='/css/css.css'/>">  
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/pwd.css'/>">  
    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>  
    <script type="text/javascript" src="<c:url value='/jsps/js/user/pwd.js'/>"></script>  
    <script src="<c:url value='/js/common.js'/>"></script>  
  </head>  

  <body>  
    <div class="div0">  
        <span>修改密碼</span>  
    </div>  

    <div class="div1">  
        <form action="<c:url value='/UserServlet'/>" method="post" target="_top">  
            <input type="hidden" name="method" value="updatePassword"/>  
        <table>  
            <tr>  
                <td><label class="error">${msg }</label></td>  
                <td colspan="2"> </td>  
            </tr>  
            <tr>  
                <td align="right">原密碼:</td>  
                <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass }"/></td>  
                <td><label id="loginpassError" class="error"></label></td>  
            </tr>  
            <tr>  
                <td align="right">新密碼:</td>  
                <td><input class="input" type="password" name="newpass" id="newpass" value="${user.newpass }""/></td>  
                <td><label id="newpassError" class="error"></label></td>  
            </tr>  
            <tr>  
                <td align="right">確認密碼:</td>  
                <td><input class="input" type="password" name="reloginpass" id="reloginpass" value="${user.reloginpass }""/></td>  
                <td><label id="reloginpassError" class="error"></label></td>  
            </tr>  
            <tr>  
                <td align="right"></td>  
                <td>  
                  <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>" border="1"/>  
                  <a href="javascript:_change();">看不清，換一張</a>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">驗證碼:</td>  
                <td>  
                  <input class="input" type="text" name="verifyCode" id="verifyCode" value="${user.verifyCode }""/>  
                </td>  
                <td><label id="verifyCodeError" class="error"></label></td>  
            </tr>  
            <tr>  
                <td align="right"></td>  
                <td><input id="submit" type="submit" value="修改密碼"/></td>  
            </tr>  
        </table>  
        </form>  
    </div>  
  </body>  
</html>

3.2 用戶修改密碼校驗js

$(function() {    
    /*  
     * 1. 給註冊按鈕添加submit()事件，完成表單校驗  
     */  
    $("#submit").submit(function(){  
        $("#msg").text("");  
        var bool = true;  
        $(".input").each(function() {  
            var inputName = $(this).attr("name");  
            if(!invokeValidateFunction(inputName)) {  
                bool = false;  
            }  
        });  
        return bool;  
    });  

    /*  
     * 3. 輸入框推動焦點時進行校驗  
     */  
    $(".input").blur(function() {  
        var inputName = $(this).attr("name");  
        invokeValidateFunction(inputName);  
    });  
});  

/*  
 * 輸入input名稱，調用對應的validate方法。  
 * 例如input名稱爲：loginname，那麼調用validateLoginname()方法。  
 */  
function invokeValidateFunction(inputName) {  
    inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);  
    var functionName = "validate" + inputName;  
    return eval(functionName + "()");     
}  

/*  
 * 校驗密碼  
 */  
function validateLoginpass() {  
    var bool = true;  
    $("#loginpassError").css("display", "none");  
    var value = $("#loginpass").val();  
    if(!value) {// 非空校驗  
        $("#loginpassError").css("display", "");  
        $("#loginpassError").text("密碼不能爲空！");  
        bool = false;  
    } else if(value.length < 3 || value.length > 20) {//長度校驗  
        $("#loginpassError").css("display", "");  
        $("#loginpassError").text("密碼長度必須在3 ~ 20之間！");  
        bool = false;  
    });  
    return bool;  
}  

// 校驗新密碼  
function validateNewpass() {  
    var bool = true;  
    $("#newpassError").css("display", "none");  
    var value = $("#newpass").val();  
    if(!value) {// 非空校驗  
        $("#newpassError").css("display", "");  
        $("#newpassError").text("新密碼不能爲空！");  
        bool = false;  
    } else if(value.length < 3 || value.length > 20) {//長度校驗  
        $("#newpassError").css("display", "");  
        $("#newpassError").text("新密碼長度必須在3 ~ 20之間！");  
        bool = false;  
    }  
    return bool;  
}  

/*  
 * 校驗確認密碼  
 */  
function validateReloginpass() {  
    var bool = true;  
    $("#reloginpassError").css("display", "none");  
    var value = $("#reloginpass").val();  
    if(!value) {// 非空校驗  
        $("#reloginpassError").css("display", "");  
        $("#reloginpassError").text("確認密碼不能爲空！");  
        bool = false;  
    } else if(value != $("#newpass").val()) {//兩次輸入是否一致  
        $("#reloginpassError").css("display", "");  
        $("#reloginpassError").text("兩次密碼輸入不一致！");  
        bool = false;  
    }  
    return bool;      
}  

/*  
 * 校驗驗證碼  
 */  
function validateVerifyCode() {  
    var bool = true;  
    $("#verifyCodeError").css("display", "none");  
    var value = $("#verifyCode").val();  
    if(!value) {//非空校驗  
        $("#verifyCodeError").css("display", "");  
        $("#verifyCodeError").text("驗證碼不能爲空！");  
        bool = false;  
    } else if(value.length != 4) {//長度不爲4就是錯誤的  
        $("#verifyCodeError").css("display", "");  
        $("#verifyCodeError").text("錯誤的驗證碼！");  
        bool = false;  
    } else {//驗證碼是否正確  
        $.ajax({  
            cache: false,  
            async: false,  
            type: "POST",  
            dataType: "json",  
            data: {method: "ajaxValidateVerifyCode", verifyCode: value},  
            url: "/goods/UserServlet",  
            success: function(flag) {  
                if(!flag) {  
                    $("#verifyCodeError").css("display", "");  
                    $("#verifyCodeError").text("錯誤的驗證碼！");  
                    bool = false;                     
                }  
            }  
        });  
    }  
    return bool;  
}

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

例子1

例子2

例子三

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

docker gitlab 重置 root 密碼

字符串 format用法

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

Django 設置遠程訪問

mysql5.7密碼策略及修改技巧

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結