12 月随笔之 bootstrapValidator 验证框架与 layui 时间插件兼容

此文章的目的是针对特定字段(需要时间插件的字段)，进行特定的验证。

问题：当我加上 layui 的 laydate 时候，验证不会通过。

解决办法：经过网上的资料，并进行数次测试，laydate 加载时间时候，虽然你点击日期了，但是 bootstrapValidator 验证却是红叉叉，原因是 laydate 加载日期赋值给 input 在 bootstrapValidator 验证之后，所以在点击时间插件之后进行二次特定字段验证即可。

下面贴一下我的代码

1、CSS

Bootstrap v3.1.1 (http://getbootstrap.com)

BootstrapValidator (http://bootstrapvalidator.com)

2、JS (基于 Bootstrap v3.1.1 (http://getbootstrap.com))

3、bootstrapValidator 验证必须加 'group' 组

4、添加验证器。这里多说一句 bootstrapValidator 的验证器指向的是 name 属性，并且支持 bean.属性名。

(我的这个字段是 String，数据库对应的也是 VARCHAR，方便做 Webservice 传输数据，这里面仅仅只是需要添加一个时间控件)

5、进行二次指定验证

(这张图片的意思是：

根据 ID 找到那个特定的 input，

当失去焦点时进行验证。

设置延时发生 js function(){ 根据 ID 找到你要验证的 form 表单.数据验证.二次验证.验证器名字 }

延时时间为 200 ms

 

 

原理：当 layui 的时间插件点击时，它实际上会发生在 bootstrapValidator 验证器之后，所以它第一遍验证会通不过。所以加个延时，1000 为 1S，可根据具体需要进行更改。并且我的这个 input 给的是 readonly 属性，只可以进行点击时间插件，不可以手写