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<p> When using it, for example, if there is a form field with id="username", write </p><pre class="brush:php;toolbar:false">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  127){
length++;
}
}
return this.optional(element) || ( length >= param[0]&&length  '9′) && (i != 17)) {
return false;
} else if (i  2500) return false
if (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  2500) return false
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;
if (month  12) return false
if (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  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  127) {
length++;
}
}
return this.optional(element) || (length  param;
}, $.validator.format(“输入值必须大于{0}!”))
;

Case 1:

<style>
* { 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>
 $(document).ready(function(){
//自定义一个验证方法
$.validator.addMethod(
"formula", //验证方法名称
function(value, element, param) {//验证规则
return value == eval(param);
}, 
&#39;请正确输入数学公式计算后的结果&#39;//验证提示信息
);
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required",
valcode: {
formula: "7+9"
}
},
messages: {
username: {
required: &#39;请输入姓名&#39;,
minlength: &#39;请至少输入两个字符&#39;
},
email: {
required: &#39;请输入电子邮件&#39;,
email: &#39;请检查电子邮件的格式&#39;
},
url: &#39;请检查网址的格式&#39;,
comment: &#39;请输入您的评论&#39;
}, 
errorElement: "i",
//用来创建错误提示信息标签
success: function(label) {
//验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签em
label.text(" ")
//清空错误提示消息
.addClass("success");
//加上自定义的success类
}
 });
 });
 </script>
 

<legend>一个简单的验证带验证提示的评论例子</legend>
  <p>
   <label>姓名</label>
   <em>*</em><input>
  </p>
  <p>
   <label>电子邮件</label>
   <em>*</em><input>
  </p>
  <p>
   <label>网址</label>
   <em>  </em><input>
  </p>
  <p>
   <label>你的评论</label>
   <em>*</em><textarea></textarea>
  </p>
  <p>
   <label>验证码</label>
   <em> </em><input>=7+9
  </p>
  <p>
   <input>
  </p>
 

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!