jQuery之Validate表單驗證（一）
阿新 • • 發佈：2018-12-30
jQuery 是一個快速、簡單的JavaScript 庫， 它簡化了HTML 檔案的traversing，事件處理、動畫、Ajax 互動，從而方便了網頁製作的快速發展。 jQuery Validate 外掛為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單。
廢話不多說，開始demo演示：
前端html程式碼展示：
<h1>員工資訊錄入</h1> <form name="empForm" id="empForm" method="get" action="#"> <table> <tr> <td>真實姓名(不能為空 ,沒有其他要求)</td> <td><input type="text" id="realname" name="realname" /> </td> </tr> <tr> <td>登入名(登入名不能為空,長度應該在5-8之間:</td> <td><input type="text" id="username" name="username" /></td> </tr> <tr> <td>密碼(不能為空,長度6-12之間):</td> <td><input type="password" id="pwd" name="pwd" /></td> </tr> <tr> <td>重複密碼密碼(不能為空,長度6-12之間):</td> <td><input type="password" id="pwd2" name="pwd2" /></td> </tr> <tr> <td>性別(必選其一)</td> <td> <input type="radio" id="male" value="m" name="sex" />男 <input type="radio" id="female" value="f" name="sex" />女 <label for="sex" class="error" style="display: none;">性別必選</label> </td> </tr> <tr> <td>年齡(必填26-50):</td> <td><input type="text" id="age" name="age" /></td> </tr> <tr> <td>你的學歷:</td> <td> <select name="edu" id="edu"> <option value="">－請選擇你的學歷－</option> <option value="a">專科</option> <option value="b">本科</option> <option value="c">研究生</option> <option value="e">碩士</option> <option value="d">博士</option> </select> </td> </tr> <tr> <td>興趣愛好:</td> <td colspan="2"> <input type="checkbox" name="hobby" id="pp" value="0" />乒乓球 <input type="checkbox" name="hobby" id="ym" value="1" />羽毛球 <input type="checkbox" name="hobby" id="sw" value="2" />上網 <input type="checkbox" name="hobby" id="ly" value="3" />旅遊 <input type="checkbox" name="hobby" id="gw" value="4" />購物 <label for="hobby" class="error" style="display: none;">愛好必選</label> </td> </tr> <tr> <td align="left">電子郵箱:</td> <td><input type="text" id="email" name="email" /></td> </tr> <tr> <td align="left">身份證(15-18):</td> <td><input type="text" id="idcard" name="idcard" /></td> </tr> <tr> <td></td> <td><input type="submit" id="smtBtn" value="儲存"></td> </tr> </table> </form>
引入兩個js檔案：jquery-1.11.0.js(具體版本自己選擇)和jquery.validate.js
因為jquery.validate.js自帶的校驗資訊是英文，不便於使用者體驗，所以下面進行自定義校驗資訊，並自定義了身份證校驗規則，其它（郵箱，手機號）的都是同理！
<style> #registerForm label.error{ margin-left: 10px; color:red; } </style> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script type="text/javascript" src="../js/jquery.validate.js" ></script> <script type="text/javascript"> /* * 自定義校驗規則 * 引數： * 1. 規則名稱 * 2. 規則校驗邏輯（匿名函式） * 匿名函式的引數： * a) value: 應用這項校驗規則的表單項的值 * b) element: 應用這項規則的表單項標籤物件 * c) params: 使用者在使用規則的時候，規則的值 */ $.validator.addMethod("idCard", function(value, element, params){ //校驗邏輯程式碼，根據校驗規則決定返回true或者false var reg = /^\d{15}(\d{2}(\d|X))?$/i; var result = reg.test(value); if(!result){ element.style.backgroundColor = "blue"; } //返回值 true表示校驗通過，false表示校驗不通過 return result; }); $("#empForm").validate({ rules:{ realname:{ required:true }, username:{ required: true, rangelength:[5, 8] }, pwd:{ required: true, rangelength:[6, 12] }, pwd2:{ required: true, equalTo:"#pwd" // equalTo:"#pwd"，這個鍵值對裡的value是元素的ID值 }, sex:{ required:true }, age:{ required:true, range:[26, 50], digits:true }, edu:{ required:true }, hobby:{ required:true }, email:{ required:true, email:true }, idcard:{ required:true, idCard:true } }, messages:{ realname:{ required:"使用者名稱不能為空" }, username:{ required: "登入名不能為空", rangelength:"登入名長度應該是5~8位" }, pwd:{ required: "密碼不能為空", rangelength:"密碼長度必須是6~12位" }, pwd2:{ required: "確認密碼不能為空", equalTo:"兩次密碼輸入不一致" }, age:{ required:"年齡必填", range:"年齡必須是26~50之間", digits:"年齡必須是整數" }, edu:{ required:"學歷必選" }, email:{ required:"郵箱必填", email:"郵箱格式不正確" }, idcard:{ required:"身份證必填", idCard:"身份證格式不正確" } } }); </script>
通過以上測試，表單校驗可以基本滿足我們的簡單需求，但是我們不可能每次都要去重新編寫校驗規則，這也重複量太大，所以我們只需要定義好常用的規則，放在一個js檔案中，每次使用的話，我們可以在直接引用，也便於每次的修改，完善！
比如：以下就是我常用的並且自定義的jQueryFrom.js檔案，這個完全根據自己的喜好定義！
$(function() {
//jquery.validate
$("#jsForm,#login").validate({
submitHandler: function() {
//驗證通過後 的js程式碼寫在這裡
}
})
})
//下面是一些常用的驗證規則擴充套件
//配置錯誤提示的節點，預設為label，這裡配置成 span （errorElement:'span'）
//下面有圖例展示
$.validator.setDefaults({
errorElement: 'span'
});
//配置通用的預設提示語
$.extend($.validator.messages, {
required: "這是必填欄位",
remote: "請修正此欄位",
email: "請輸入有效的電子郵件地址",
url: "請輸入有效的網址",
date: "請輸入有效的日期",
number: "請輸入有效的數字",
equalTo: "你的輸入不相同",
extension: "請輸入有效的字尾",
maxlength: $.validator.format("最多可以輸入 {0} 個字元"),
minlength: $.validator.format("最少要輸入 {0} 個字元"),
rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字串"),
range: $.validator.format("請輸入範圍在 {0} 到 {1} 之間的數值"),
max: $.validator.format("請輸入不大於 {0} 的數值"),
min: $.validator.format("請輸入不小於 {0} 的數值")
});
/*-------------擴充套件驗證規則------------*/
//郵箱
jQuery.validator.addMethod("mail", function(value, element) {
var mail = /^[a-z0-9._%-] 注意：上面程式碼中--->配置錯誤提示的節點，預設為label，這裡配置成 span （errorElement:'span'）
網上上找到的一些驗證規則，僅供參考！
// 郵政編碼驗證
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");
// 手機號碼驗證
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機號碼格式錯誤");
// QQ號碼驗證
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]\d{4,10}$/;
return this.optional(element) || (tel.test(value));
}, "qq號碼格式錯誤");
// IP地址驗證
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式錯誤");
// 字母和數字的驗證
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "只能輸入數字和字母(字元A-Z, a-z, 0-9)");
// 中文的驗證
jQuery.validator.addMethod("chinese", function(value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "只能輸入中文");