表單驗證總結
阿新 • • 發佈：2018-12-19
專案中經常在登入和註冊以及其他填寫資訊表單的時候會進行簡單的驗證，比如
- 使用者輸入的內容是否為空；
- 使用者輸入的內容長度是否滿足要求，一般密碼為6-12位數字和字母；
- 在註冊中密碼和確認密碼是否一樣，兩次輸入的內容是否為一致；
- 驗證碼是否和使用者輸入的一致；
網上有很多方法，比如validator外掛，修改input預設的提示資訊；個人還是喜歡用jQuery直接給每一個input設定blur，或者給提交按鈕直接設定click事件；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>歡迎加入趣學網，快來尋找你的領學者</title> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="styles/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="styles/bootstrap/font-awesome.min.css"> <link rel="stylesheet" href="styles/css/login.css"> </head> <body> <div class="content"> <div class="loginBox"> <div class="login_logo"> <img src="images/logo/green-logo.png" class="logoImg"> </div> <div class="loginWay"> <div class="userLogin" id="userLogin" style="color:#35AE35">使用者名稱密碼登入</div> <div class="phoneLogin" id="phoneLogin">手機動態碼登入</div> <div class="underline" id="underline"></div> </div> <form action="index.php" class="loginForm" id="loginForm"> <ul> <div id="user_way"> <li> <i class="userIcon"></i> <input type="text" name="username" placeholder="賬戶名" class="inputBox"> <span id="name_error" class="input-error"></span> </li> <li> <i class="pswIcon"></i> <input type="password" name="password" placeholder="密碼" class="inputBox"> <span id="psw_error" class="input-error"></span> </li> </div> <!--手機登入，預設隱藏--> <div id="phone_way" style="display: none"> <li> <i class="phoneIcon"></i> <input type="text" name="phoneNumber" placeholder="手機號" class="inputBox"> <input type="button" class="getCode" value="獲取驗證碼" id="btn"> <span id="phone_error" class="input-error"></span> </li> <li> <i class="verifyIcon"></i> <input type="text" name="phoneCode" placeholder="動態驗證碼" class="inputBox"> <span id="verify_error" class="input-error"></span> </li> </div> <li class="commitcode_new"> <a href="javascript:;" class="forgotPsw" id="forgotTxt">忘記密碼？</a> <input type="checkbox" id="rememberPsw"> <span>下次自動登入</span> </li> <li class="loginBtn"> <input type="button" value="登入" class="loginText" name="btnSubmit"> </li> <li class="agree_document"> <span>登入即同意<a href="javascript:;">《趣學網使用協議》</a>和<a href="javascript:;">《隱私權條款》</a></span> </li> <li class="otherWay"> <span>——————使用其他方式進行登入——————</span><br> <img src="images/login/wechat.png" class="wechat"> <img src="images/login/qq.png" class="qq"> </li> <li class="backIndex"><a href="index.html">返回首頁<i class="fa fa-chevron-circle-right"></i></li> </ul> </form> </div> </div> <script src="script/bootstrap/jquery-3.2.1.min.js"></script> <script src="script/bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="script/login.js"></script> </body> </html>
//login.js $(function() { //表單驗證 var name_psw = new RegExp(/^[A-Z0-9a-z]{6,12}$/); $('input[name="username"]').blur(function() { var $name = $('input[name="username"]'); var name_val = $.trim($name.val()); var name_error = $('#name_error'); //驗證使用者名稱 if(name_val == ""){ name_error.text('*使用者名稱不能為空'); $name.focus(); return; }else if(name_psw.test(name_val)){ name_error.text(''); }else{ name_error.text('*使用者名稱必須為6-12位數字或字母'); $name.focus(); return; }; }); $('input[name="password"]').blur(function() { var $psw = $('input[name="password"]'); var psw_val = $.trim($psw.val()); var psw_error = $('#psw_error'); //驗證密碼； if(psw_val == ""){ psw_error.text('*密碼不能為空'); $psw.focus(); return; }else if(name_psw.test(psw_val)){ psw_error.text(''); }else{ psw_error.text('*密碼必須為6-12位數字或字母'); $psw.focus(); return; }; }); $('input[name="phoneNumber"]').blur(function() { var $phone= $('input[name="phoneNumber"]'); var phone_val = $.trim($phone.val()); var phone_error = $('#phone_error'); // 驗證手機 var phone_isvalid = new RegExp(/^(13[0-9]|15[012356789]|18[0-9]|17[678]|14[57])[0-9]{8}$/); if(phone_val == ""){ phone_error.text('*手機號不能為空'); $phone.focus(); return; }else if(phone_isvalid.test(phone_val)){ phone_error.text(''); }else{ phone_error.text('*手機號格式不正確'); $phone.focus(); return; }; }); $('input[name="phoneCode"]').blur(function() { var $code= $('input[name="phoneCode"]'); var code_val = $.trim($code.val()); var verify_error = $('#verify_error'); var vercode = new RegExp(/^[0-9]{6}$/); //驗證碼 if(code_val == ""){ verify_error.text('*驗證碼不能為空'); $code.focus(); return; }else if(vercode.test(code_val)){ verify_error.text(''); }else{ verify_error.text('*驗證碼錯誤'); //手機號獲取驗證碼需要呼叫介面，因此先判斷是否為6位數字 $code.focus(); return; } }) })
【總結】
1.判斷是否為空，直接獲取input框的值然後判斷是否為""
2.判斷使用者輸入的長度以及是否為數字和字母，通過正則表示式new RegExp（），然後通過 規則.test（需要判斷的內容）
//驗證使用者名稱和密碼是否為字母和數字，同時長度為6-12位
var name_psw = new RegExp(/^[A-Z0-9a-z]{6,12}$/); if(正則表示式（這裡將正則表示式賦值給變數name_psw）.test(這裡是判斷的內容)){ psw_error.text(''); }else{ psw_error.text('*密碼必須為6-12位數字或字母'); $psw.focus(); return; };
//驗證手機號正則
var phone_isvalid = new RegExp(/^(13[0-9]|15[012356789]|18[0-9]|17[678]|14[57])[0-9]{8}$/);