jQuery插件–jQuery Validate 插件为表单提供了强大的验证功能

jQuery插件–jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

为什么要用jQuery Validate ?

先说说我的情况,一进来公司,页面的一些表单,都是自己实打实的写,获取值之后,然后进行对这些值的进行校验。有时候还会重复的获取,导致会很混乱,而且每次写的时候需要些很多校验,并且复用率不高,导致效率低下。

我尝试过自己写一些校验的工具,把一些常用的正则放到一个js里面,然后需要用到这些正则的时候,就把该文件引入进来。但是由于精力和时间原因,来不及那么完善,这样的效率是提升了点,但是达不到理想中的状态。

直到碰到jQuery Validate,才感觉到表单验证的好处,并且这种机制很好,很适合复用以及拓展。

(1)简单的调用方法就能进行校验

(2)可以自定义校验方法

(3)可以自定义样式的显示

(4)等等…

需要大家一起去学习,才能感受到其乐趣,跳去表单验证的繁琐。

 

一、基础性的学习可以参考以下文章:

(1)将校验规则写到控件中 或是写到js代码中 

(2)自定义错误样式显示的位置

(3)自定义错误提示信息

(4)radio,checkbox,select框 的校验方法

(5)jquery.validate+jquery.mockjax+jquery.form提交

(6)自定义校验规则(自定义校验方法)

(7)Dynamic forms

(8)Forms styled with jQuery UI Themeroller

(9)TinyMCE Demo

(10)File inputs

(11)jQuery Mobile Form Validation

(12)Displaying Errors within Field Labels

(13)Loading via RequireJS

实例:

(14)Milk 注册表单

(15)Marketo 注册表单

(16)房屋买卖折叠面板表单

(17)远程 CAPTCHA(验证码)验证

 

二、其他的一些技巧性东西总结:

这里总结的是一些综合性比较强,并且在实战项目中会用到的一些代码。

(1)jquery.validate 不采用表单的submit方式进行数据验证

因为插件默认的方式是通过button,input的形式进行提交表单。但是有些企业需求改了,是通过a标签来制作按钮。那套校验过程就不能生效,但是改变为button形式又会影响样式布局等。那么怎么通过jquery.validate 不采用表单的submit方式进行数据验证呢?

 

 

 

 

如果需要一加载就进行校验。那么需要在文档加载的时候调用该方法。

 

注册框

 

 

(2)失去焦点的时候进行验证

关于 jquery.validate.js 表单验证插件如何在失去焦点时做验证。看手册后发现默认是在表单提交时执行验证代码。 手册中提到使用 onfocusout:false 来解决失去焦点时验证的参数功能,但是经测试无效果。 可以使用函数手工验证:

 

或是直接加入到校验方法中。注意需要加上逗号分隔。demo代码如下:

 

(3)在获取焦点的时候,清除错误信息

手册中提到使用 focusCleanup:false 来解决失去焦点时验证的参数功能,但是经测试无效果。可以使用函数手工验证:

 

focusCleanup:如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。

因为切换登录或是注册框的时候,校验信息还留在页面上,没有去除,体验不是很好,所以需要手动清除校验信息。

 

(4)拓展一些常用的方法

因为自带的一些校验方法不能满足企业中复杂的需求,所以需要我们进行拓展。插件留好了拓展的地方。引入 additional-methods.js 就可以进行拓展了。

addMethod 拓展一些企业中需要用到的方法:

 

还有很多,欢迎大家在评论中进行补充。

 

三、jQuery Validate 插件实现简单的登录和注册功能

提示:样式问题,没有贴出来。

(1)给html页面上的input框添加 id,name属性。

登录框示例:

 

注册框:

 

(2)引入js文件

 

(3)添加显示错误的样式

 

校验手机验证码

 

其他优化体验的选项:

 

登录框的校验:

 

注册表单的校验

 

本文作者:搜投网

本文出处:搜投网    ( http://www.souvc.com/?p=541 )

 


参考文章:

【1】JQuery validate 官网

【2】JQuery validate 官方demo

【3】JQuery validate 官方api解读

【4】jQuery Validate—runoob.com 文章解读

【5】Github上 jquery-validation源代码

【6】jquery.validate+jquery.form提交的三种方式

【7】 JQuery Validate一些用法总结

【8】jQuery validate之remote 

 






如果您认为本教程质量不错,读后觉得收获很大,预期工资能蹭蹭蹭的往上涨,那么不妨小额赞助我一下,让我有动力继续写出高质量的教程。

发布者

souvc

souvc

搜你所想,投你所好。

《jQuery插件–jQuery Validate 插件为表单提供了强大的验证功能》有19个想法

  1. Pingback: DMPK Studies
  2. Pingback: zd porn
  3. Pingback: orospu
  4. Pingback: www.office.com/setup
  5. Pingback: friv
  6. Pingback: right here
  7. Pingback: university of diyala
  8. Pingback: iq colarts
  9. Pingback: realtor leads

发表评论