Sharing examples of jQuery Validate related parameters and commonly used custom validation rules

This article mainly introduces jQuery Validate related parameters and commonly used custom validation rules. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

Jquery Validate related parameters

//定义中文消息
var cnmsg = {
required: “必选字段”,
remote: “请修正该字段”,
email: “请输入正确格式的电子邮件”,
url: “请输入合法的网址”,
date: “请输入合法的日期”,
dateISO: “请输入合法的日期 (ISO).”,
number: “请输入合法的数字”,
digits: “只能输入整数”,
creditcard: “请输入合法的信用卡号”,
equalTo: “请再次输入相同的值”,
accept: “请输入拥有合法后缀名的字符串”,
maxlength: jQuery.format(“请输入一个长度最多是 {0} 的字符串”),
minlength: jQuery.format(“请输入一个长度最少是 {0} 的字符串”),
rangelength: jQuery.format(“请输入一个长度介于 {0} 和 {1} 之间的字符串”),
range: jQuery.format(“请输入一个介于 {0} 和 {1} 之间的值”),
max: jQuery.format(“请输入一个最大为 {0} 的值”),
min: jQuery.format(“请输入一个最小为 {0} 的值”)
};
jQuery.extend(jQuery.validator.messages, cnmsg);

Jquery Validate validation rules

(1)required:true required fields

(2)remote:”check.PHP” Use the ajax method to call check.php to verify the input value

(3)email:true You must enter an email in the correct format

(4)url:true The URL in the correct format must be entered

(5)date:true The date in the correct format must be entered

(6) dateISO:true You must enter the date (ISO) in the correct format, for example: 2009-06-23, 1998/01/22 Only the format is verified, not the validity

(7)number:true required Enter legal numbers (negative numbers, decimals)

(8)digits:true You must enter an integer

(9)creditcard: You must enter a legal credit card number

(10)equalTo:”#field” The 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 one character)

(13)minlength:10 Enter a string with a minimum length of 10 String (Chinese characters count as one character)

(14)rangelength:[5,10] The input length must be between 5 and 10") (Chinese characters count as one character)

(15)range:[5,10] The input value must be between 5 and 10

(16)max:5 The input value cannot be greater than 5

(17)min:10 The input value cannot be less than 10

Jquery Validate Custom validation rules

addMethod(name,method,message) method:

Parameter name is the name of the added method

Parameter method is a function that receives three parameters (value, element, param) value is the value of the element, element is the element itself param

Yes Parameters, we can use addMethod to add validation methods other than built-in Validation methods. For example, if there is a field, only

can enter one letter, the range is a-f, the writing is 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;
}
},”必须是一个字母,且a-f”);

When using it, for example, if there is a form field with id="username", write

username:{
af:["a","f"]
}

method

in the rules. The first parameter of addMethod is the name of the added verification method. , this is the third parameter of af

addMethod, which is the customized error prompt. The prompt here is: "Must be a letter, and a-f"

## The second parameter of #addMethod is a function. This 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 parameter. If multiple parameters are used in [], separate them with commas

Jquery Validate submit

submitHandler: 通过验证后运行的函数,里面要加上表单提交的函 数,否则表单不会提交
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); //用Jquery Form的函数 } })
Jquery Validate error 错误提示dom
.errorPlacement：Callback Default: 把错误信息放在验证的元素后面
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

Set the style of the error prompt, you can add 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: Commonly used custom verification 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个字节之间(一个中文字算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] < &#39;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));
}, “请输入汉字”);
// 字符最小长度验证（一个中文字符长度为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}!”));
// 字符最大长度验证（一个中文字符长度为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(){
//自定义一个验证方法
$.validator.addMethod(
"formula", //验证方法名称
function(value, element, param) {//验证规则
return value == eval(param);
}, 
'请正确输入数学公式计算后的结果'//验证提示信息
);
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required",
valcode: {
formula: "7+9"
}
},
messages: {
username: {
required: '请输入姓名',
minlength: '请至少输入两个字符'
},
email: {
required: '请输入电子邮件',
email: '请检查电子邮件的格式'
},
url: '请检查网址的格式',
comment: '请输入您的评论'
}, 
errorElement: "i",
//用来创建错误提示信息标签
success: function(label) {
//验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签em
label.text(" ")
//清空错误提示消息
.addClass("success");
//加上自定义的success类
}
 });
 });
 </script>
 <form class="cmxform" id="commentForm" method="get" action="">

<legend>一个简单的验证带验证提示的评论例子</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em>  </em><input id="curl" name="url" size="25" value="" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
  </p>
  <p>
   <label for="cvalcode">验证码</label>
   <em> </em><input id="cvalcode" name="valcode" size="25" value="" />=7+9
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </form>

Related recommendations:

jQuery Validate cannot verify the chosen-select element. How to solve it

jQuery Validate verifies multiple instances of the same name. Share

jQuery Validate form validation plug-in Detailed explanation

The above is the detailed content of Sharing examples of jQuery Validate related parameters and commonly used custom validation rules. For more information, please follow other related articles on the PHP Chinese website!