bootstrap validator填坑（刷新验证，后台验证传多个数据，自定义验证规则）

之前做的页面，用的是bootstrap前端框架，里面的表单验证自然也就选择了bootstrap validator，现在有了一些新的验证规则，下面是最近新学到的，一是分享，二是方便以后自己查看

有用过bootstrap validator的都知道，这个表单验证可以实现前端验证（长度，正则）和后端验证

我看过大部分bootstrap validator关于密码与确认密码的验证示例，基本上都是如下实现（我只贴出js，对应html没必要贴出）

验证了密码与确认密码不能为空，互相判断是否一致，都判断了是否和别的input的值相同，还对密码的内容进行了规范（至少包含一个字母）；网上我目前查到的关于密码与确认密码是否相同的bootstrap validator验证都是这样写的，这样写的好处是，当密码与确认密码任何一方修改时，都会触发对方的identical验证，这一点很重要，如果你真的做过密码与确认密码的相同验证你就会明白为什么，但是这样会有一个问题：用户注册开始，输入密码还没输入确认密码呢，咔，提示个两次密码不一致，用户可能会心想：mdzz，我后面还没输入呢，能一样吗；而且当用户再输入完确认密码之后，虽然两个的idntical验证都刷新了，都通过了，样式也都是原来绿色，但是前面input的后面还是叉号，如图

如果你先修改后面，再修改前面和他保持一直，后面的框也就会是叉号，虽然不影响功能，但是对于“观察仔细”的客户，这点是没法通过的，下面开始爬坑

首先我想到的是验证时调用后台验证，把他们俩一起传到后台，然后通过多方查询，我找到了同时往后台传多个数据的方法

这个方法确实把两个数据都传过去了，在后台可以进行判断确认密码是否为空，然后决定返回true或者false，但是无法实现两个输入框互动（举个例子，前面输入ABC123，后面输入ABC1231，这时候后面的验证结果是不通过，然后你在前面添加个1，前面的改为通过了，但是后面的不通过状态并不跟着改变）

然后我找到了一个callback，自定义验证，就是自己定义验证规则

相当于一小块天堂，这里满el表达式也能用，判断也能用，return返回的通过了就是true，没通过就是提示你设置的message内容，但是就算两个框都加上这种验证，依然无法实现联动，这里我又想到了刷新单个属性的表单验证

这样可以实现基本需求。

 

转载于:https://www.cnblogs.com/hardwork1/p/8559151.html