最近在做一个用户注册登录的页面,资料查寻过程中发现了一个非常不错的客户端验证的极品-jQuery.validate。
它是著名的JavaScript包jQuery的一个插件,其实它还有其它的一些插件应该都爽,有待慢慢来学习
官方地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery用户手册:http://jquery.org.cn/visual/cn/index.xml
开发使用起来非常简单明了,
我的代码:
Java代码
$(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');
}
});
});
$(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');
}
});
});
网上的资料有人说,它跟prototype包会有冲突,我还没有同时使用过,这点不是很清楚,但我是发现一个问题:
对于最小/大长度的验证方法,作者可能考虑到大家的命名习惯不同,同时做了minLength和minlength(maxLength和maxlength)方法,应该哪一个都是可以的,但对于用户Message来说,只能够定义针对minlength(maxlength),才能调用用户自定义的Message,
否则只是调用包的默认Message,但具体原因还没有查清楚。同时,这个插件提供了本地化的消息,但对于我这里初学者来说,怎么使用它还有待摸索!
分享到:
相关推荐
jquery.validate学习实例,附代码
配合我博客里的文章“jQuery.validate使用手册"学习更好
jquery.validate_Validation 学习手册。参考
这是一个关于jquery_validate插件学习的总结,内容不多,但是都是干货,有兴趣的可以看一下。
【批量下载】jquery.validate例实等 提供给初学者进行 Jquery的学习和使用JQuery
是一个AJAX中的动态插件 你可以免费下载希望你们大家学习顺利,早日成就心中所想
Ajax验证框架,jar,教程,学习资料Ajax验证框架,jar,教程,学习资料Ajax验证框架,jar,教程,学习资料
jquery表单验证组件,2020-05-23更新。 jquery表单验证组件,2020-05-23更新,供大家学习使用。
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件—-Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到...
jquery.validate是一个基于jquery的非常优秀的验证框架,我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,而且对国际化也有非常好的支持,通过本文给大家介绍jquery.validate 自定义验证方法...
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
最近做项目,需要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习。 【例子如下】 1.前台页面 <form id=form1 method=post> 用户名:<input type=text id=UserName name=...
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念,在网站开发过程同样如此。...3.一些方便的验证库,比如jQuery.validate 正因为如此普遍的需求和一定的复杂性
资源名称:jquery_validate使用攻略 中文WORD版内容简介:本文档主要...希望对大家学习jquery.validate时会有帮助;感兴趣的朋友可以过来看看资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
jquery_validate之学习jquery_validate之学习jquery_validate之学习
学习前台后台最开始接触的业务都是用户注册和登录,下面通过本文给大家介绍BootStrap与jQuery.validate实现表单提交校验功能,感兴趣的朋友一起学习吧
学习jQuery Validation,于是手写一公共范例,并收藏以便后用,里面附有测试代码,需要的朋友一起来测试。
NULL 博文链接:https://269629151.iteye.com/blog/1699635