$(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 框架的强大之处,它提供了丰富的验证功能,允许开发者根据项目需求进行高度自定义,从而实现个性化的表单验证。在实际开发中,结合 CSS 和 JavaScript,可以打造出美观...
NULL 博文链接:https://269629151.iteye.com/blog/1699635
jQuery Validate框架极大地简化了客户端表单验证,它提供了丰富的预设规则和自定义功能,可以灵活地处理各种验证需求。通过学习和实践,开发者可以快速地在项目中应用这个强大的验证工具,提升用户体验,减少无效...
通过上述方法,你可以灵活地使用jQuery Validate框架实现丰富的前端验证功能。无论是简单的表单还是复杂的业务场景,都能找到合适的解决方案。在实际开发中,记得根据项目需求合理选择和组合这些特性,以提供最佳的...
在jQuery Validate框架中,主要包含以下几个核心知识点: 1. **安装与引入**:首先,你需要在项目中引入jQuery库和jQuery Validate插件的JavaScript文件。通常,这两个文件可以从CDN(内容分发网络)获取,或者下载...
jQuery Validate是一个强大的JavaScript库,专为jQuery框架设计,用于简化和优化HTML表单的验证过程。本篇文章将深入探讨jQuery Validate的依赖、核心功能、使用方法以及相关文档资源。 首先,jQuery Validate依赖...
总之,jQuery Validate插件提供了一个强大且灵活的框架,用于创建自定义验证样式。通过理解其内部机制并结合CSS和JavaScript,你可以为你的Web应用构建出符合品牌风格和用户体验的验证功能。在实践中不断探索和优化...
### Struts2与jQuery.validate框架简介 #### Struts2框架 Struts2是Apache软件基金会的一个开源项目,它是Struts1的升级版,提供了一个用于构建企业级Java Web应用的强大MVC框架。Struts2的核心组件包括拦截器、...
本文将深入解析jQuery Validate框架的核心功能和用法。 首先,引入jQuery库和jQuery Validate插件的JavaScript文件是必要的。在示例代码中,我们可以看到`<script>`标签分别引入了`jquery-min.js`和`jquery....
首先,让我们看下如何引入jQuery Validate框架。在HTML文档中,你需要先引入jQuery库,然后引入jQuery Validate的脚本文件。以下是一个基本的设置示例: ```html <script type="text/javascript" src="js/jquery-...
非常好的Jquery validate:每个案例独立,都有注释 讲解了: 环境搭建 常见验证方法配置 国际化错误消息 自定义方法和远程验证 给验证添加 图标效果
这个文档主要涵盖了一系列关于jQuery Validate框架的使用方法、可选参数、验证器和实用工具。以下是对这些知识点的详细说明: 1. **启用调试模式**: - `debug` 参数是一个布尔值,默认为 `false`。如果设置为 `...
jQuery Validate 默认提供了一套简单的样式,但往往需要与现有的前端框架(如Bootstrap、Foundation等)或自定义CSS样式相融合。以下是一些关键步骤: 1. **覆盖默认样式**:jQuery Validate 使用`error`、`valid`...
`jQuery Validate`是一个非常流行的JavaScript库,用于在前端进行表单验证。这个库极大地简化了对用户输入数据的检查,确保它们符合特定的规则和格式。`jQuery Validate`结合自定义CSS样式,可以让表单验证既实用又...
《jQuery Validate与Struts2整合应用详解》 在Web开发中,前端验证用户输入的数据是必不可少的一环,jQuery Validate插件就是一款强大的JavaScript验证工具,它可以帮助我们方便地实现表单验证。与此同时,Struts2...
jQuery Validate 是一款强大的表单验证插件,基于 jQuery 框架开发而成。它能够帮助开发者轻松实现客户端表单验证功能,大大提高了用户体验并减少了服务器端的压力。通过简单地配置选项,即可启用各种内置验证规则。...
下面我们将详细探讨jQuery Validate框架的主要特性和使用方法。 首先,要使用jQuery Validate,你需要引入jQuery库以及jQuery Validate的JavaScript文件。在示例代码中,我们看到以下引入: ```html ...
总结,jQuery Validate框架提供了一套强大且易用的表单验证解决方案,通过自定义错误提示,我们可以打造出符合项目需求的交互体验。无论是初学者还是经验丰富的开发者,都能从中受益,提升Web应用的质量和用户体验。