表单校验插件（bootstrap-validator）

表单校验插件（bootstrap-validator）

参考文档

• http://blog.****.net/nazhidao/article/details/51542508
• http://blog.****.net/u013938465/article/details/53507109
• http://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd
• http://bootstrapvalidator.votintsev.ru/api/

步骤：

1. 引包

   1. 需要导入bootstrap.css和bootstrapValidator.css
   2. 需要导入js文件，bootstrapValidator.js

2. 初始化表单校验插件

   var $form = $('form');
   
   $form.bootstrapValidator({
   
   //初始化代码

   });

   demo：

   //使用表单校验插件
   $(formSelector).bootstrapValidator({
     //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
     // excluded: [':disabled', ':hidden', ':not(:visible)'],
   
     //2. 指定校验时的图标显示，默认是bootstrap风格
     feedbackIcons: {
       valid: 'glyphicon glyphicon-ok',
       invalid: 'glyphicon glyphicon-remove',
       validating: 'glyphicon glyphicon-refresh'
     },
   
     //3. 指定校验字段
     fields: {
       //校验用户名，对应name表单的name属性
       username: {
         validators: {
           //不能为空
           notEmpty: {
             message: '用户名不能为空'
           },
           //长度校验
           stringLength: {
             min: 6,
             max: 30,
             message: '用户名长度必须在6到30之间'
           },
           //正则校验
           regexp: {
             regexp: /^[a-zA-Z0-9_\.]+$/,
             message: '用户名由数字字母下划线和.组成'
           }
         }
       },
     }
   });
   

3. 当表单校验成功之后，注册事件

   当表单校验成功时，会触发success.form.bv事件，此时会提交表单，这时候，通常我们需要禁止表单的自动提交，使用ajax进行表单的提交。

   $("#form").on('success.form.bv', function (e) {
   
   e.preventDefault();
   
   //使用ajax提交逻辑
   
   });

4. 重置表单

   validator会提供一个实例对象
   
   获取实例对象
   
   $form.data("bootstrapValidator")

   validator.resetForm()//重置表单，会隐藏所有提示和图标

   $('[type="reset"]').on('click',function(){
   
   $form.data("bootstrapValidator").resetForm();
   
   })

5. 可以自定义表单的状态

   可以使用updateStatus(field, status, validatorName)方法更新字段的状态

   status的值有：

   • NOT_VALIDATED：未校验的
   • VALIDATING：校验中的
   • INVALID ：校验失败的
   • VALID：校验成功的。

   $from.data('bootstrapValidator').updateStatus('username','INVALID','callback');

   需要自己去初始化的时候加上callback

拓展

表单

jquery中获取表单的数据可以用$form.serialize()
js中可以用formData

注意：
	1.	一定要有name属性