前期準(zhǔn)備

因?yàn)閎ootstrapValidator插件是基于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初始化校驗(yàn)，而bootstrap-validator中是另一個方法哈垢。

插件使用

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

添加檢驗(yàn)

1.普通節(jié)點(diǎn)添加校驗(yàn)

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

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

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

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

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

校驗(yàn)類型

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

1.不為空校驗(yàn)

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

2.字符串長度校驗(yàn)

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

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

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

總結(jié)

fields:{
}
里面是需要進(jìn)行校驗(yàn)的節(jié)點(diǎn)惹悄，多個通過","號隔開

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