// 字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");
// 中文字两个字节
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("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
// 电话号码验证
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
//开始验证
$('#submitForm').validate({
/* 设置验证规则 */
rules: {
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15]
},
email:{
required:true,
email:true
},
phone:{
required:true,
isPhone:true
},
address:{
required:true,
stringCheck:true,
byteRangeLength:[3,100]
}
},
/* 设置错误信息 */
messages: {
username: {
required: "请填写用户名",
stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
},
email:{
required: "请输入一个Email地址",
email: "请输入一个有效的Email地址"
},
phone:{
required: "请输入您的联系电话",
isPhone: "请输入一个有效的联系电话"
},
address:{
required: "请输入您的联系地址",
stringCheck: "请正确输入您的联系地址",
byteRangeLength: "请详实您的联系地址以便于我们联系您"
}
},
分享到:
相关推荐
综上所述,jquery.validate.js提供了一个非常便捷的方式来实现表单验证,通过引入相应的JS文件,并设置相应的验证规则和自定义信息,就可以轻松完成表单验证的任务。它不仅提高了开发效率,也增强了用户填写表单时的...
除了基本的验证规则,jQuery.validate.js还支持自定义规则、异步验证(如检查用户名是否已存在)、分组验证等高级功能。例如,你可以创建一个自定义规则来验证密码强度: ```javascript $.validator.addMethod(...
我们可以添加更多的自定义规则,如`minlength`、`maxlength`等,或者通过`rules`选项自定义规则: ```javascript $("#myForm").validate({ rules: { username: { required: true, minlength: 5 }, email: { ...
jQuery.validate允许你自定义错误消息,通过设置`messages`对象来实现。例如: ```javascript messages: { required: "这是必填字段。", remote: "请修正此字段。", email: "请输入有效的电子邮件地址。", /...
jQuery Validate插件允许自定义错误元素和错误消息的显示方式,可以使用`errorElement`和`errorPlacement`选项进行定制: ```javascript $("#myForm").validate({ errorElement: "span", // 错误信息的HTML元素 ...
总结,jQuery.validate.js为开发者提供了强大且灵活的表单验证解决方案,通过其丰富的API和自定义功能,可以满足各种复杂的验证需求。熟练掌握这一工具,能够极大地提升Web应用的用户体验和数据质量。在实际开发中,...
除了基本的验证规则,jQuery Validate还支持自定义验证方法。例如,你可以创建一个检查密码强度的方法: ```javascript jQuery.validator.addMethod("passwordStrength", function(value, element) { // 这里实现...
使用jQuery Validate,开发者可以轻松定义验证规则,如必填项、邮箱格式、数字范围等,并自定义错误消息。 知识点详解: - **选择器**:jQuery 提供了一系列CSS选择器,使得选取DOM元素变得非常容易,如 `$("...
`jquery.validate.js`可以和`jquery.metadata.js`配合使用,自动应用元数据中的验证规则和配置。 使用`jquery.validate.js`的基本步骤如下: 1. 引入jQuery库、`jquery.metadata.js`和`jquery.validate.js`的脚本...
jQuery.validate支持动态添加、删除或修改验证规则,这极大地增强了其灵活性。 六、与其他插件集成 jQuery.validate与许多其他jQuery插件兼容,如表单序列化插件serializeArray(),以及AJAX提交,可以方便地实现...
这个插件极大地简化了前端数据验证的过程,为开发者提供了丰富的选项和自定义规则。 首先,`jQuery Validate`的核心功能是验证用户在表单中输入的数据,确保其符合预设的验证规则。例如,我们可以设定密码必须包含...
在`jqueryvalidate验证demo`中,包含了多个实例,演示了基本验证、自定义规则、验证组等常见功能的应用。通过查看和运行这些示例,可以更深入地理解和掌握jQuery Validate的使用。 总结,jQuery Validate插件以其...
1. **易于使用**:jQuery Validate 插件通过简单的链式调用,即可实现各种验证规则的设置。 2. **内置验证规则**:包括必填项(required)、电子邮件(email)、数字(number)、URL等,满足大多数基本需求。 3. **...
jQuery 验证控件 jquery.validate.js 使用说明 + 中文 API jQuery 验证控件 jquery.validate.js 是一个功能...通过使用 jquery.validate.js,可以快速实现表单验证功能,并且可以根据需要自定义验证规则和提示信息。
}, "自定义规则的错误提示"); ``` 在表单提交时,validate插件会自动进行验证,如果所有字段都通过验证,`submitHandler`回调函数会被调用: ```javascript submitHandler: function(form) { // 提交表单或执行...
jQuery.validate支持多种验证规则,如`required`(必填),`email`(邮箱格式),`minlength`(最小长度)等。同时,开发者还可以自定义错误提示信息,以增强用户体验。 #### 五、小结 jQuery.validate插件以其...
jQuery.validate是一个基于jQuery的表单验证插件,它可以简化前端表单的验证过程,提供丰富的验证规则和自定义错误消息。通过jQuery.validate,开发者可以轻松地实现诸如必填项检查、格式验证(如邮箱、电话号码)、...
该插件提供了一系列内置规则和自定义规则,能够灵活地验证用户输入的数据,确保数据的有效性和准确性。 在使用jQuery.validate插件前,首先需要引入jQuery库和jQuery.validate插件的JavaScript文件。在这个案例中,...