为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易。jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下
使用方式
1、在控件中
使用默认验证规则
,例子: 电子邮件(必填)2、可以在控件中
为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易。jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下
1、在控件中
2、可以在控件中
3、通过
required除了设置为true/false之外,还可以使用表达式或者函数,比如
首先用JS设置Meta
Meta: "validate" });
Html
5、使用Meta可以将验证规则写在自定义的标签内,比如validate
JS设置Meta
Html
6、
对于复杂的验证,可以通过jQuery.validator.addMethod添加自定义的验证规则
官网提供的additional-methods.js里包含一些常用的验证方式,比如lettersonly,ziprange,nowhitespace等
例子
//然后就可以使用这个规则了
$("#form1").validate({
// 验证规则
rules: {
userName: {
required: true,userName: true,rangelength: [5,10]
}
},/ 设置错误信息 /
messages: {
userName: {
required: "请填写用户名",rangelength: "用户名必须在5-10个字符之间"
}
},});
7、
radio的验证
checkBox的验证
最少选择两项
select的验证
下拉框
8、
用remote可以进行Ajax验证
验证用户多种信息:
// 电话号码验证
jQuery.validator.addMethod("phone",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("zipCode",element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
},"邮政编码格式错误");
// QQ号码验证
jQuery.validator.addMethod("qq",element) {
var tel = /^[1-9]\d{4,9}$/;
return this.optional(element) || (tel.test(value));
},"qq号码格式错误");
// IP地址验证
jQuery.validator.addMethod("ip",element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
},"Ip地址格式错误");
// 字母和数字的验证
jQuery.validator.addMethod("chrnum",element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
},"只能输入数字和字母(字符A-Z,a-z,0-9)");
// 中文的验证
jQuery.validator.addMethod("chinese",element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
},"只能输入中文");
// 下拉框验证
$.validator.addMethod("selectNone",element) {
return value == "请选择";
},"必须选择一项");
// 字节长度验证
jQuery.validator.addMethod("byteRangeLength",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]);
},$.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
本文已被整理到了,欢迎大家学习阅读。
原文链接:https://www.f2er.com/jquery/44570.html