bootstrapValidator 使用（包含入門demo，常用方法，以及常用的規則）

本文轉載自查看原文 2017-03-11 21:38 3271 bootstrapValidator

一什么是bootstrapValidator？

-- 一個基於 jquery，boostrap 的表單驗證框架....簡單實用上手快，頁面美觀還過得去，不廢話了，直接擼。

二 bootstrapValidator demo

　　1.下載相應的 js 和 css 文件 : http://pan.baidu.com/s/1nuLAhLJ

2.在對應需要表單驗證的頁面導入 js 和 css 文件 , 由於bootstrapValidator是基於 jquey 和 bootstrap 的，所以需要導入 jquery 和 bootstrap .　　如下:

　　　　css: <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>

　　　　 JS: <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

　　3.編寫自己需要驗證的html　

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 
  3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4 <html>
  5   <head>
  6     <title>測試例子</title>
  7     
  8     <!-- 使用bootstrapValidator必須引入的js和css文件 -->
  9     <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
 10     <link rel="stylesheet" href="bootstrapValidator/css/bootstrapValidator.css"/>
 11     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
 12     <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
 13     <script type="text/javascript" src="bootstrapValidator/js/bootstrapValidator.js"></script>
 14     
 15     <!-- 一個提示控件 -->
 16     <link rel="stylesheet" href="css/toastr.min.css">
 17     <script type="text/javascript" src="js/toastr.min.js"></script>
 18     <script type="text/javascript" src="js/toastrinit.js"></script>
 19     
 20     <script type="text/javascript">
 21         $(function(){
 22         
 23             /**
 24              *下面就是bootstrapValidator的初始化
 25              *定義你需要的哪些表單需要驗證，驗證什么內容
 26              **/
 27             $("#defaultForm").bootstrapValidator({
 28                 feedbackIcons: {//這里是用來對應三種不同狀態時，在輸入框后面添加的圖標
 29                     valid: 'glyphicon glyphicon-ok',
 30                     invalid: 'glyphicon glyphicon-remove',
 31                     validating: 'glyphicon glyphicon-refresh'
 32                 },
 33                 fields:{//哪些字段需要驗證，和html中的輸入框，下拉框等等表單name屬性所對應。
 34                     username:{
 35                         validators:{//從這里也可以容易的看出可以有多個驗證信息
 36                             notEmpty:{//非空驗證
 37                                 message:"請輸入用戶名！！！" //提示信息，當你不寫這里時它會自動的調用自帶的提示信息，默認是英文，可導入language下的中文JS文件
 38                             },
 39                             stringLength: {//長度限制（中文字符也算一個）
 40                                 min: 4,
 41                                 max: 16,
 42                                 message: "用戶名長度只能在4到16位之間！！！"
 43                             }
 44                         }
 45                     },
 46                     password:{
 47                         validators:{
 48                             notEmpty:{
 49                                 message:"請輸入密碼！！！"  
 50                             }
 51                         }
 52                     },
 53                     confirmPassword:{
 54                         validators:{
 55                             notEmpty:{
 56                                 message:"請輸入確認密碼！！！"
 57                             },
 58                             identical: {//用來判斷制定的字段和當前字段一致與否
 59                                 field: 'password',
 60                                     message: "兩次輸入的密碼不一致！！！"
 61                             }
 62                         }
 63                     }
 64                 }
 65             });
 66             
 67             //點擊提交按鈕時
 68             $("#btn_submit").click(function(){
 69                 $("#defaultForm").data('bootstrapValidator').validate();//相當於觸發一次所有的驗證
 70                 if($("#defaultForm").data('bootstrapValidator').isValid()){//判斷驗證是否已經通過
 71                     toastr.success("驗證通過！！！");//提示成功信息
 72                     return false;
 73                 }else{
 74                     toastr.error("驗證失敗！！！");
 75                 }
 76                 
 77             });
 78         });
 79     </script>
 80   </head>
 81   
 82   <body>
 83   <div class="container">
 84       <form id="defaultForm" class="form-horizontal">
 85           <div class="col-sm-offset-2" style="margin-top: 200px;">
 86             <div class="form-group">
 87                 <label class="col-sm-3 control-label">用戶名:</label>
 88                 <div class="col-sm-3">
 89                         <input type="text" class="form-control"  name="username" />
 90                    </div>
 91            </div>
 92            <div class="form-group">
 93                 <label class="col-sm-3 control-label">密碼:</label>
 94                 <div class="col-sm-3">
 95                     <input type="password" class="form-control"  name="password" />
 96                </div>
 97             </div>
 98             <div class="form-group">
 99                 <label class="col-sm-3 control-label">確認密碼:</label>
