前期準備

因為bootstrapValidator插件是基于jquery和bootstrap的，所以需要引入jquery和bootstrap對應(yīng)的js和css文件。

文件引入

1.Jquery

Jquery.js
Jquery.css

2.Bootstrap

Bootstrap.js
Bootstrap.css

3.bootstrapValidator

bootstrapValidator.js
bootstrapValidator.css

注意本次插件引入的是bootstrapValidator插件，而不是bootstrap-validator這兩個插件的關(guān)系還搞清楚，bootstrapValidator插件中的方法是$('#tmplForm').bootstrapValidator({})lai初始化校驗，而bootstrap-validator中是另一個方法。

插件使用

對應(yīng)的文件引入之后，就可以使用插件了，這是官方API網(wǎng)址：http://bootstrapvalidator.votintsev.ru/api/

添加檢驗

1.普通節(jié)點添加校驗

$(function(){/* 初始化*/
 $('#formId').bootstrapValidator({
     excluded: [":hidden", ":disabled"], //[':disabled', ':hidden', ':not(:visible)'] //設(shè)置隱藏組件可驗證
     feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',//檢驗時表單顯示對勾或叉
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
     },
     //添加驗證
     fields: {
         //可以通過input的name屬性，為其添加校驗(name='username')
         username: {
             \\驗證規(guī)則
             validators: {
                 //非空驗證
                 notEmpty: {
                     message: '用戶名不能為空'
                 }，
                 stringLength: {
                     min: 6,
                     max: 30,
                     message: '用戶名長度必須在6到30之間'
                 },
             }
         },
         //可以通過input的name屬性，為其添加校驗(name='admin.username')
         'admin.username': {//如果name中包含"."，則需要打上引號
             \\驗證規(guī)則
             validators: {
                 //非空驗證
                 notEmpty: {
                     message: '用戶名不能為空'
                 }
             }
         },
         //可以通過input的id，為其添加校驗(id='password')
         password: {//這個地方的名字似乎可以自定義
             selector: '#password',
             validators: {
                 notEmpty: {
                     message: '密碼不能為空'
                 }
             }
         }
     }
 })

其他節(jié)點都可以通過name或者id添加校驗。

2.動態(tài)節(jié)點添加校驗

 $('#formId').bootstrapValidator('addField', 'admin.username', {
        validators: {
            notEmpty: {
                message: '管理員名稱不能為空'
            }
        }
}); //給動態(tài)生成的元素增加校驗（開啟校驗）

'addField'是bootstrapValidator的一個function，固定不能修改，'admin.username'是該動態(tài)節(jié)點的name屬性值（name='admin.username'），能否通過id屬性為節(jié)點添加屬性暫時未測試。（應(yīng)該是可以的吧....）

校驗類型

bootstrapValidator已經(jīng)提供了很多校驗的類型，下面來一一介紹一下：

1.不為空校驗

   notEmpty: {
          message: '用戶名不能為空'
   }

2.字符串長度校驗

  stringLength: {
        min: 6,
        max: 30,
        message: '用戶名長度必須在6到30之間'
}

3.遠程數(shù)據(jù)校驗（與后臺Servlet交互）

   //有6字符以上才發(fā)送ajax請求，（input中輸入一個字符，插件會向服務(wù)器發(fā)送一次，設(shè)置限制，6字符以上才開始）
  threshold :  6 , 
  //遠程數(shù)據(jù)校驗
  remote: {
    type: "post",//請求類型
    url: '后臺地址',//后臺地址
    message: "標識不能重復(fù)",
    dataType: 'json',
    data: {
                    //傳入后臺的值
            username: function() {
                 return $('#username').val();
        }
  },
  //500毫秒請求一次后臺
  delay: 500

總結(jié)

fields:{
}
里面是需要進行校驗的節(jié)點，多個通過","號隔開

validators: {
}
里面是某個節(jié)點校驗的類型加參數(shù)，多個通過","號隔開