jQuery Validate Related Parameters and Common Custom Verification Rules
- 2021-07-26 06:29:05
- OfStack
Jquery Validate related parameters
// Define Chinese message
var cnmsg = {
required: "Required field" ,
remote: "Please fix this field" ,
email: "Please enter the correctly formatted e-mail message" ,
url: "Please enter a legal URL" ,
date: "Please enter a legal date" ,
dateISO: "Please enter a legal date (ISO). " ,
number: "Please enter a legal number" ,
digits: "Only integers can be entered" ,
creditcard: "Please enter a legal credit card number" ,
equalTo: "Please enter the same value again" ,
accept: "Please enter a string with a valid suffix" ,
maxlength: jQuery.format( "Please enter 1 The maximum length is {0} String of " ),
minlength: jQuery.format( "Please enter 1 The minimum length is {0} String of " ),
rangelength: jQuery.format( "Please enter 1 The length is between {0} And {1} String between " ),
range: jQuery.format( "Please enter 1 A between {0} And {1} Value between " ),
max: jQuery.format( "Please enter 1 Maximum size {0} Value of " ),
min: jQuery.format( "Please enter 1 The minimum is {0} Value of " )
};
jQuery.extend(jQuery.validator.messages, cnmsg);
Jquery Validate validation rules
(1) required: true required field
(2) remote: "check. PHP" Use the ajax method to call check. php to validate the input value
(3) email: true You must enter a properly formatted e-mail message
(4) url: true must enter a properly formatted URL
(5) date: true Date must be correctly formatted
(6) dateISO: true must enter the date in the correct format (ISO), for example: 2009-06-23, 1998/01/22 Verify only the format, not the validity
(7) number: true must enter a valid number (negative, decimal)
(8) digits: true must enter an integer
(9) creditcard: You must enter a legal credit card number
(10) equalTo: "# field" input value must be the same as # field
(11) accept: Enter a string with a legal suffix (the suffix of the uploaded file)
(12) maxlength: 5 Enter a string with a maximum length of 5 (Chinese characters count as 1 character)
(13) minlength: 10 Enter a string with a minimum length of 10 (Chinese characters count as 1 character)
(14) rangelength: [5, 10] The input length must be between 5 and 10 ") (Chinese characters count as 1 character)
(15) range: [5, 10] Input value must be between 5 and 10
(16) max: 5 Input value cannot be greater than 5
(17) min: 10 Input value cannot be less than 10
Jquery Validate Custom Validation Rules
addMethod (name, method, message) Method:
The parameter name is the name of the added method
The parameter method is a function, and three parameters (value, element, param) are received. value is the value of the element, and element is the element itself param
Is a parameter, we can use addMethod to add validation methods other than built-in Validation methods. For example, there is 1 field, only
Can enter 1 letter, the range is a-f, written as follows:
$.validator.addMethod( " af " ,function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
}, "It has to be 1 Letters , And a-f " );When you use it, for example, if there is a form field id= "username", write it in rules
username:{
af:["a","f"]
}Method
The first parameter of addMethod is the name of the validation method added, which is af
The third parameter of addMethod is the custom error prompt. The prompt here is: "Must be 1 letter, and a-f"
The second parameter of addMethod is a function, which is more important and determines the writing method when using this verification method
If there is only one parameter, write it directly. If af: "a", then a is the only one parameter. If there are multiple parameters, use it in [], separated by commas
Jquery Validate submit Submit
submitHandler: Functions that run after validation , Add a letter of form submission to it Number , Otherwise the form will not be submitted
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); // Use Jquery Form Function of } })
Jquery Validate error Error prompt dom
.errorPlacement : Callback Default: Put the error message after the validated element
Indicates where the error is placed, and the default is: error.appendTo(element.parent()); That is, put the error message after the validated element
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}Set the style of error prompt to increase icon display, like:
input.error { border: 1px solid red; }
label.error {
background:url( " ./demo/images/unchecked.gif " ) no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
Appendix: Common custom validation rules
// 字符验证
jQuery.validator.addMethod(“stringCheck”, function(value, element) {
return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, ”只能包括中文字、英文字母、数字和下划线”);
// 中文字两个字节
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] );
}, ”请确保输入的值在3-15个字节之间(1个中文字算2个字节)”);
// 身份证号码验证
jQuery.validator.addMethod(“isIdCardNo”, function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, ”请正确输入您的身份证号码”);
// 手机号码验证
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));
}, ”请正确填写您的手机号码”);
// 电话号码验证
jQuery.validator.addMethod(“isTel”, function(value, element) {
var tel = /^d{3,4}-?d{7,9}$/; //电话号码格式010-12345678
return this.optional(element) || (tel.test(value));
}, ”请正确填写您的电话号码”);
// 联系电话(手机/电话皆可)验证
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));
}, ”请正确填写您的联系电话”);
// 邮政编码验证
jQuery.validator.addMethod(“isZipCode”, function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, ”请正确填写您的邮政编码”);
function isIdCardNo(num) {
var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var parityBit=new Array(“1″,”0″,”X”,”9″,”8″,”7″,”6″,”5″,”4″,”3″,”2″);
var varArray = new Array();
var intValue;
var lngProduct = 0;
var intCheckDigit;
var intStrLen = num.length;
var idNumber = num;
// initialize
if ((intStrLen != 15) && (intStrLen != 18)) {
return false;
}
// check and set value
for(i=0;i<intStrLen;i++) {
varArray[i] = idNumber.charAt(i);
if ((varArray[i] < '0′ || varArray[i] > '9′) && (i != 17)) {
return false;
} else if (i < 17) {
varArray[i] = varArray[i] * factorArr[i];
}
}
if (intStrLen == 18) {
//check date
var date8 = idNumber.substring(6,14);
if (isDate8(date8) == false) {
return false;
}
// calculate the sum of the products
for(i=0;i<17;i++) {
lngProduct = lngProduct + varArray[i];
}
// calculate the check digit
intCheckDigit = parityBit[lngProduct % 11];
// check last digit
if (varArray[17] != intCheckDigit) {
return false;
}
}
else{ //length is 15
//check date
var date6 = idNumber.substring(6,12);
if (isDate6(date6) == false) {
return false;
}
}
return true;
}
function isDate6(sDate) {
if(!/^[0-9]{6}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
if (year < 1700 || year > 2500) return false
if (month < 1 || month > 12) return false
return true
}
function isDate8(sDate) {
if(!/^[0-9]{8}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
day = sDate.substring(6, 8);
var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]
if (year < 1700 || year > 2500) return false
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;
if (month < 1 || month > 12) return false
if (day < 1 || day > iaMonthDays[month - 1]) return false
return true
}
// 身份证号码验证
jQuery.validator.addMethod(“idcardno”, function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, “请正确输入身份证号码”);
//字母数字
jQuery.validator.addMethod(“alnum”, function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
}, “只能包括英文字母和数字”);
// 邮政编码验证
jQuery.validator.addMethod(“zipcode”, function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, “请正确填写邮政编码”);
// 汉字
jQuery.validator.addMethod(“chcharacter”, function(value, element) {
var tel = /^[u4e00-u9fa5]+$/;
return this.optional(element) || (tel.test(value));
}, “请输入汉字”);
// 字符最小长度验证（1个中文字符长度为2）
jQuery.validator.addMethod(“stringMinLength”, 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);
}, $.validator.format(“长度不能小于{0}!”));
// 字符最大长度验证（1个中文字符长度为2）
jQuery.validator.addMethod(“stringMaxLength”, 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);
}, $.validator.format(“长度不能大于{0}!”));
// 字符验证
jQuery.validator.addMethod(“string”, function(value, element) {
return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, “不允许包含特殊符号!”);
// 手机号码验证
jQuery.validator.addMethod(“mobile”, function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/.test(value));
}, “手机号码格式错误!”);
// 电话号码验证
jQuery.validator.addMethod(“phone”, function(value, element) {
var tel = /^(d{3,4}-?)?d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, “电话号码格式错误!”);
// 邮政编码验证
jQuery.validator.addMethod(“zipCode”, function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, “邮政编码格式错误!”);
// 必须以特定字符串开头验证
jQuery.validator.addMethod(“begin”, function(value, element, param) {
var begin = new RegExp(“^” + param);
return this.optional(element) || (begin.test(value));
}, $.validator.format(“必须以 {0} 开头!”));
// 验证两次输入值是否不相同
jQuery.validator.addMethod(“notEqualTo”, function(value, element, param) {
return value != $(param).val();
}, $.validator.format(“两次输入不能相同!”));
// 验证值不允许与特定值等于
jQuery.validator.addMethod(“notEqual”, function(value, element, param) {
return value != param;
}, $.validator.format(“输入值不允许为{0}!”));
// 验证值必须大于特定值(不能等于)
jQuery.validator.addMethod(“gt”, function(value, element, param) {
return value > param;
}, $.validator.format(“输入值必须大于{0}!”))
;Case 1:
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; vertical-align: top;width: 22px; display: inline-block; }
i.error {background:url("images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;font-style: inherit;}
i.success {background:url("images/checked.gif") no-repeat 0px 0px; padding-left: 16px;font-style: inherit;}
input{width: 230px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
// Customize 1 Verification methods
$.validator.addMethod(
"formula", // Validation method name
function(value, element, param) {// Verification rule
return value == eval(param);
},
' Please enter the results calculated by mathematical formulas correctly '// Verify prompt information
);
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required",
valcode: {
formula: "7+9"
}
},
messages: {
username: {
required: ' Please enter a name ',
minlength: ' Please enter at least two characters '
},
email: {
required: ' Please enter e-mail ',
email: ' Please check the format of e-mail '
},
url: ' Please check the format of the URL ',
comment: ' Please enter your comments '
},
errorElement: "i",
// Used to create error message labels
success: function(label) {
// Callback function executed after successful verification
//label Point to the error message tab above em
label.text(" ")
// Empty the error message
.addClass("success");
// Add custom success Class
}
});
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<legend>1 Simple example of validation comments with validation hints </legend>
<p>
<label for="cusername"> Name </label>
<em>*</em><input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail"> E-mail </label>
<em>*</em><input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl"> Web site </label>
<em> </em><input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomment"> Your comments </label>
<em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
</p>
<p>
<label for="cvalcode"> Verification code </label>
<em> </em><input id="cvalcode" name="valcode" size="25" value="" />=7+9
</p>
<p>
<input class="submit" type="submit" value=" Submit "/>
</p>
</form>