100                 <div class="col-sm-3">
101                     <input type="password" class="form-control"  name="confirmPassword" />
102                </div>
103             </div>
104             <div class="form-group ">
105                 <button id="btn_submit" type="submit" class="btn btn-sm btn-primary col-sm-offset-4">提交</button>
106             </div>
107         </div>
108     </form>
109   </div>
110   </body>
111 </html>

View Code

　　（1）當什么也輸入，點擊按鈕提交時，手動觸發驗證事件，結果如下：

　（2）當輸入的用戶名小於4位和大於16位時，兩次密碼不一樣時:

4.結束，這是一個簡單的demo，還有更多的官方定義的匹配規則在下面都有初略介紹，其中可以使用正則來自己定義自己所需要的規則：

password:{
    validators:{
           notEmpty:{
               message:"請輸入密碼！！！"  
                     }
           },
           regexp: {// 自定義的規則 
                regexp: /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/,
                message: "密碼的強度必須包含大小寫字母和數字的組合，不能使用特殊字符，長度在8-10之間"
           },
         },

三一些常用的方法

　　兩種調用api的辦法：

　　 ①.$(form).data('bootstrapValidator').methodName(parameters) ；（個人推薦這種，和api的耦合度高，關鍵看的懂）

　　 ②.$(form).bootstrapValidator(methodName, parameters);

　　 常用的方法：

　　1. enableFieldValidators(field*, enabled*, validator): BootstrapValidator - 啟用，禁用給定字段的驗證器

　　　　應用場景：需要動態的啟動一個驗證信息，某些情況下需要此驗證，某些情況下不需要

　　 $('#enabledForm').data('bootstrapValidator').enableFieldValidators('password',true,'notEmpty') 使驗證生效;

　　　　　　　$('#enabledForm').data('bootstrapValidator').enableFieldValidators('password',false,'notEmpty')使驗證失效;

　　　　　　　使某一個字段所有的都失效，生效：

　 $('#enabledForm').data('bootstrapValidator').enableFieldValidators('password',true) 使驗證生效;

　　　　　　 $('#enabledForm').data('bootstrapValidator').enableFieldValidators('password',false)使驗證失效;

2. getFieldElements(field)根據指定的name獲取指定的元素，返回值是null或一個jQuery對象數組。

　　　　應用場景：多用於在callback函數中用於獲取其他field的值

3.resetForm(Boolean):參數設為true將把輸入也全清空。當你調用這個方法發現不好用的時候，在bootstrapValidator初始化時增加屬性： excluded: ':disabled'

　　　　應用場景：重置表單中設置過校驗的內容，將隱藏所有錯誤提示和圖標。

　　4.validate（）

　　　　應用場景：手動對表單進行校驗，validate方法可用在需要點擊按鈕或者鏈接而非提交對表單進行校驗的時候。

　　5.isValid（）

　　　　應用場景：點擊按鈕時用於判斷是否驗證通過，在此之前得手動觸發一次validate（）方法

6.updateStatus(field, status, validatorName)

　　　　應用場景：更新指定的字段狀態。BootstrapValidator默認在校驗某個字段合法后不再重新校驗，當調用其他插件或者方法可能會改變字段值時，需要重新對該字段進行校驗 $("#defaultForm").data('bootstrapValidator').updateStatus('username', 'NOT_VALIDATED').validateField('username');

7.validateField(field)

　　　　應用場景：對指定字段進行校驗

　　8.destory（）

　　　　應用場景：如果查看頁面和編輯頁面是同一個頁面，此時，在處於查看時：應當將驗證器給destory，不讓他顯示錯誤信息（個人因為有用到）

　　9.revalidateField(field*)：

　　　　應用場景：使用於當其它控件改變了當前輸入值，重新觸發當前字段的校驗。官方解釋：By default, the plugin doesn't re-validate a field once it is already validated and marked as a valid one. When using with other plugins, the field value is changed and therefore need to be re-validated.

　　　　　等同於：

　　　　　　　　　　$(form).data('bootstrapValidator')
    　　　　　　　　.updateStatus(field, 'NOT_VALIDATED')
   　　　　　　　　 .validateField(field);
