基于BootstrapValidator的Form表單驗證(24)

更新時間：2016年12月12日 08:36:26 作者：kikay

這篇文章主要為大家詳細介紹了基于BootstrapValidator的Form表驗證,具有一定的參考價值，感興趣的小伙伴們可以參考一下

Form表單進行數(shù)據(jù)驗證是十分必要的，我們可以自己寫JS腳本或者使用JQuery Validate 插件來實現(xiàn)。對于Bootstrap而言，利用BootstrapValidator來做Form表單驗證是個相當(dāng)不錯的選擇，兩者完全兼容，我們也不用去關(guān)注CSS樣式等美工效果。

0x01 引入BootstrapValidator

官網(wǎng)：BootstrapValidator，作為一個純粹的使用者，我們可以在上面的鏈接處下載相關(guān)文件并引入，也可以利用CDN方式引入：

0x02 用戶注冊實例

下面使用一個用戶注冊的實例，來總結(jié)BootstrapValidator的基本使用方法（其中的JS和CSS文件的引入，請根據(jù)自己的實際位置進行調(diào)整）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>用戶注冊</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../../css/bootstrap.min.css" rel="stylesheet">
 <link  rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../../js/bootstrap.min.js"></script>
 <script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="container col-lg-3 col-lg-offset-3">
 <div class="page-header">
  <h3>用戶注冊</h3>
 </div>
 <div>
  <form id="registerForm" method="POST" class="form-horizontal" action="用戶注冊.html">
   <div class="form-group">
    <!--注冊的用戶名-->
    <label class="control-label" for="username">*請輸入注冊用戶名:</label>
    <input type="text" class="form-control" placeholder="請輸入注冊用戶名" name="username" id="username">
   </div>
   <div class="form-group">
    <!--注冊密碼-->
    <label class="control-label" for="password">*請輸入注冊密碼:</label>
    <input type="password" class="form-control" placeholder="請輸入注冊密碼" name="password" id="password">
   </div>
   <div class="form-group">
    <!--確認(rèn)密碼-->
    <label class="control-label" for="repassword">*請輸入確認(rèn)密碼:</label>
    <input type="password" class="form-control" placeholder="請輸入確認(rèn)密碼" name="repassword" id="repassword">
   </div>
   <div class="form-group">
    <label class="control-label" for="phone">*請輸入手機號碼:</label>
    <input type="text" class="form-control" placeholder="請輸入手機號碼" name="phone" id="phone">
   </div>
   <div class="form-group">
    <label class="control-label" for="email">*請輸入電子郵箱:</label>
    <input type="text" class="form-control" placeholder="請輸入電子郵箱" name="email" id="email">
   </div>
   <div class="form-group">
    <label class="control-label" for="inviteCode">*請輸入邀請碼:</label>
    <input type="text" class="form-control" placeholder="請輸入邀請碼" name="inviteCode" id="inviteCode">
   </div>
   <div class="form-group">
    <button type="submit" class="btn btn-primary form-control">提交注冊</button>
   </div>
  </form>
 </div>
</div>
<script>
 $(function () {
  <!--數(shù)據(jù)驗證-->
  $("#registerForm").bootstrapValidator({
   message:'This value is not valid',
//   定義未通過驗證的狀態(tài)圖標(biāo)
   feedbackIcons: {/*輸入框不同狀態(tài)，顯示圖片的樣式*/
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
   },
//   字段驗證
   fields:{
//    用戶名
    username:{
     message:'用戶名非法',
     validators:{
//      非空
      notEmpty:{
       message:'用戶名不能為空'
      },
//      限制字符串長度
      stringLength:{
       min:3,
       max:20,
       message:'用戶名長度必須位于3到20之間'
      },
//      基于正則表達是的驗證
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'用戶名由數(shù)字字母下劃線和.組成'
      }
     }
    },

//    密碼
    password:{
     message:'密碼非法',
     validators:{
      notEmpty:{
       message:'密碼不能為空'
      },
//      限制字符串長度
      stringLength:{
       min:3,
       max:20,
       message:'密碼長度必須位于3到20之間'
      },
//      相同性檢測
      identical:{
//       需要驗證的field
       field:'password',
       message:'兩次密碼輸入不一致'
      },
//      基于正則表達是的驗證
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'密碼由數(shù)字字母下劃線和.組成'
      }
     }
    },

    //    確認(rèn)密碼
    repassword:{
     message:'密碼非法',
     validators:{
      notEmpty:{
       message:'密碼不能為空'
      },
//      限制字符串長度
      stringLength:{
       min:3,
       max:20,
       message:'密碼長度必須位于3到20之間'
      },
//      相同性檢測
      identical:{
//       需要驗證的field
       field:'password',
       message:'兩次密碼輸入不一致'
      },
//      基于正則表達是的驗證
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'密碼由數(shù)字字母下劃線和.組成'
      }
     }
    },

//    電子郵箱
    email:{
     validators:{
      notEmpty:{
       message:'郵箱地址不能為空'
      },
      emailAddress:{
       message:'請輸入正確的郵箱地址'
      }
     }
    },

//    手機號碼
    phone:{
     validators:{
      notEmpty:{
       message:'手機號碼不能為空'
      },
      stringlength:{
       min:11,
       max:11,
       message:'請輸入11位手機號碼'
      },
      regexp:{
       regexp:/^1[3|5|8]{1}[0-9]{9}$/,
       message:'請輸入正確的手機號碼'
      }
     }
    },

//    邀請碼
    inviteCode:{
     validators:{
      notEmpty:{
       message:'邀請碼不能為空'
      },
      stringlength:{
       min:9,
       max:9,
       message:'請輸入9位邀請碼'
      },
      regexp:{
       regexp:/^[\w]{8}$/,
       message:'邀請碼由數(shù)字和字母組成'
      }
     }
    }
   }
  })
 })
</script>
</body>
</html>

驗證效果如下：

0x03 后記

在實際應(yīng)用中，可能還會遇到類似Ajax提交驗證的問題，處理過程是類似的，以后再結(jié)合實際的應(yīng)用來講這個問題。
類似BootstrapValidator這種基于JS來做驗證的過程只是客戶端驗證，只是為了提高用戶體驗，并不能保證提交數(shù)據(jù)的安全性，后端開發(fā)者還要做相應(yīng)的后臺驗證。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: