jQuery表單校驗(yàn)插件validator使用方法詳解

更新時(shí)間：2020年02月18日 12:43:53 作者：“二等公民”

這篇文章主要為大家詳細(xì)介紹了jQuery表單校驗(yàn)插件validator的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

validator插件：將jquery實(shí)現(xiàn)的常用操作進(jìn)行封裝，我們只需要學(xué)會插件的使用語法，就可以使用簡單的代碼實(shí)現(xiàn)較為復(fù)雜的功能。

validator的基本使用

1. 需要引入的文件

① jQuery類庫

② 插件的js文件官網(wǎng)

2.表單校驗(yàn)插件validator的基本語法

在rules中通過校驗(yàn)規(guī)則名稱使用校驗(yàn)規(guī)則，在messages中定義該規(guī)則對應(yīng)的錯(cuò)誤提示信息。

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

<!-- 表單校驗(yàn)插件validator的基本語法 -->
<script>
 $("form表單的選擇器").validate({
 rules:{//配置表單項(xiàng)校驗(yàn)的規(guī)則
 表單項(xiàng)的name:{
 校驗(yàn)規(guī)則名稱: 規(guī)則值,
 ...
 校驗(yàn)規(guī)則名稱: 規(guī)則值
 },
 ...,
 表單項(xiàng)的name:{
 校驗(yàn)規(guī)則名稱: 規(guī)則值,
 ...
 校驗(yàn)規(guī)則名稱: 規(guī)則值
 }
 },
 messages:{//配置對應(yīng)的表單項(xiàng)校驗(yàn)失敗后的錯(cuò)誤提示信息
 表單項(xiàng)的name:{
 校驗(yàn)規(guī)則名稱: "提示信息",
 ...
 校驗(yàn)規(guī)則名稱: "提示信息"
 },
 ...,
 表單項(xiàng)的name:{
 校驗(yàn)規(guī)則名稱: "提示信息",
 ...
 校驗(yàn)規(guī)則名稱: "提示信息"
 }
 }
 });
</script>

常用的校驗(yàn)規(guī)則名稱，規(guī)則值及使用范圍：

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

擴(kuò)展：當(dāng)錯(cuò)誤提示信息不按照我們預(yù)想的位置顯示時(shí)，我們可以自定義錯(cuò)誤顯示標(biāo)簽放在我們需要顯示的位置。

語法：

//標(biāo)簽寫在什么地方，錯(cuò)誤信息就顯示在什么地方
<label class="error" for="表單項(xiàng)的name"></label>

3. 自定義校驗(yàn)方法

如果預(yù)定義的校驗(yàn)規(guī)則不能滿足需求則可以進(jìn)行自定義校驗(yàn)規(guī)則。

自定義校驗(yàn)語法：

$.validator.addMethod("校驗(yàn)規(guī)則名稱",function(value, element, params){
 //value：要校驗(yàn)的值（校驗(yàn)組件的value值）
 //element：要校驗(yàn)的表單項(xiàng)標(biāo)簽對象
 //params：使用此規(guī)則時(shí)，配置的規(guī)則的值。（校驗(yàn)規(guī)則的參數(shù)）
 //如果校驗(yàn)通過，就返回true；否則返回false
}, "默認(rèn)效驗(yàn)錯(cuò)誤時(shí)的提示信息");

validator表單校驗(yàn)的簡單示例

<!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配合絕對定位實(shí)現(xiàn)水平和垂直方向居中 */
 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>確認(rèn)密碼</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>學(xué)歷</td>
 <td>
 <select name="edu" id="edu">
 <option value="">－請選擇你的學(xué)歷－</option>
 <option value="a">學(xué)前</option>
 <option value="a">小學(xué)</option>
 <option value="a">初中</option>
 <option value="a">高中</option>
 <option value="a">?？?lt;/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:{//配置表單項(xiàng)校驗(yàn)的規(guī)則
 username:{
 required: true,
 maxlength:5,
 },
 pwd:{
 required: true,
 rangelength:[6,10]
 },
 pwd2:{
 required:true,
 rangelength:[6, 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:{//配置對應(yīng)的表單項(xiàng)校驗(yàn)失敗后的錯(cuò)誤提示信息
 username:{
 required: "請輸入用戶名",
 maxlength:"用戶名不得多于5位"
 },
 pwd:{
 required: "請輸入密碼",
 rangelength:"密碼必須是6~10位"
 },
 pwd2:{
 required:"確認(rèn)密碼不能為空",
 rangelength:"確認(rèn)密碼必須是6~10位",
 equalTo:"兩次密碼輸入不一致"
 },
 sex:{
 required:"性別必選"
 },
 age:{
 required:"年齡不能為空",
 range:"年齡必須是18~70歲之間",
 digits:"年齡必須是整數(shù)"
 },
 email:{
 required:"郵箱不能為空",
 email:"郵箱格式不正確"
 },
 idcard:{
 required:"身份證號不能為空",
 card:"身份證號格式不正確"http://自定義身份證校驗(yàn)方法中有錯(cuò)誤時(shí)提示信息，這里寫了，會顯示這里的
 },
 edu:{
 required:"學(xué)歷必選"
 },
 hobby:{
 required:"興趣愛好必選"
 } 
 }
 })
 
 //自定義身份證校驗(yàn)方法
 $.validator.addMethod("card",function(value, element, params){
 //value：要校驗(yàn)的值（校驗(yàn)組件的value值）
 //element：要校驗(yàn)的表單項(xiàng)標(biāo)簽對象
 //params：使用此規(guī)則時(shí)，配置的規(guī)則的值。（校驗(yàn)規(guī)則的參數(shù)）
 
 //如果校驗(yàn)通過，就返回true；否則返回false
 
 // 身份證格式：15位數(shù)字， 18位數(shù)字， 17位數(shù)字+X
 var reg = /^\d{15}(\d{2}[\dx])?$/i;//簡單的身份證校驗(yàn)正則表達(dá)式
 var result = reg.test(value);
 return result;
 },"請輸入正確的身份證號");
 </script> 
 </body>
</html>