表單校驗插件（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屬性