Form表單驗證神器： BootstrapValidator

前言：作Web開發的咱們，表單驗證是再常見不過的需求了。友好的錯誤提示能增長用戶體驗。博主搜索bootstrap表單驗證，搜到的結果大部分都是文中的主題：bootstrapvalidator。今天就來看看它如何使用吧。

1、源碼及API地址

介紹它以前，仍是給出它的源碼以及API的地址吧。

bootstrapvalidator源碼： https://github.com/nghuuphuoc/bootstrapvalidator

boostrapvalidator api： http://bv.doc.javake.cn/api/

2、代碼以及效果展現

一、初級用法

來看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。從描述中咱們就能夠知道它至少須要jQuery、bootstrap的支持。咱們首先引入須要的js組件

　　 <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" /> 

咱們知道，既然是表單驗證，那麼咱們在cshtml頁面就必需要有一個Form，而且咱們知道Form裏面取元素都是經過name屬性去取值的，因此，表單裏面的元素都要有一個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: '用戶名驗證失敗', validators: { notEmpty: { message: '用戶名不能爲空' } } }, email: { validators: { notEmpty: { message: '郵箱地址不能爲空' } } } } }); }); 

內容應該很容易看懂。來看效果：

驗證通不過，提交按鈕灰掉不能點擊

驗證經過，提交按鈕恢復

看看效果先感覺下，最大優勢：使用簡單，界面友好。下面咱們來看看重疊驗證。

二、中級用法

上面咱們知道了非空驗證的寫法，除此以外確定還有其餘驗證方式啊。別急，咱們慢慢來看。上面的代碼cshtml部分不動，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: '用戶名驗證失敗', validators: { notEmpty: { message: '用戶名不能爲空' }, stringLength: { min: 6, max: 18, message: '用戶名長度必須在6到18位之間' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '用戶名只能包含大寫、小寫、數字和下劃線' } } }, email: { validators: { notEmpty: { message: '郵箱不能爲空' }, emailAddress: { message: '郵箱地址格式有誤' } } } } }); }); 

加上了重疊驗證咱們來看效果：

由上面的代碼能夠看出在validators屬性對應一個Json對象，裏面能夠包含多個驗證的類型：

notEmpty：非空驗證；

stringLength：字符串長度驗證；

regexp：正則表達式驗證；

emailAddress：郵箱地址驗證（都不用咱們去寫郵箱的正則了~~）

除此以外，在文檔裏面咱們看到它總共有46個驗證類型，咱們抽幾個常見的出來看看：

base64 ：64位編碼驗證；

between ：驗證輸入值必須在某一個範圍值之內，好比大於10小於100；

creditCard ：身份證驗證；

date ：日期驗證；

ip ：IP地址驗證；

numeric ：數值驗證；

phone ：電話號碼驗證；

uri ：url驗證；

更多驗證類型詳見： http://bv.doc.javake.cn/validators/ 。固然涉及中文的驗證可能會有些小問題，園友們若是有須要能夠自行下去用代碼測試下。

還有一個比較經常使用的就是submitHandler屬性，它對應着提交按鈕的事件方法。使用以下：

$(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: '用戶名驗證失敗', validators: { notEmpty: { message: '用戶名不能爲空' }, stringLength: { min: 6, max: 18, message: '用戶名長度必須在6到18位之間' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '用戶名只能包含大寫、小寫、數字和下劃線' } } }, email: { validators: { notEmpty: { message: '郵箱不能爲空' }, emailAddress: { message: '郵箱地址格式有誤' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); }); 

在它的Demo裏面介紹了不少驗證的實例。咱們簡單看看它的效果，至於實現代碼，其實很簡單，有興趣的能夠直接看api。

顏色驗證

Tab頁表單驗證

按鈕驗證

 

 轉自https://blog.csdn.net/freedom_wbs/article/details/54617741