Jquery Validate 預設校驗規則、jQuery.validator.addMethod自定義驗證方法---例子
阿新 • • 發佈：2018-12-20
一、Jquery Validate 預設校驗規則
(1)、required:true 必輸欄位 (2)、remote:"remote-valid.jsp" 使用ajax方法呼叫remote-valid.jsp驗證輸入值 (3)、email:true 必須輸入正確格式的電子郵件 (4)、url:true 必須輸入正確格式的網址 (5)、date:true 必須輸入正確格式的日期，日期校驗ie6出錯，慎用 (6)、dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性 (7)、number:true 必須輸入合法的數字(負數，小數) (8)、digits:true 必須輸入整數 (9)、creditcard:true 必須輸入合法的信用卡號 (10)、equalTo:"#password" 輸入值必須和#password相同 (11)、accept: 輸入擁有合法字尾名的字串（上傳檔案的字尾） (12)、maxlength:5 輸入長度最多是5的字串(漢字算一個字元) (13)、minlength:10 輸入長度最小是10的字串(漢字算一個字元) (14)、rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元) (15)、range:[5,10] 輸入值必須介於 5 和 10 之間 (16)、max:5 輸入值不能大於5 (17)、min:10 輸入值不能小於10
預設提示
messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", maxlength: $.validator.format("Please enter no more than {0} characters."), minlength: $.validator.format("Please enter at least {0} characters."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.") },
二、jQuery.validator.addMethod自定義驗證方法
---- addMethod(name,method,message)
引數 name 是新增的方法的名字。
引數 method 是一個函式，接收三個引數 (value,element,param) 。value 是元素的值，element 是元素本身，param 是引數。
引數message是提示資訊
下面是例子
1、html頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js校驗</title> <script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../js/jquery.validate.min.js" type="text/javascript"></script> <script src="verificationTest.js" type="text/javascript"></script> </head> <body> <form id="myform" action="" method="post"> <table> <tr> <td>姓名</td> <td> <input type="text" id="name" name="name"></td> </tr> <tr> <td>年齡</td> <td><input type="text" id="age" name="age"></td> </tr> <tr> <td>賬號</td> <td> <input type="text" id="account" name="account"></td> </tr> <tr> <td>手機</td> <td> <input type="text" id="mobile" name="mobile"></td> </tr> <tr> <td>電話</td> <td> <input type="text" id="phone" name="phone"></td> </tr> <tr> <td>身份證</td> <td><input type="text" id="code" name="code"></td> </tr> <tr> <td>型別</td> <td><select name="type"> <option value="0">請選擇</option> <option value="1">1</option> <option value="2">2</option> </select></td> </tr> <tr> <td><input type="submit" id="myformSubmit" value="確定"></td> </tr> </table> </form> </body> </html>
js頁面
$(function () {
// 手機號碼驗證
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機號碼格式錯誤");
// 電話號碼驗證
jQuery.validator.addMethod("phone", function(value, element) {
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "電話號碼格式錯誤");
// 字母和數字的驗證
jQuery.validator.addMethod("charAndNum", 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));
}, "只能輸入中文");
// 下拉框驗證
$.validator.addMethod("selectNone", function(value, element,param) {
return value != param[0];
}, "必須選擇一項");
//整數位，小數位驗證
jQuery.validator.addMethod("decimal", function(value, element, param) {
return this.optional(element) || new RegExp("^-?\\d{1," + (param[0] != null ? param[0] : "") + "}" + (param[1] != null ? (param[1] > 0 ? "(\\.\\d{1," + param[1] + "})?$" : "$") : "(\\.\\d+)?$")).test(value);
}, $.validator.format("內容輸入錯誤或者格式錯誤：整數位最多{0}位，小數位最多{1}位"));
// 驗證值必須大於特定值(不能等於)
jQuery.validator.addMethod("gt", function(value, element, param) {
return value > param[0];
}, $.validator.format("輸入值必須大於 {0}!"));
$("#myform").validate({
rules: {
name: { required: true, rangelength:[1,10] ,chinese:true},
age:{ required: true,decimal:[2,2]},
account : { required: true,charAndNum:true },
mobile : {required: true,mobile:true},
phone : {required: true,phone:true},
code : {required: true ,gt:[10]},
type : {required: true ,selectNone:[0]}
},
messages: {
name: { required: '請填寫真實姓名', rangelength : '請輸入1-10個字' },
age:{ required: '請填寫手機號' },
account : {required: '請填寫賬號'},
mobile : {required: '請填寫手機號' },
phone : {required: '請填寫電話號' },
code : {required: '請填寫身份證'},
type : {required: '請選擇型別'}
}
});
});
$("#myform").click(function () {
//驗證是否通過
if (!$("#myform").valid()) {
return;
}
//其他程式碼
});
效果
比較實用，網上查了查，自己整理試了一下，記錄下來，以便不時之需