最近在做一个用户注册登录的页面,资料查寻过程中发现了一个非常不错的客户端验证的极品-jQuery.validate。
它是著名的JavaScript包jQuery的一个插件,其实它还有其它的一些插件应该都爽,有待慢慢来学习
官方地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery用户手册:http://jquery.org.cn/visual/cn/index.xml
开发使用起来非常简单明了,
我的代码:
$(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 JSON JS 客户端验证 OA项目客户端验证
分别用jquery和javaScript实现的图片轮换。tab切换,图片上下滚动,表单验证。
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
表单数据验证一般分为客户端验证和服务器端验证。客户端验证是利用Javascript/DOM技术,对表单域输入的数据的有效格式做检查,然后动态给出相关的结果。这种验证方式非常灵活,表单数据无需提交到服务器即可完成验证...
JQuery_客户端文本验证
这个包不再维护。 查看的相同功能和更多功能: Laravel 4 和 Laravel 5 支持 ...在 composer.json 中需要bllim/laravel-to-jquery-validation并运行composer update 。 { "require": { "laravel/framework":
前端项目-jquery-validate,客户端表单验证变得容易
一个用于html表单客户端验证的jQuery插件。 介绍 verifyjs-jquery是一个客户端表单验证插件: 输入是jQuery插件。 输入是jQuery插件。 验证器通过事件与装饰器共享数据。 验证者可以是: 同步-立即返回结果。 ...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。
php jquery 登录验证 php jquery 登录验证 php jquery 登录验证
一个基于事件的jQuery插件,用于HTML表单的客户端验证
jQuery.validator用户名,邮件,密码,电话号码提交验证
带有多个文件选择、拖放支持、进度条、验证和预览图像、jQuery 音频和视频的文件上传小部件。 支持跨域、分块和可恢复的文件上传和客户端图像大小调整。 适用于任何支持标准 HTML 表单文件上传的服务器端平台(PHP、...
在表单提交前的客户端验证比较常见,之前一般都是alert效果不好,有了它,可以直接套用,呵呵,很方便
jQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
NULL 博文链接:https://sd8089730.iteye.com/blog/1031096
通过这样做,您不再需要担心保持服务器和客户端验证同步。 只需编写一次规则,然后继续处理更重要的事情。 首先,JSON 编码您的规则并将它们放在表单的data-validation属性中。 从那里,只需调用validate()以查看...
用jquery对表单进行客户端验证demo ,学习jquery的朋友可以参考下。
jQuery.validity 有效性不必手动编写验证或平衡某些笨拙的服务器端框架,而使您可以以自然而直接的方式设计客户端验证。 jQuery.validity易于学习和使用。 它完全适用于简单的验证方案,但它也设计用于干净自然地...
文件上传小部件,具有多个文件选择、拖放支持、进度条、验证和预览图像、jQuery 音频和视频。 支持跨域、分块、断点续传文件上传以及客户端图片大小调整。 适用于任何支持标准 HTML 表单文件上传的服务器端平台(PHP...