BootstrapValidator多个属性校验问题解决

Bertha 。 2022-10-23 11:13 346阅读 0赞

首先bootstrap4不支持BootstrapValidator，如果实在需要，下面链接是别人修改了bootstrapValidator.js，对bootstrap4做了兼容，替换一下就行了  
[https://gitee.com/youngboyvip/bootstrapvalidator][https_gitee.com_youngboyvip_bootstrapvalidator]

## BootstrapValidator使用时当form-control中包含多个输入框时校验问题解决 ##

如图表单校验是否为空时，地址和用户名不为空但是校验仍然为失败，删除重写后才能成功  
![在这里插入图片描述][20210305094937389.png]  
解决：

注意 input多了一个checkGroup类

$(document).ready(function () { 
              $("form").bootstrapValidator({ 
                  group: '.checkGroup',
                  feedbackIcons: { 
                      valid: 'glyphicon glyphicon-ok',
                      invalid: 'glyphicon glyphicon-remove',
                      validating: 'glyphicon glyphicon-refresh'
                  },
                  fields: { 
                      droneId: { 
                          validators: { 
                              notEmpty: { 
                                  message: '无人机ID不能为空'
                              }
                          }
                      },
                      mqttUrl: { 
                          validators: { 
                              notEmpty: { 
                                  message: '地址不能为空'
                              }
                          }
                      },
                      mqttUsername: { 
                          validators: { 
                              notEmpty: { 
                                  message: '用户名不能为空'
                              }
                          }
                      },
                      mqttPasswd: { 
                          validators: { 
                              notEmpty: { 
                                  message: '密码不能为空'
                              }
                          }
                      },
                  }
              });
          });

group属性默认为“.form-group”，这里进行了修改，完美解决

参考： [https://blog.csdn.net/jingtianyiyi/article/details/77841365][https_blog.csdn.net_jingtianyiyi_article_details_77841365]

[https_gitee.com_youngboyvip_bootstrapvalidator]: https://gitee.com/youngboyvip/bootstrapvalidator
[20210305094937389.png]: /images/20221023/f1915c63be484cad943bf8aa10c25da4.png
[https_blog.csdn.net_jingtianyiyi_article_details_77841365]: https://blog.csdn.net/jingtianyiyi/article/details/77841365