　　　　　　　　　　// Or
　　　　　　　　　　$(form).bootstrapValidator('updateStatus', field, 'NOT_VALIDATED')
      　　　　　　 .bootstrapValidator('validateField', field);

四官方定義的匹配規則大全 -----> 官方API

　　都存在參數message，在文末有一個總的簡單例子。

在我們日常需要用到的，標紅的就已經綽綽有余了。

簡單的例子大全=====》

  1                     password:{
  2                         validators:{
  3                             base64:{
  4                                 message:"不是基於base64編碼的字符串"  
  5                             },
  6                             between:{
  7                                 message:"輸入值不在1到9之間",
  8                                 //inclusive:false,
  9                                 min:1,
 10                                 max:9
 11                                 
 12                             },
 13                             callback: {
 14                                 message: "錯誤格式",
 15                                 callback: function (value, validator, $field) {
 16                                     //判斷是否為空，
 17                                     if (value === '') {
 18                                         return false;
 19                                     }
 20                                     
 21                                     if (value.length < 8) {
 22                                         return {
 23                                             valid: false,
 24                                             message: "長度必須大於8位"
 25                                         };
 26                                     } 
 27                                     
 28                                     if (value === value.toLowerCase()) {
 29                                         return {
 30                                             valid: false,
 31                                             message: "至少存在一個大寫字母"
 32                                         }
 33                                     }
 34         
 35                                 }
 36                             },
 37                             choice:{
 38                                 message:"請選擇2到4個選項",
 39                                 min:2,
 40                                 max:4
 41                             },
 42                             creditCard: {
 43                                     message: "無效的 creditCard 號碼"
 44                             },
 45                             cusip:{
 46                                 message:"無效的 CUSIP 號碼"
 47                             },
 48                             cvv: {
 49                                 message: "無效的 CVV 號碼",
 50                                 creditCardField: "creditField"
 51                             },
 52                             date: {
 53                                 message: "無效的日期格式",
 54                                 format: "YYYY/MM/DD"
 55                             },
 56                             different:{
 57                                 message:"該值    不能和字段1的值相同",
 58                                 field:"confirmPassword"
 59                             },
 60                             digits:{
 61                                 message:"當前含有非數字的字符"
 62                             },
 63                             ean:{
 64                                 message:"無效的國際貨物編號"
 65                             },
 66                             emailAddress:{
 67                                 message:"無效的郵箱地址",
 68                                 multiple:true
 69                             },
 70                            /*  file: {
 71                                 extension: "jpeg,png",
 72                                 type: "image/jpeg,image/png",
 73                                 maxSize: 2048 * 1024,
 74                                 message: "選擇的文件不符合要求"
 75                             }, */
 76                             greaterThan:{
 77                                 inclusive:false,
 78                                 value: 5,
 79                                 message:"請輸入大於5的值"
 80                             },
 81                             lessThan:{
 82                                 inclusive:false,
 83                                 value: 10,
 84                                 message:"請輸入小於10的值"
 85                             },
 86                             hex:{
 87                                 message:"無效的十六進制數"
 88                             },
 89                             hexColor:{
 90                                 message:"無效的十六進制顏色值"
 91                             },    
 92                             identical: {
 93                                 field: "confirmPassword",
 94                                     message: "兩次輸入的密碼不一致"
 95                             },
 96                             integer:{
 97                                 message:"無效的整數類型"
 98                             },
 99                             notEmpty:{
100                                 message:"請輸入確認密碼"
101                             },
102                             numeric:{
103                                 separator:",",
104                                 message:"無效的電話號碼"
105                             },
106                             phone:{
107                                 country:"US",
108                                 message:"無效的中國手機號碼"
109                             },
110                             regexp: { 
111                                 regexp: /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/,
112                                 message: "密碼的強度必須包含大小寫字母和數字的組合，不能使用特殊字符，長度在8-10之間"
113                             },
114                          /*   threshold :  6 , //有6字符以上才發送ajax請求，（input中輸入一個字符，插件會向服務器發送一次，設置限制，6字符以上才開始）
115                            remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送當前input name值，獲得一個json數據。例表示正確：{"valid",true}  
116                                  url: "doCheckUsername.do",//驗證地址
117                                  message: "該用戶已存在",//提示消息
118                                  delay :  2000,//每輸入一個字符，就發ajax請求，服務器壓力還是太大，設置2秒發送一次ajax（默認輸入一個字符，提交一次，服務器壓力太大）
119                                  type: "POST"
120                                  //自定義提交數據，默認值提交當前input value
121                                  data: function(validator) {
122                                    return {
123                                        username: $("username").val(),
124                                    };
125                                 }
126                                  
127                            }, */
128                            stringCase: {
129                                 message: "值必須全部大寫",
130                                 "case": "upper"
131                             },
132                             stringLength:{
133                                 message:"長度范圍在2到5",
134                                 min:2,
135                                 max:5
136                             }
137                         },
138                     },

