表单校验插件（bootstrap-validator）

表单校验插件（bootstrap-validator）

参考文档

• http://blog.csdn.net/nazhidao/article/details/51542508
• http://blog.csdn.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属性