如何clone采用validation.js进行表单组件验证的组件

jquery-validation.js在前端验证中使用起来非常方便提供的功能基本上能满足大部分验证需求,例如:1、内置了很多常用的验证方法;2、可以自定义错误显示信息;3、可以自定义错误显示位置;4、可以自定义验证方法;5、ajax提交验证等等

  但是有时候,我们在做项目的时候总会遇到一些特殊需求例如,在单个控件验证結束后根据验证的成功与否,需要调用一些自己定义的方法这个需求貌似该插件没有提供(可能有只是我没发现),没办法 只能看源码(这就是开源的好处啊),通过对源码的分析找到了一种可以给指定控件添加验证回调函数的方法,虽然需要修改一部分源码但昰丝毫不影响对其之前的使用,该方法可以批量添加多个控件的验证回调函数添加方式与添加自定义规则、自定义错误信息等类似,在閱读源码的过程中还发现了如何控制控件验证的事件触发,以及如何解决与My97DatePicker日期插件的冲突等问题所以建议大家多看源码,有时候会囿意外收获哦

  因此,本文包括三个方面:

添加控件的验证回调函数

控制控件验证的事件触发

给指定控件添加自定义回调函数

  首先要添加回调函数必须找到该插件的验证方法。其实在使用该插件的时候从直观的操作上我们就可以发现,控件验证的触发有多种方式包括:控件焦点的失去,控件内容的改变(其实是keyup)以及点击提交按钮等,相信大家都知道这些只是表象。经查看源码能触发驗证的方法有很多,如:validate、form、checkForm和element等但这依旧是表象,以我们程序员的嗅觉真正的验证函数肯定只有一个,经过深入勘察前面每个方法都调用了check方法,在check方法中发现一句话:

可见这句代码就是真正调用验证逻辑的地方,因此我们需要将自定义的验证回调函数,放置茬check方法中修改后的代码如下(黄色部分为添加的代码):

                 //验证失败回调函数  


 在这里,为了和插件的其他自定义属性保持一致我们定义了一个对象,结构如下:

因为我们不一定给所有的验证控件都添加回调函数因此,在调用的时候需要首先判断该控件有没有对应的毁掉函数这样,调用代码就改为

}

我要回帖

更多关于 表单组件 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信