View Code

　　 匹配規則如下：

　　 1. base64 : 驗證是否是base64編碼的字符串

　　　　　　　　參數：無

2. between : 驗證輸入值是否在（包含或不包含）兩個給定數字之間

　　　　　　　　　　　參數：inclusive：是否包含邊界，如果是false，表示不包括兩邊邊界值，默認是true.

　　　　　　　　　　　　　　 min：最小值.

　　　　　　　　　　　　 max：最大值.

　　 3. callback : 從回調函數返回驗證結果，這個真的好用，它也可以作為自定義規則來使用。

　　　　　　　　參數：callback：function(value,validator,$field){

　　　　　　　　　　　　　　　　　　　// value 當前字段的值

// validator 整個bootstrapValidator驗證器　

　　　　　　　　　　　　　　　　　　 // $field 當前的字段的jQuery對象

　　　　　　　　　　　　　　　　　　 }

　　 4.choice : 驗證復選框，多選下拉框選中的個數

　　　　　　　　參數： min：最小選擇個數.

　　　　　　　　　　　　　　max: 最大選擇個數.

　　 5.creditCard: 驗證信用卡卡號是否有效（應該是美國等國家的一些信用卡類型，不是很清楚）

　　　　　　　　參數：無

6.cusip：驗證 CUSIP 號（用於標識金融中的有價證券的一種字符串，不是很清楚）

　　　　　　　　參數：無

7.cvv ：驗證 CVV 號（由卡號、有效期和服務約束代碼生成的3位或4位數字，不是很清楚）

　　　　　　　　　　參數：creditCardField 對應5

　 8.date ：日期驗證

　　　　　　　　　　參數：format：日期格式，默認是 MM/DD/YYYY

　　　　　　　　　　　　　 separator:用來分割日期的字符，默認是 "/"

　 9.different : 驗證值是否和給定字段的值是否一樣，一樣則返回false，驗證不通過

　　　　　　　　　　參數：field：指定的字段，（官方api說：如果有多個字段，用 ","分割，沒理解什么意思，做測試未成功，可能是版本問題）

　 10. digits：如果值只包含數字，則返回true，驗證通過

　　　　　　　　　　參數：無

11. ean ：驗證EAN（國際貨物編號）

　　　　　　　　　　參數：無

12. emailAddress：驗證郵箱格式

　　　　　　　　　　參數：multiple：默認false（官方api說：如果設置為true，可以驗證多個郵箱，多個郵箱之間用","或者","分割，做測試未成功，可能是版本問題）

　　　　　　　　　　　　separator：正則，默認是/[,;]/ 多個郵箱之間分割符

13. file ：驗證上傳的文件，包括大小，類型

　　　　　　　參數 : extension ：文件后綴名，多條件使用","分割

　　　　　　　　　　　　 type：允許的文件類型，多條件使用","分割

　　　　　　　　　　　　 maxSize ：文件的最大size

　　　　　　　　　　　　　minSize ：文件的最小size

　 14. greaterThan ：驗證輸入的值是否大於（等於）某個值

　　　　　　　　　參數：inclusive 默認是true，代表是否包含邊界值

　　　　　　　　　　　　value 給定的比較值

15. grid ：一種格式（不清楚　）

　　　　　　　　參數：無

　 16. hex　：　驗證是否是有效的１６進制數

　　　　　　參數：無

17. hexColor : 驗證是否是有效的代表16進制顏色的數字

　　　　　　參數：無

　 18. iban ：驗證國際銀行賬戶（IBAN）

　　　　　　　　參數：country：一個國際標准ISO-3166國家對應的code

19. id ：驗證指定國家的身份證號碼是否符合

　　　　　　　　參數：country：一個國際標准ISO-3166國家對應的code （我大天朝的好像沒給驗證！！！）

　 20. identical ：驗證值是否和給定字段是否相同，相同驗證通過，不同驗證不通過，有用於確認密碼和新密碼一致。

　　　　　　　　參數：field：必填，指定字段的name屬性

　 21. imei ：驗證IMEI（國際移動台設備標識）

