jQuery表單校驗外掛validator使用方法詳解

阿新 • • 發佈：2020-02-19

validator外掛：將jquery實現的常用操作進行封裝，我們只需要學會外掛的使用語法，就可以使用簡單的程式碼實現較為複雜的功能。

validator的基本使用

1. 需要引入的檔案

① jQuery類庫

② 外掛的js檔案官網

2.表單校驗外掛validator的基本語法

在rules中通過校驗規則名稱使用校驗規則，在messages中定義該規則對應的錯誤提示資訊。

<!-- 需要引入的檔案 --> 
<script src="../lib/jquery.js"></script>
<script src="../dist/jquery.validate.js"></script>

<!-- 表單校驗外掛validator的基本語法 -->
<script>
 $("form表單的選擇器").validate({
 rules:{//配置表單項校驗的規則
 表單項的name:{
 校驗規則名稱: 規則值,...
 校驗規則名稱: 規則值
 },...,表單項的name:{
 校驗規則名稱: 規則值,...
 校驗規則名稱: 規則值
 }
 },messages:{//配置對應的表單項校驗失敗後的錯誤提示資訊
 表單項的name:{
 校驗規則名稱: "提示資訊",...
 校驗規則名稱: "提示資訊"
 },表單項的name:{
 校驗規則名稱: "提示資訊",...
 校驗規則名稱: "提示資訊"
 }
 }
 });
</script>

常用的校驗規則名稱，規則值及使用範圍：

jQuery表單校驗外掛validator使用方法詳解

注：$(“form表單的選擇器”)即表單jQuery物件。

擴充套件：當錯誤提示資訊不按照我們預想的位置顯示時，我們可以自定義錯誤顯示標籤放在我們需要顯示的位置。

語法：

//標籤寫在什麼地方，錯誤資訊就顯示在什麼地方
<label class="error" for="表單項的name"></label>

3. 自定義校驗方法

如果預定義的校驗規則不能滿足需求則可以進行自定義校驗規則。

自定義校驗語法：

$.validator.addMethod("校驗規則名稱",function(value,element,params){
 //value：要校驗的值（校驗元件的value值）
 //element：要校驗的表單項標籤物件
 //params：使用此規則時，配置的規則的值。（校驗規則的引數）
 //如果校驗通過，就返回true；否則返回false
},"預設效驗錯誤時的提示資訊");

validator表單校驗的簡單示例

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>

 <style type="text/css">
 table {
 width: 30%;
 
 /* 居中 */
 /* margin: 0 auto; */
 
 /* magin:atuo配合絕對定位實現水平和垂直方向居中 */
 margin:auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 
 }
 td {
 padding: 8px 2px; 
 }
 
 .error {
 color: red;
 }
 </style>
 </head>

 <body>
 <form name="empForm" id="empForm" method="get" action="#">
 <table>
 <tr>
 <td>使用者名稱</td>
 <td><input type="text" id="username" name="username" /></td>
 </tr>
 
 <tr>
 <td>密碼</td>
 <td><input type="password" id="pwd" name="pwd" /></td>
 </tr>
 
 <tr>
 <td>確認密碼</td>
 <td><input type="password" id="pwd2" name="pwd2" /></td>
 </tr>
 
 <tr>
 <td>性別</td>
 <td>
 <input type="radio" id="male" value="m" name="sex" />男
 <input type="radio" id="female" value="f" name="sex" />女
 <label class="error" for="sex"></label>
 
 </td>
 </tr>
 
 <tr>
 <td>年齡</td>
 <td><input type="text" id="age" name="age" /></td>
 </tr>
 
 <tr>
 <td align="left">電子郵箱:</td>
 <td><input type="text" id="email" name="email" /></td>
 </tr>
 
 <tr>
 <td align="left">身份證:</td>
 <td><input type="text" id="idcard" name="idcard" /></td>
 </tr>
 
 <tr>
 <td>學歷</td>
 <td>
 <select name="edu" id="edu">
 <option value="">－請選擇你的學歷－</option>
 <option value="a">學前</option>
 <option value="a">小學</option>
 <option value="a">初中</option>
 <option value="a">高中</option>
 <option value="a">專科</option>
 <option value="b">本科</option>
 <option value="c">研究生</option>
 <option value="e">碩士</option>
 <option value="d">博士</option>
 </select>
 </td>
 </tr>
 
 <tr>
 <td>興趣愛好</td>
 <td colspan="2">
 <input type="checkbox" name="hobby" id="coding" value="0" />程式設計
 <input type="checkbox" name="hobby" id="read" value="1" />看書
 <input type="checkbox" name="hobby" id="ball" value="2" />打球
 <label class="error" for="hobby"></label>
 </td>
 </tr>
 
 <tr>
 <td></td>
 <td><input type="submit" id="smtBtn" value="確定"></td>
 </tr>
 </table>
 </form>
 
 
 <!-- 引入jQuery類庫 -->
 <script src="js/jquery-3.3.1.js"></script>
 <!-- 引入validator外掛 -->
 <script src="js/jquery.validate.min.js"></script>
 
 <script>
 $("#empForm").validate({
 rules:{//配置表單項校驗的規則
 username:{
  required: true,maxlength:5,},pwd:{
 required: true,rangelength:[6,10]
 },pwd2:{
 required:true,10],equalTo:"#pwd"
 },sex:{
 required:true
 },age:{
 required:true,range:[18,70],digits:true
 },email:{
 required:true,email:true
 },idcard:{
 required:true,card:true
 },edu:{
 required:true
 },hobby:{
 required:true
 },messages:{//配置對應的表單項校驗失敗後的錯誤提示資訊
 username:{
 required: "請輸入使用者名稱",maxlength:"使用者名稱不得多於5位"
 },pwd:{
 required: "請輸入密碼",rangelength:"密碼必須是6~10位"
 },pwd2:{
 required:"確認密碼不能為空",rangelength:"確認密碼必須是6~10位",equalTo:"兩次密碼輸入不一致"
 },sex:{
 required:"性別必選"
 },age:{
 required:"年齡不能為空",range:"年齡必須是18~70歲之間",digits:"年齡必須是整數"
 },email:{
 required:"郵箱不能為空",email:"郵箱格式不正確"
 },idcard:{
 required:"身份證號不能為空",card:"身份證號格式不正確"//自定義身份證校驗方法中有錯誤時提示資訊，這裡寫了，會顯示這裡的
 },edu:{
 required:"學歷必選"
 },hobby:{
 required:"興趣愛好必選"
 } 
 }
 })
 
 //自定義身份證校驗方法
 $.validator.addMethod("card",params){
 //value：要校驗的值（校驗元件的value值）
 //element：要校驗的表單項標籤物件
 //params：使用此規則時，配置的規則的值。（校驗規則的引數）
 
 //如果校驗通過，就返回true；否則返回false
 
 // 身份證格式：15位數字， 18位數字， 17位數字+X
 var reg = /^\d{15}(\d{2}[\dx])?$/i;//簡單的身份證校驗正則表示式
 var result = reg.test(value);
 return result;
 },"請輸入正確的身份證號");
 </script> 
 </body>
</html>

jQuery表單校驗外掛validator使用方法詳解