bootStrap表單驗證插件的使用

bootStrapValidator插件的使用

1.插件的下載和引用

首先要引入bootstrapValidator插件。鏈接的地址：https://www.bootcdn.cn/jquery.bootstrapvalidator/
可以使用網頁中的插件連接，也可以將源碼下載到本地使用。
要使用bootstrapValidator插件，代碼中還要除了引入bootstrapValidator插件的js和css外，還要引入jQuery.js和bootStrap的js和css。

<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

注意：所有的表單控件一定要放到類名為from-group的div內部，驗證才會生效。html代碼如下:

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班級名稱</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="class_name" id="inputName"
                            placeholder="請輸入班級名稱">
                 </div>
             </div>
         </div>
     </form>
 </div>

2.bootStrapValidator的常用驗證

2.1 非空驗證 notEmpty

html代碼

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班級名稱</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="class_name" id="inputName"
                            placeholder="請輸入班級名稱">
                 </div>
             </div>
         </div>
     </form>
 </div>

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班級名稱</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="class_name" id="inputName"
                            placeholder="請輸入班級名稱">
                 </div>
             </div>
         </div>
     </form>
 </div>

接着加入驗證js代碼

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'submitted', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                  valid: 'glyphicon glyphicon-ok',
                  invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 class_name: {
                     validators: {
                         notEmpty: {
                             message: '班級名稱不能為空'
                         }
                     }
                 }
             }
         })
     })
 </script>

 

2.2 數值驗證 numeric

 html代碼

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">商品價格</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="price" id="inputName"
                             placeholder="請輸入商品價格">
                 </div>
             </div>
         </div>
     </form>
 </div>

js驗證代碼

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 price: {
                     validators: {
                         numeric: {
                            message: '價格必須為數值'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.3 整數驗證 digits

html代碼

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班級人數</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="std_num" id="inputName"
                            placeholder="請輸入班級人數">
                 </div>
             </div>
         </div>
     </form>
 </div>

js驗證代碼

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 std_num: {
                     validators: {
                         digits: {
                             message: '價格必須為數值'
                         }
                     }
                 }
             }
         })
     })
 </script>

 

2.4 最大值和最小值驗證 lessThan和greaterThan

html代碼

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="max_num" id="inputName"
                            placeholder="請輸入10-100之間的值">
                 </div>
             </div>
         </div>
     </form>
 </div>

js驗證代碼

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                  valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 max_num: {
                     validators: {
                         lessThan: { //最大值驗證
                             value: 100,
                             inclusive:false, //是否包含當前值，false不包含，true包含。默認為true
                             message: '值不能大於或等於100'
                         },
                         greaterThan: {  //最小值驗證
                             value:10,
                             inclusive:true,
                             message: '值不能小於10'
                         }
                     }
                 }
             }
         })
     })
 </script>

 

2.5 數值范圍驗證 between

html代碼

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">年齡</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="age" id="inputName"
                            placeholder="請輸入年齡">
                 </div>
             </div>
         </div>
     </form>
 </div>

js驗證代碼

<script>
     $(function () {
         $('#classes-form').bootstrapValidator({
            live : 'enabled', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 age: {
                     validators: {
                         between:{
                             max:60,
                             min:18,
                             message: '年齡必須在18~60之間'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.6 字符串長度驗證 stringLength

html代碼

<div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">用戶名</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="age" id="inputName"
                            placeholder="請輸入用戶名">
                 </div>
             </div>
         </div>
     </form>
 </div>

js驗證代碼

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 age: {
                    validators: {
                         stringLength:{
                             min:8,
                             max:15,
                             message: '用戶名長度必須在8~15之間'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.7 郵箱地址驗證 emailAddress

html代碼

<div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
        <div class="box-body">
             <div class="form-group">
                <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">郵箱</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="email" id="inputName"
                            placeholder="請輸入郵箱地址">
                 </div>
             </div>
         </div>
     </form>
 </div>

js驗證代碼

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 email: {
                     validators: {
                         emailAddress:{
                             message: '請輸入正確的郵箱地址'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.8 IP地址驗證 ip

html代碼

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">IP</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="ip" id="inputName"
                            placeholder="請輸入IP地址">
                 </div>
             </div>
         </div>
     </form>
 </div>

js驗證代碼

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 ip: {
                     validators: {
                         ip:{
                             message: '請輸入正確的ip地址'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.9 日期格式驗證 date

html代碼

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">出生日期</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="birthday" id="inputName"
                            placeholder="請輸入出生日期">
                 </div>
             </div>
         </div>
     </form>
 </div>

js驗證代碼

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
             },
             fields: {
                 birthday: {
                     validators: {
                         date:{
                             format: 'YYYY-MM-DD',
                             message: '請輸入正確的出生日期'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.10 正則驗證 regexp

通過正則驗證，我們可以定制自己所需要的格式的輸入驗證。如上面的郵箱地址，或者身份證號或手機號等，我們都可以通過正則表達式來進行驗證。

下面為手機號驗證代碼：

html代碼

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">手機號</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="phone_num" id="inputName"
                            placeholder="請輸入手機號">
                 </div>
             </div>
         </div>
     </form>
 </div>

js驗證代碼

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表當表單控件內容發生變化時就觸發驗證，默認提交時驗證，
             // disabled和submitted代表當點擊提交按鈕時觸發驗證
 
             feedbackIcons: {  //顯示表單驗證結果的圖標
                 valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 phone_num: {
                     validators: {
                         regexp:{
                             regexp: /^1[3-9][\d]{9}$/,  //正則規則用兩個/包裹起來
                             message: '請輸入正確的手機號'
                         }
                     }
                 }
             }
         })
     })
 </script>

3.總結

以上為經常會用到的一些表單驗證，若有不正確或需要補充的，歡迎指出。

想了解更多bootStrapValidator的更多驗證，也可以進入 https://github.com/nghuuphuoc/bootstrapvalidator 下載源碼學習研究。