jquery validate 插件
正则表达式
. 匹配除换行符的任何字符
\w 匹配任何字母数字字符 \W 匹配任何非字母数字字符
\s 匹配任何空白字符 \S 匹配任何非空白字符
\b 匹配一个单词的开始和结尾 \B 匹配非单词开始或结束的位置
^ 匹配字符串的开始 \D 匹配任何非数字字符
$ 匹配字符串的结尾 [^X] 匹配任何非X字符
\d 匹配任何数字 [^aeiou] 匹配任何不在aeiou中的字符
\i 区分大小写 例: rep = /^[a-z]/i
\g 表明可以进行全局匹配
* 匹配前面的子表达式零次或多次 例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}
+ 匹配前面的子表达式一次或多次 例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}
? 匹配前面的子表达式零次或一次 例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}
{n} 重复n次
{n,} 至少重复n次
{n,m} 至少重复n次,最多m次
-----------------------------------------------------------------------------------------
jquery自带的验证方法
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值，远程方法调用，
只允许后台返回true或者false
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，
1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")
(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
|
--------------------------------------------------------------------------------------------------------------
$(document).ready(function(){
/* 设置默认属性 */
$.validator.setDefaults({
submitHandler: function(form) { form.submit(); }
});
// 中文字两个字节
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("userName", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "用户名只能包括中文字、英文字母、数字和下划线");
// 手机号码验证
jQuery.validator.addMethod("isMobile", 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("isPhone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
$(regFrom).validate({
/* 设置验证规则 */
rules: {
userName: {
required: true,
userName: true,
byteRangeLength: [3,15]
},
password: {
required: true,
minLength: 5
},
repassword: {
required: true,
minLength: 5,
equalTo: "#password"
},
question: {
required: true
},
answer: {
required: true
},
realName: {
required: true
},
cardNumber: {
isIdCardNo: true
},
mobilePhone: {
isMobile: true
},
phone: {
isPhone: true
},
email: {
required: true,
email: true
},
zipCode: {
isZipCode:true
}
},
/* 设置错误信息 */
messages: {
userName: {
required: "请填写用户名",
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
},
password: {
required: "请填写密码",
minlength: jQuery.format("输入{0}.")
},
repassword: {
required: "请填写确认密码",
equalTo: "两次密码输入不相同"
},
question: {
required: "请填写您的密码提示问题"
},
answer: {
required: "请填写您的密码提示答案"
},
realName: {
required: "请填写您的真实姓名"
},
email: {
required: "请输入一个Email地址",
email: "请输入一个有效的Email地址"
}
},
/* 错误信息的显示位置 */
errorPlacement: function(error, element) {
error.appendTo( element.parent() );
},
/* 验证通过时的处理 */
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
},
/* 获得焦点时不验证 */
focusInvalid: false,
onkeyup: false
});
// 输入框获得焦点时，样式设置
$('input').focus(function(){
if($(this).is(":text") || $(this).is(":password"))
$(this).addClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_normal').addClass('field_focus');
}
});
// 输入框失去焦点时，样式设置
$('input').blur(function() {
$(this).removeClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_focus').addClass('field_normal');
}
});
});
分享到：
相关推荐
jquery-validate 验证插件
jquery.validate1.7验证插件最新版！
jquery.validate插件remote规则相同值不验证的问题解决办法.方法绝对有效
Jquery.validate插件使用方法，基本上能满足注册所用到的表单验证
jquery validate表单验证插件制作注册表单提交验证 jquery validate表单验证插件制作注册表单提交验证
jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支持。
jquery.validate.min.js 1.16.0插件，jquery验证
jquery.validate.min.js jquery jquery验证插件 validate
jQuery Validate插件验证表单小练。
基于jquery的表单验证，它的性能、便捷、功能、人性化已远远超越jquery自己官方的jquery.validate插件，用过你就知道好，压缩包里面有demo
jquery.validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...
jQuery Validate表单验证插件，前端jq验证，jq验证插件
JQuery Validate插件的验证规则和例子，合成AJAX，局部刷新
Jquery validate和form两个插件，完美进行表单验证和Ajax无刷新方式提交form表单，很有用的哦。
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...
微软的jquery.validate.unobtrusive.js验证插件,可以用来验证单选和多选框的.
2、掌握Jquery-validate表单验证插件的使用，了解表单验证的实现原理 实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程，基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件，...
很强大jquery表单验证插件jquery.validate.js api.pdf
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 （一）、可选项( options ) 1 （二）插件方法 (jQuery validation) 6 （三、四）选择器及实用工具 (jQuery validation) 7 四、实用工具...
使用JQuery的validate插件做客户端验证非常方便，下面做一个使用validate插件验证用户注册信息的例子。 本实例使用的是1.5版本。 示例是在SSH下做的，代码如下： registe.jsp <%@ page language=java ...