前期準(zhǔn)備

因?yàn)閎ootstrapValidator插件是基于jquery和bootstrap的，所以需要引入jquery和bootstrap對(duì)應(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這兩個(gè)插件的關(guān)系還搞清楚，bootstrapValidator插件中的方法是$('#tmplForm').bootstrapValidator({})lai初始化校驗(yàn)，而bootstrap-validator中是另一個(gè)方法。

插件使用

對(duì)應(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)時(shí)表單顯示對(duì)勾或叉
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
     },
     //添加驗(yàn)證
     fields: {
         //可以通過(guò)input的name屬性，為其添加校驗(yàn)(name='username')
         username: {
             \\驗(yàn)證規(guī)則
             validators: {
                 //非空驗(yàn)證
                 notEmpty: {
                     message: '用戶名不能為空'
                 }，
                 stringLength: {
                     min: 6,
                     max: 30,
                     message: '用戶名長(zhǎng)度必須在6到30之間'
                 },
             }
         },
         //可以通過(guò)input的name屬性，為其添加校驗(yàn)(name='admin.username')
         'admin.username': {//如果name中包含"."，則需要打上引號(hào)
             \\驗(yàn)證規(guī)則
             validators: {
                 //非空驗(yàn)證
                 notEmpty: {
                     message: '用戶名不能為空'
                 }
             }
         },
         //可以通過(guò)input的id，為其添加校驗(yàn)(id='password')
         password: {//這個(gè)地方的名字似乎可以自定義
             selector: '#password',
             validators: {
                 notEmpty: {
                     message: '密碼不能為空'
                 }
             }
         }
     }
 })

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

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

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

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

校驗(yàn)類型

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

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

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

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

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

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

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

總結(jié)

fields:{
}
里面是需要進(jìn)行校驗(yàn)的節(jié)點(diǎn)，多個(gè)通過(guò)","號(hào)隔開(kāi)

validators: {
}
里面是某個(gè)節(jié)點(diǎn)校驗(yàn)的類型加參數(shù)，多個(gè)通過(guò)","號(hào)隔開(kāi)