文档章节

jQuery验证框架(七)注意事项 (jQuery validation)

 打杂
发布于 2010/11/16 11:18
字数 741
阅读 4474
收藏 9

jQuery验证框架

七、注意事项

[1]复杂的name属性值
    当使用rules选项时,如果表单的name属性值包含有非法的javascript标识符,必须将name值加上引号。

Js代码
  1. $("#myform").validate({  
  2.   rules: {  
  3.     // no quoting necessary  
  4.     name: "required",  
  5.     // quoting necessary!  
  6.     "user[email]""email",  
  7.     // dots need quoting, too!  
  8.     "user.address.street""required"  
  9.   }  
  10. });  



[2]重构规则
    不论什么时候,当你的表单中的多个字段含有相同的验证规则及验证消息,重构规则可以减少很多重复。使用 addMethodaddClassRules 将非常有效果。  
    假使已经重构了如下规则:

Js代码
  1. // alias required to cRequired with new message  
  2. $.validator.addMethod("cRequired", $.validator.methods.required,  
  3.   "Customer name required");  
  4. // alias minlength, too  
  5. $.validator.addMethod("cMinlength", $.validator.methods.minlength,   
  6.   // leverage parameter replacement for minlength, {0} gets replaced with 2  
  7.   $.format("Customer name must have at least {0} characters"));  
  8. // combine them both, including the parameter for minlength  
  9. $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });  


    那么使用的时候如下:

Html代码
  1. <input name="customer1" class="customer" />  
  2. <input name="customer2" class="customer" />  
  3. <input name="customer3" class="customer" />  



[3]验证消息
    当验证了一个无效的表单元素,验证消息显示在用户面前。这些消息是从哪里来的呢?有三个途径来取得验证消息。
        1.通过待验证表单元素的title属性
        2.通过默认的验证消息
        3.通过插件设置(messages选项)

    这三种途径的优先顺序为:3 > 1 > 2
   
[4]验证消息与Google工具栏的冲突
    有时候验证消息会与Goole工具栏的AutoFill插件冲突。AutoFill通过替换表单元素的title属性,以显示提示消息。此时,验证消息如果获取的是title属性值,那么就得不到我们预期想要得到的结果。当文档载入时,可以通过如下方法避免冲突。

Js代码
  1. $("input.remove_title").attr("title""");  



[5]表单提交
    默认地,表单验证失败时阻止表单的提交,当验证通过,表单提交。当然,也可以通过submitHandler来自定义提交事件。
    将提交按钮的class属性设置成cancel,在表单提交时可以跳过验证。

Js代码
  1. <input type="submit" name="submit" value="Submit" />  
  2. <input type="submit" class="cancel" name="cancel" value="Cancel" />  


    下面这段代码将循环提交表单:

Java代码
  1. $("#myform").validate({  
  2.  submitHandler: function(form) {  
  3.    // some other code maybe disabling submit button  
  4.    // then:  
  5.    $(form).submit();  
  6.  }  
  7. });  


    $(form).submit() 触发了另外一轮的验证,验证后又去调用submitHandler,然后就循环了。可以用 form.submit() 来触发原生的表单提交事件。

Java代码
  1. $("#myform").validate({  
  2.  submitHandler: function(form) {  
  3.    form.submit();  
  4.  }  
  5. }); 

© 著作权归作者所有

共有 人打赏支持
粉丝 18
博文 8
码字总数 9204
作品 0
石景山
私信 提问
12 个 jQuery 的表单验证教程和插件

jQuery Form Validation 使用jQuery进行快速简单的表单验证教程 Advanced jQuery form validation jQuery plugin: Validation A jQuery inline form validation Adding Form Validation to ......

红薯
2011/11/21
4K
3
10 款高质量的 jQuery 表单验证插件

本文整理了几款高质量的jQuery表单验证插件,可以节约web开发者的时间。希望对你有帮助! 列表如下: 1) A Jquery Inline Form Validation 2) Form Validation Using Jquery 3) Using Jquery...

小卒过河
2011/06/28
109.7K
18
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0
8 个高可用的 jQuery 表单验证插件

1) A Jquery Inline Form Validation 2) Jquery Contact Form validation 3) Form Validation Using Jquery 4) Using Jquery and Ajax to validate Form 5) How to Validate Forms in both s......

红薯
2011/12/19
3.1K
8
240多个jQuery插件(1)

文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an input type file. Progress Bar Plugin. 表单验证(Form Validation) j......

五味格子
2011/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一文说尽MySQL事务及ACID特性的实现原理

本文将首先介绍 MySQL 事务相关的基础概念,然后介绍事务的 ACID 特性,并分析其实现原理。MySQL 博大精深,文章疏漏之处在所难免,欢迎批评指正。 MySQL 事务基础概念 事务(Transaction)是访...

架构师springboot
34分钟前
7
0
Vue +Element UI后台管理模板搭建示例

一、蓝色主题 Element ui 后台管理 Demo https://github.com/taylorchen709/vueAdmin https://taylorchen709.github.io/vueAdmin/#/user Element ui 文档 http://element.eleme.io/#/zh-CN/......

tianma3798
今天
2
0
小白学习大数据的最详细的学习路线图就在这里

现如今大数据已经上升到国家战略层面,企业对于大数据的关注和重视程度也在不断提升。想要成为大数据工程师,大需要很多种基础理论知识与编程框架、分布式服务器等来支撑,这也是使得一个大数...

董黎明
今天
9
0
2019Java学习规划

重要性 虚拟机 > 并发 > 数据库 > 设计模式 > 算法 读书 深入理解Java虚拟机 Java并发编程实战 剑指offer

2change
今天
3
0
聊聊flink JobManager的High Availability

序 本文主要研究一下flink JobManager的High Availability 配置 flink-conf.yaml high-availability: zookeeperhigh-availability.zookeeper.quorum: zookeeper:2181high-availability.zo......

go4it
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部