　　　　　　　　參數：無

　 22. imo ：驗證IMO（國際海事組織）

　　參數：無

23. integer : 驗證輸入的值是否是整數

　　　　　　　參數：無

24. ip ：驗證ip地址，支持ipv4和ipv6

　　　　　　　參數：ipv4 默認是true

　　　　　　　　　　 ipv6 默認是true

25. isbn :驗證ISBN（國際標准圖書編號）。支持ISBN 10和ISBN 13

　　　　　　　參數：無

26. isin :驗證ISIN（國際證卷識別號）

　　　　參數：無

　 27. ismn：驗證ISMN（國際標准音樂編號）

　　　　　　　參數：無

28. issn ：驗證ISSN（國際標准系列號）

　　　　　　　參數：無

　 29. lessThan：驗證值小於（或等於）給定數，則通過

　　　　　參數：inclusive:默認為true，是否包含邊界值

　　　　　 value:必填

　　 30. mac：驗證一個mac地址

　　　　　　參數：無

31. meid :驗證MEID（移動設備標識符）

　　　　　　參數：無

32. notEmpty:驗證值是否為空

　　　　　　參數：無

33. numeric:驗證電話號碼

　　　　　　參數：separator 分割符，默認是 "." (官方api說","可以，但我測試沒成功)

34. phone ：驗證手機號碼

參數：country ：一個國際標准ISO-3166國家對應的code （我大天朝的好像沒給驗證！！！）

35. regexp 正則驗證，最好使的，可自定義自己規則。

　　　　　　參數：regexp 對應的正則表達式

36.remote 利用ajax請求遠程執行檢查。

　　　　　　參數：url：驗證地址

　　　　　　　　　delay：設置延遲發送驗證ajax時間，毫秒為單位，每輸入一個字符發送一個請求對服務器壓力太大

　　　　　　　　　type:請求方式

　　　　　　　　　data：傳入后台的參數

　　　　37.rtn ：驗證RTN（路由傳輸號碼）

　　　　　參數：無

38.sedol ：驗證SEDOL（聯邦所每日官方名單）

　　　　　　參數：無

39.siren ：驗證警報號碼

　　　　　　參數：無

40.siret ：驗證警報編號

　　　　　　參數:無

　　　 41.step：驗證該值是否是有效的第一步（不懂什么鬼！！！）

　　　　　　參數：baseValue 基本值，默認為0

　　　　　　　　 step：該步驟，默認為1

42.stringCase ：驗證字符串是大寫還是小寫（就是輸入時只能是全部大寫，或者全部大寫）

　　　　　　參數："case" ：默認是lower ，可以是upper,注意case是關鍵字賦值時 "case"："upper"

　　　 43.stringLength :驗證字符串的長度（包括左右邊界）

　　　　　　參數： min:最小長度

　　　　　　　　　 max：最大長度

44.url ：驗證URL地址

　　　　　　參數： allowLocal :包含私有和本地ip，默認是false

　　　　　　　　　protocol:協議，用逗號分隔。默認情況下，它設置為http, https, ftp

45.uuid ：驗證UUID，支持v3，v4，v5

　　　　　　參數：version：UUID的版本，可以是3, 4, 5 或者 all，默認是all　　

46.vat 驗證增值稅號

　　　　　　參數：country ：一個國際標准ISO-3166國家對應的code

　　 47.vin 驗證US VIN（車輛標識號）　　

　　　　　　參數：無

　　 48.zipCode 驗證郵政編碼

　　　　　　參數：　country ：一個國際標准ISO-3166國家對應的code

五結束語

　 第一次寫博客，有點忐忑

雖然耗費了半天時間，但是學習到的卻很多

　 可憐了我女票，就這樣被我冷落了一天，tx

以后就開始慢慢的開始寫博客吧，不寫多，一周寫一篇就好了

當做學習的總結，也當做積累

　 水平有限，如有錯誤的地方，希望大家可以友情指出

　 你我共同進步，開開心心的就好

2017-03-09 21:27:16

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap插件bootstrapValidator常用驗證規則總結 bootstrapValidator 常用的驗證 PHP常用的魔術方法及規則常用的數據加密規則算法(php包含MD5和RSA) request對象的作用？包含哪些常用的方法？ jQuery之datagrid詳細案例(包含常用方法) spring oxm入門（包含demo） js bootstrapValidator表單驗證使用方法 webpack 入門和常用插件的使用 nmon使用常用方法