 <script src="~/Scripts/jquery-1.10.2.js"></script>

 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
 <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

我們知道，既然是表單驗(yàn)證，那么我們?cè)赾shtml頁面就必須要有一個(gè)Form，并且我們知道Form里面取元素都是通過name屬性去取值的，所以，表單里面的元素都要有一個(gè)name的屬性值。

　<form>
  <div class="form-group">
  <label>Username</label>
  <input type="text" class="form-control" name="username" />
  </div>
  <div class="form-group">
  <label>Email address</label>
  <input type="text" class="form-control" name="email" />
  </div>
  <div class="form-group">
  <button type="submit" name="submit" class="btn btn-primary">Submit</button>
  </div>
 </form>

有了表單元素之后，就是我們的js初始化了。

 $(function () {
 $('form').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
  　feedbackIcons: {
  　　　　　　　　valid: 'glyphicon glyphicon-ok',
  　　　　　　　　invalid: 'glyphicon glyphicon-remove',
  　　　　　　　　validating: 'glyphicon glyphicon-refresh'
  　　　　　　　　 },
  fields: {
  username: {
   message: '用戶名驗(yàn)證失敗',
   validators: {
   notEmpty: {
    message: '用戶名不能為空'
   }
   }
  },
  email: {
   validators: {
   notEmpty: {
    message: '郵箱地址不能為空'
   }
   }
  }
  }
 });
 });

內(nèi)容應(yīng)該很容易看懂。來看效果：

驗(yàn)證通不過，提交按鈕灰掉不能點(diǎn)擊

驗(yàn)證通過，提交按鈕恢復(fù)

看看效果先感受下，最大優(yōu)點(diǎn)：使用簡(jiǎn)單，界面友好。下面我們來看看重疊驗(yàn)證。

2、中級(jí)用法
上面我們知道了非空驗(yàn)證的寫法，除此之外肯定還有其他驗(yàn)證方式啊。別急，我們慢慢來看。上面的代碼cshtml部分不動(dòng)，js部分我們稍作修改：

　$(function () {
 $('form').bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
  valid: 'glyphicon glyphicon-ok',
  invalid: 'glyphicon glyphicon-remove',
  validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
  username: {
   message: '用戶名驗(yàn)證失敗',
   validators: {
   notEmpty: {
    message: '用戶名不能為空'
   },
   stringLength: {
    min: 6,
    max: 18,
    message: '用戶名長(zhǎng)度必須在6到18位之間'
   },
   regexp: {
    regexp: /^[a-zA-Z0-9_]+$/,
    message: '用戶名只能包含大寫、小寫、數(shù)字和下劃線'
   }
   }
  },
  email: {
   validators: {
   notEmpty: {
    message: '郵箱不能為空'
   },
   emailAddress: {
    message: '郵箱地址格式有誤'
   }
   }
  }
  }
 });
 });

加上了重疊驗(yàn)證我們來看效果：

由上面的代碼可以看出在validators屬性對(duì)應(yīng)一個(gè)Json對(duì)象，里面可以包含多個(gè)驗(yàn)證的類型：

notEmpty：非空驗(yàn)證；
stringLength：字符串長(zhǎng)度驗(yàn)證；
regexp：正則表達(dá)式驗(yàn)證；
emailAddress：郵箱地址驗(yàn)證（都不用我們?nèi)戉]箱的正則了~~）

除此之外，在文檔里面我們看到它總共有46個(gè)驗(yàn)證類型，我們抽幾個(gè)常見的出來看看：

base64：64位編碼驗(yàn)證；
between：驗(yàn)證輸入值必須在某一個(gè)范圍值以內(nèi)，比如大于10小于100；
creditCard：身份證驗(yàn)證；
date：日期驗(yàn)證；
ip：IP地址驗(yàn)證；
numeric：數(shù)值驗(yàn)證；
phone：電話號(hào)碼驗(yàn)證；
uri：url驗(yàn)證；

還有一個(gè)比較常用的就是submitHandler屬性，它對(duì)應(yīng)著提交按鈕的事件方法。使用如下：

$(function () {
 $('form').bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
  valid: 'glyphicon glyphicon-ok',
  invalid: 'glyphicon glyphicon-remove',
  validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
  username: {
   message: '用戶名驗(yàn)證失敗',
   validators: {
   notEmpty: {
    message: '用戶名不能為空'
   },
   stringLength: {
    min: 6,
    max: 18,
    message: '用戶名長(zhǎng)度必須在6到18位之間'
   },
   regexp: {
    regexp: /^[a-zA-Z0-9_]+$/,
    message: '用戶名只能包含大寫、小寫、數(shù)字和下劃線'
   }
   }
  },
  email: {
   validators: {
   notEmpty: {
    message: '郵箱不能為空'
   },
   emailAddress: {
    message: '郵箱地址格式有誤'
   }
   }
  }
  },
  submitHandler: function (validator, form, submitButton) {
  alert("submit");
  }
 });
 });

在它的Demo里面介紹了很多驗(yàn)證的實(shí)例。我們簡(jiǎn)單看看它的效果，至于實(shí)現(xiàn)代碼，其實(shí)很簡(jiǎn)單，有興趣的可以直接看api。

顏色驗(yàn)證