关于bootstrap的验证插件bootstrapValidator使用时遇到的坑

最近手里的项目由于项目性质的原因表单众多，每个表单的字段也是非常多，由于初期的时候考虑进度没有使用验证，后期项目优化的时候上边要求加上几个字段的验证，由于前端框架用的是bootstrap,考略到协调性和体验感问题，遂决定使用bootstrap的验证框架boostrapCalidator，在使用的时候遇到了几个问题，整理一下已做备忘，顺便希望能帮助需要的伙伴们。

前言：bootstrap使用的通用验证配置是：

           $("form").bootstrapValidator({
                message: '通用提示内容!',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',//验证成功图标
                    invalid: 'glyphicon glyphicon-remove',//验证失败图标
                    validating: 'glyphicon glyphicon-refresh'//验证中图标
                },
                fields:[
                    <fieldName>: {//针对字段（表单内input对应的name）
                        enabled: true,//开启验证
                        message: 'This value is not valid',//特殊提示内容只针对这个字段
                        validators:{
                            //<validatorName>: <validatorOptions>//多个验证的验证名称和验证配置
                            //如：非空
                            notEmpty: {//非空验证：提示消息
                                message: '账号/用户名不能为空'
                            }
                        }
                    }
                ]
            })

常用的通用验证有很多，如notEmpty(非空),stringLength(字符串长度),regexp(正则),identical(相同),different(不同)等等，需要的小伙伴可以自行百度。

也可以参考这篇文章：传送门

-------------------------------------华丽丽的分割线--------------------------------------------

下边说我遇到的几个比较特殊的用法

1.前端使用函数进行自定义验证(callback)：

        这个功能用于需要实现的验证规则不在那些已经声明通用验证中，需要自己声明验证规则的时候，具体用法：

validators: {
	callback: {
		message: 'Wrong answer',
		callback: function(value, validator) {//value为当前input的值
			//你的自定义验证规则
			return result;//返回一个布尔值
		}
	}
}

 

2.前段调用接口向后端请求，由后端计算验证结果(remote):

        这个功能用于需要去后端验证的时候（如做数据库唯一验证时），具体的用法（注意代码片段中最后两句话）：

remote: {
     url: 'validatUrl',//验证接口地址
     message: '验证不通过！',//提示消息
     delay :  1000,//默认每输入一个字符，就发ajax请求，服务器压力还是太大，设置1秒发送一次ajax
     type: 'POST',//请求方式
     data:'',//为空时会默认将当前字段的值传到后台
     data:function(){
         //可以做一些验证后的关联操作，比如验证失败时置空当前input
     }
 }
 
//注意：这个地方的后台接口必须返回结果的json格式为{"valid",true or false} 
//如表示验证成功：{"valid",true}

3.这里说的是一个我遇到的坑：

        事故背景：项目表单中存在很多type=number的数字输入框

        事故原因：boostrapValidate不知出于什么样的考虑，将所有的type=number的输入框全部默认加上了验证

        事故现场：项目很多表单中存在大量的type=number的input,但是我需要验证的input中type=number的只有name=reportYear的输入框，使用验证框架验证之后，所有的type=number的输入框全部出现验证结果

        解决方案：在boostrapValidate配置项中加上一句话：

                          

excluded: [':disabled', ':hidden', ':not(:visible)','[type=number]:not[name=reportYear]']

//和fields同级

以上是最近遇到的问题，希望可以帮到需要的伙伴们。