bootstrap-validator使用筆記

基於bootstrap的前端校驗插件

參考文檔

• 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

引包

引入bootstrap-validator的css文件注意bootstrap-validator是bootstrap插件，因此依賴與bootstrap。

  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="lib/bootstrap-validator/css/bootstrapValidator.css">

引入js文件

<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap-validator/js/bootstrapValidator.js"></script>

初始化表單校驗插件

bootstrap-validator插件會在表單提交的時候進行校驗，如果校驗成功了，表單會繼續提交，但是如果校驗失敗了，就會阻止表單的提交。

//使用表單校驗插件
$(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: '用戶名由數字字母下划線和.組成'
        }
      }
    },
  }

});

注冊表單驗證成功事件

當表單校驗成功時，會觸發success.form.bv事件，此時會提交表單，這時候，通常我們需要禁止表單的自動提交，使用ajax進行表單的提交。

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

常用方法

獲取validator實例(對象)

當我們初始化好表單校驗插件時，我們可以通過以下方法來獲取表單校驗的validator實例，通過validator實例調用一些方法來完成某些功能。

var validator = $("#form").data('bootstrapValidator');  //獲取表單校驗實例

//使用表單校驗實例可以調用一些常用的方法。
validator.methodName(params);

重置表單

重置表單中設置過校驗的內容，將隱藏所有錯誤提示和圖標。

validator.resetForm();//重置表單，並且會隱藏所有的錯誤提示和圖標

更新字段的狀態

BootstrapValidator在用戶輸入內容的時候，會做校驗，當調用bootstrap的插件的方法可以手動會改變字段值的狀態。可以使用updateStatus(field, status, validatorName)方法更新字段的狀態

status的值有：

• NOT_VALIDATED：未校驗的
• VALIDATING：校驗中的
• INVALID ：校驗失敗的
• VALID：校驗成功的。