BootstrapValidator工具的简单使用

 工具的下载、导入这里不细说了，百度全是。主要记录下今天做项目时使用的一些东西。

1今天做功能的时候页面要做校验

放在以前就直接拼写正则表达式或者利用一些元素拥有的属性进行控制。但是当我发现项目原来是使用BootstrapValidator进行校验的为了保持代码的一致性我也决定使用该工具实现校验功能。

决定了就想学习吧，首先是初始化

 $('#addForm').bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {/*输入框不同状态，显示图片的样式*/
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields:{
                        Recipient:{
                            message: 'The Recipient is not valid',
                            validators:{
                                notEmpty:{
                                    message:'收件人姓名不能为空'
                                },
                                stringLength: {
                                    min: 2,
                                    max: 4,
                                    message: '收件人姓名长度必须在2到4之间'
                                }
                            }
                        }
              });

1. message：顾名思义是提示的信息。
2. feedbackIcons：应该是校验之后的样式（我也不敢确定） (#^.^#)
3. fields：网上有人管这个叫表单域配置，在这里配置表单中需要校验的属性以及交验条件

再说一下validators 里的校验

1. notEmpty：非空校验
2. stringLength：长度校验
3. regexp：正则校验（使用这则表达式校验）
4. data：日期校验
5. callback：可以用它自定义

以上是一些简单常用的校验

2提交的防呆判断

为了不让一些奇怪的null进入我们的数据库，可以在前端加上一些判断（当然后台最好也判断下）。具体如下：

$('#addForm').data('bootstrapValidator').validate();
if(!$('#addForm').data('bootstrapValidator').isValid()){
       return ;
}

 很简单的两行代码就实现了防呆的功能。

3bootstrapValidator重置校验

惊天使用bootstrapValidator遇到了这样一个问题。弹出的窗口上进行校验，当关闭窗口后我们期望的是样式回滚到最开始的状态，无论你的数据符不符合要求。但是实际情况是当数据不符合要求时，插件会改变文本框的样式并且插入一些<small>标签。这时我们可以用这种方式解决这个问题。如下：

1.首先我们初始化在一个方法内这样我们之后就可以调用这个方法进行初始化了

function resetCheck(){
    $('#addForm').bootstrapValidator({
         message: 'This value is not valid',
         feedbackIcons: {/*输入框不同状态，显示图片的样式*/
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
         },
         fields:{
            Recipient:{
                message: 'The Recipient is not valid',
                validators:{
                    notEmpty:{
                          message:'收件人姓名不能为空'
                    },
                    stringLength: {
                          min: 2,
                          max: 4,
                          message: '收件人姓名长度必须在2到4之间'
                   }
            }
         }
    });
} 

2.使用以下语句重新初始化

$("#addForm").data('bootstrapValidator').destroy();
$('#addForm').data('bootstrapValidator', null);
resetCheck();

以上就是个人关于bootstrapValidator的一些使用，小白勿喷

-------------------------------------------------------------------------------------分割线-------------------------------------------------------------------

2018-09-29

bootstrapValidator 不能对 禁用的文本框进行校验