1/**//**
2 *
3 */
4$(document).ready(function(){
5
6/**//* 设置默认属性 */
7$.validator.setDefaults({
8 submitHandler: function(form) {
9 form.submit();
10 }
11});
12
13// 字符验证
14jQuery.validator.addMethod("stringCheck", function(value, element) {
15 return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
16}, "只能包括中文字、英文字母、数字和下划线");
17
18// 中文字两个字节
19jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
20 var length = value.length;
21 for(var i = 0; i < value.length; i++){
22 if(value.charCodeAt(i) > 127){
23 length++;
24 }
25 }
26 return this.optional(element) || ( length >= param[0] && length <= param[1] );
27}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
28
29// 身份证号码验证
30jQuery.validator.addMethod("isIdCardNo", function(value, element) {
31 return this.optional(element) || isIdCardNo(value);
32}, "请正确输入您的身份证号码");
33
34// 手机号码验证
35jQuery.validator.addMethod("isMobile", function(value, element) {
36 var length = value.length;
37 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
38 return this.optional(element) || (length == 11 && mobile.test(value));
39}, "请正确填写您的手机号码");
40
41// 电话号码验证
42jQuery.validator.addMethod("isTel", function(value, element) {
43 var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
44 return this.optional(element) || (tel.test(value));
45}, "请正确填写您的电话号码");
46
47// 联系电话(手机/电话皆可)验证
48jQuery.validator.addMethod("isPhone", function(value,element) {
49 var length = value.length;
50 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
51 var tel = /^\d{3,4}-?\d{7,9}$/;
52 return this.optional(element) || (tel.test(value) || mobile.test(value));
53
54}, "请正确填写您的联系电话");
55
56// 邮政编码验证
57jQuery.validator.addMethod("isZipCode", function(value, element) {
58 var tel = /^[0-9]{6}$/;
59 return this.optional(element) || (tel.test(value));
60}, "请正确填写您的邮政编码");
61
62//开始验证
63$('#submitForm').validate({
64 /**//* 设置验证规则 */
65 rules: {
66 username: {
67 required:true,
68 stringCheck:true,
69 byteRangeLength:[3,15]
70 },
71 email:{
72 required:true,
73 email:true
74 },
75 phone:{
76 required:true,
77 isPhone:true
78 },
79 address:{
80 required:true,
81 stringCheck:true,
82 byteRangeLength:[3,100]
83 }
84 },
85
86 /**//* 设置错误信息 */
87 messages: {
88 username: {
89 required: "请填写用户名",
90 stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
91 byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
92 },
93 email:{
94 required: "请输入一个Email地址",
95 email: "请输入一个有效的Email地址"
96 },
97 phone:{
98 required: "请输入您的联系电话",
99 isPhone: "请输入一个有效的联系电话"
100 },
101 address:{
102 required: "请输入您的联系地址",
103 stringCheck: "请正确输入您的联系地址",
104 byteRangeLength: "请详实您的联系地址以便于我们联系您"
105 }
106 },
107
108 /**//* 设置验证触发事件 */
109 focusInvalid: false,
110 onkeyup: false,
111
112 /**//* 设置错误信息提示DOM */
113 errorPlacement: function(error, element) {
114 error.appendTo( element.parent());
115 },
116
117});
118
119});
分享到:
相关推荐
本文将深入探讨jQuery验证规则,以及如何在实际项目中应用它们。 首先,jQuery Validation Plugin是实现这些验证规则的关键工具。这个插件是jQuery的一个扩展,提供了丰富的验证功能,包括预定义的验证规则和自定义...
jQuery验证插件内置了许多预设的验证规则,如`required`(必填)、`email`(邮箱格式)、`url`(URL格式)等。你可以通过`rules`方法为表单元素添加这些规则: ```javascript $("#myForm").validate({ rules: { ...
jQuery表单验证插件是一种常用的解决方案,它基于jQuery框架,可以轻松地为网页表单添加各种验证规则。 #### 二、jQuery 验证插件介绍 jQuery验证插件是基于jQuery的一个强大的插件,由Jörn Zaefferer创建并维护...
2. **自定义验证规则**:开发者可以根据需求定义自己的验证规则,例如检查邮箱格式、手机号码的有效性等。这可以通过扩展插件的内置规则或使用自定义函数来实现。 3. **错误消息提示**:验证失败时,jQuery验证控件...
例如,通过`rules()`方法添加验证规则,通过`messages()`方法自定义错误提示信息。同时,框架还支持动态添加和删除验证规则,提高了代码的灵活性。 **良好的用户体验** 该框架注重用户体验,验证失败时会即时显示...
jQuery验证插件(jquery.validate.min.js)是基于jQuery的轻量级验证解决方案,它可以轻松地为表单添加各种验证规则,包括必填项、电子邮件格式、数字范围等。通过简单的配置,开发者可以自定义错误消息,以及设置...
jQuery验证插件是一款广泛应用于前端开发中的工具,它极大地简化了网页表单验证的过程,使得开发者可以方便地为用户输入的数据添加各种验证规则。这款插件不仅具备丰富的验证功能,而且特别强调对中文的支持,这在...
`jquery.metadata.js`是jQuery Validate的一个补充插件,允许开发者通过元数据(metadata)来定义验证规则,例如将规则写在CSS类名或自定义属性中,使得HTML结构更加清晰。 5. **额外验证方法** `additional-...
2. **基本使用**:在表单元素上添加`class="required"`或`data-rule-*`等属性,指定验证规则。例如,`<input type="text" name="email" required>`表示该字段为必填项。 3. **配置验证规则**:通过`validate()`方法...
jQuery Validation Engine 是一款基于 jQuery 库的验证插件,它能够方便地添加到任何HTML表单中,提供多种验证规则和错误提示样式。该插件支持自定义验证规则,且内置了多国语言,包括中文,因此对于中文项目来说...
"ssh2 jQuery Validator验证重复添加"这个主题可能涉及到在使用jQuery Validator时遇到的一个问题,即在同一个表单或多个表单中多次添加相同的验证规则,可能导致不必要的复杂性或者错误。这可能是因为开发者在编写...
2. **jQuery验证插件**:jQuery社区提供了许多验证插件,例如jQuery Validation Plugin,这是一个功能强大的验证工具,它包含了多种内置验证规则和自定义规则的能力,可以快速构建复杂的验证逻辑。 3. **基本使用**...
jQuery Validation Plugin允许开发者为每个验证规则设置自定义的错误消息,这样可以提供更直观的用户反馈。 **6. 动态验证** 利用jQuery的事件监听功能,可以实现实时验证,即在用户输入时立即检查数据的正确性。这...
4. **自定义规则**:可以扩展验证框架,添加自定义验证规则,以满足特定的业务需求。 5. **错误提示**:框架会自动处理错误消息的显示,你可以自定义错误元素的样式和位置。 6. **提交事件处理**:验证框架会在表单...
本文将深入解析一个具体的场景:使用js和JQuery进行电子邮件地址、电话号码以及邮政编码的验证。 ### 一、JS与JQuery在邮件验证中的应用 #### 1. 正则表达式在邮件验证中的作用 在上述代码示例中,核心是使用正则...
1. **易于使用**:只需要在表单元素上添加特定的class或data属性,就可以轻松设置验证规则。 2. **灵活的验证规则**:内置了一系列常见的验证规则,如required(必填)、email(电子邮件格式)、url(URL格式)等,...
**jQuery Validate 自定义验证规则详解** 在Web开发中,表单验证是不可或缺的一部分,它可以确保用户输入的数据符合预设的规范,从而保证数据的准确性和安全性。jQuery Validate 是一个非常流行的JavaScript库,它...
3. **配置验证规则**:通过`.rules("add", {rule: value})`添加规则,`.messages("add", {rule: message})`定制错误消息。 4. **处理验证结果**:使用插件提供的事件,如`invalidHandler`,`errorPlacement`等,来...
4. **自定义验证规则**:jQuery允许我们创建自定义验证规则,通过扩展`.validate()`插件。例如,创建一个验证邮箱格式的规则: ```javascript jQuery.validator.addMethod('emailFormat', function(value, element...