`
hehch
  • 浏览: 40731 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

jquery验证规则添加

    博客分类:
  • js
阅读更多
  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验证规则,以及如何在实际项目中应用它们。 首先,jQuery Validation Plugin是实现这些验证规则的关键工具。这个插件是jQuery的一个扩展,提供了丰富的验证功能,包括预定义的验证规则和自定义...

    JQuery验证

    jQuery验证插件内置了许多预设的验证规则,如`required`(必填)、`email`(邮箱格式)、`url`(URL格式)等。你可以通过`rules`方法为表单元素添加这些规则: ```javascript $("#myForm").validate({ rules: { ...

    jquery验证

    jQuery表单验证插件是一种常用的解决方案,它基于jQuery框架,可以轻松地为网页表单添加各种验证规则。 #### 二、jQuery 验证插件介绍 jQuery验证插件是基于jQuery的一个强大的插件,由Jörn Zaefferer创建并维护...

    jQuery 验证控件

    2. **自定义验证规则**:开发者可以根据需求定义自己的验证规则,例如检查邮箱格式、手机号码的有效性等。这可以通过扩展插件的内置规则或使用自定义函数来实现。 3. **错误消息提示**:验证失败时,jQuery验证控件...

    jQuery好的验证框架

    例如,通过`rules()`方法添加验证规则,通过`messages()`方法自定义错误提示信息。同时,框架还支持动态添加和删除验证规则,提高了代码的灵活性。 **良好的用户体验** 该框架注重用户体验,验证失败时会即时显示...

    jquery验证包

    jQuery验证插件(jquery.validate.min.js)是基于jQuery的轻量级验证解决方案,它可以轻松地为表单添加各种验证规则,包括必填项、电子邮件格式、数字范围等。通过简单的配置,开发者可以自定义错误消息,以及设置...

    jquery验证插件 带文档 支持中文

    jQuery验证插件是一款广泛应用于前端开发中的工具,它极大地简化了网页表单验证的过程,使得开发者可以方便地为用户输入的数据添加各种验证规则。这款插件不仅具备丰富的验证功能,而且特别强调对中文的支持,这在...

    jQuery表单验证大全

    `jquery.metadata.js`是jQuery Validate的一个补充插件,允许开发者通过元数据(metadata)来定义验证规则,例如将规则写在CSS类名或自定义属性中,使得HTML结构更加清晰。 5. **额外验证方法** `additional-...

    jquery 前端验证框架

    2. **基本使用**:在表单元素上添加`class="required"`或`data-rule-*`等属性,指定验证规则。例如,`&lt;input type="text" name="email" required&gt;`表示该字段为必填项。 3. **配置验证规则**:通过`validate()`方法...

    表单验证jquery插件

    jQuery Validation Engine 是一款基于 jQuery 库的验证插件,它能够方便地添加到任何HTML表单中,提供多种验证规则和错误提示样式。该插件支持自定义验证规则,且内置了多国语言,包括中文,因此对于中文项目来说...

    ssh2 jQuery Validator验证重复添加

    "ssh2 jQuery Validator验证重复添加"这个主题可能涉及到在使用jQuery Validator时遇到的一个问题,即在同一个表单或多个表单中多次添加相同的验证规则,可能导致不必要的复杂性或者错误。这可能是因为开发者在编写...

    Jquery表单验证特效示例

    2. **jQuery验证插件**:jQuery社区提供了许多验证插件,例如jQuery Validation Plugin,这是一个功能强大的验证工具,它包含了多种内置验证规则和自定义规则的能力,可以快速构建复杂的验证逻辑。 3. **基本使用**...

    Jquery超强验证表单

    jQuery Validation Plugin允许开发者为每个验证规则设置自定义的错误消息,这样可以提供更直观的用户反馈。 **6. 动态验证** 利用jQuery的事件监听功能,可以实现实时验证,即在用户输入时立即检查数据的正确性。这...

    jquery验证框架学习

    4. **自定义规则**:可以扩展验证框架,添加自定义验证规则,以满足特定的业务需求。 5. **错误提示**:框架会自动处理错误消息的显示,你可以自定义错误元素的样式和位置。 6. **提交事件处理**:验证框架会在表单...

    js JQuery验证电子邮箱的函数

    本文将深入解析一个具体的场景:使用js和JQuery进行电子邮件地址、电话号码以及邮政编码的验证。 ### 一、JS与JQuery在邮件验证中的应用 #### 1. 正则表达式在邮件验证中的作用 在上述代码示例中,核心是使用正则...

    很不错的验证框架jquery

    1. **易于使用**:只需要在表单元素上添加特定的class或data属性,就可以轻松设置验证规则。 2. **灵活的验证规则**:内置了一系列常见的验证规则,如required(必填)、email(电子邮件格式)、url(URL格式)等,...

    jquery valida自定义验证规则

    **jQuery Validate 自定义验证规则详解** 在Web开发中,表单验证是不可或缺的一部分,它可以确保用户输入的数据符合预设的规范,从而保证数据的准确性和安全性。jQuery Validate 是一个非常流行的JavaScript库,它...

    自带丰富示例的jQuery验证表单插件

    3. **配置验证规则**:通过`.rules("add", {rule: value})`添加规则,`.messages("add", {rule: message})`定制错误消息。 4. **处理验证结果**:使用插件提供的事件,如`invalidHandler`,`errorPlacement`等,来...

    jquery验证表单

    4. **自定义验证规则**:jQuery允许我们创建自定义验证规则,通过扩展`.validate()`插件。例如,创建一个验证邮箱格式的规则: ```javascript jQuery.validator.addMethod('emailFormat', function(value, element...

Global site tag (gtag.js) - Google Analytics