jQuery.Validate usage notes (jQuery Validation example)_jquery

Validation operation class formValidatorClass.js

Copy code The code is as follows:

/**
* @author ming
*/
$(document).ready(function(){
/**//* Set default properties*/
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
}
});
// Character validation
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional (element) || /^[u0391-uFFE5w] $/.test(value);
}, "Can only include Chinese characters, English letters, numbers and underscores");
// Two Chinese characters Byte
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length ; i ){
if(value.charCodeAt(i) > 127){
length ;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "Please ensure that the entered value is between 3-15 bytes (one Chinese character counts as 2 bytes)");
//ID card number verification
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, " Please enter your ID number correctly");
//Mobile phone number verification
jQuery.validator.addMethod("isMobile", 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));
}, "Please fill in your mobile phone number correctly");
// Phone number verification
jQuery.validator.addMethod( "isTel", function(value, element) {
var tel = /^d{3,4}-?d{7,9}$/; //Phone number format 010-12345678
return this. optional(element) || (tel.test(value));
}, "Please fill in your phone number correctly");
// Contact number (mobile phone/telephone is acceptable) verification
jQuery .validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15 [0-9]{1})) d{8})$/;
var tel = /^d{3,4}-?d{7,9}$/;
return this.optional (element) || (tel.test(value) || mobile.test(value));
}, "Please fill in your contact number correctly");
// Postal code verification
jQuery .validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel. test(value));
}, "Please fill in your zip code correctly");
//Start verification
$('#submitForm').validate({
/**//* Set validation rules*/
rules: {
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15]
},
email: {
required:true,
email:true
},
phone:{
required:true,
isPhone:true
},
address:{
required:true,
stringCheck:true,
byteRangeLength:[3,100]
}
},
/**//* Set error message*/
messages: {
username: {
required: "Please fill in the username",
stringCheck: "The username can only include Chinese characters, English letters, numbers and underscores",
byteRangeLength: "The username must be between 3-15 characters (one Chinese character counts as 2 characters)"
},
email:{
required: "Please enter an email address",
email: "Please enter a valid email Address"
},
phone:{
required: "Please enter your contact number",
isPhone: "Please enter a valid contact number"
},
address :{
required: "Please enter your contact address",
stringCheck: "Please enter your contact address correctly",
byteRangeLength: "Please specify your contact address so that we can contact you"
}
},
/**//* Set verification trigger event*/
focusInvalid: false,
onkeyup: false,
/**//* Set error message prompt DOM*/
errorPlacement: function (error, element) {
error.appendTo( element.parent());
},
});
});

Test page index. html

Copy code The code is as follows:

"http://www.w3.org/TR/html4/loose.dtd">

表单验证

用户名
*

E-Mail
*

联系电话
*

地址
*

校验规则参数
格式为; name:{rule1, rule2 ....} name 要使用input 标签的name，之前，错误理解为 ID 了；
提示信息使用 alert 输出:

复制代码 代码如下:

errorPlacement: function (error, element) {
if (error[0].textContent){
Alert(error[0].textContext);
}
else {
Alert(error[0].innerText);
}
}