jQuery表單校驗插件validator使用方法詳解

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

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

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

validator的基本使用

1. 需要引入的文件

① jQuery類庫

② 插件的js文件官網

2.表單校驗插件validator的基本語法

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

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

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

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

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

擴展：當錯誤提示信息不按照我們預想的位置顯示時，我們可以自定義錯誤顯示標簽放在我們需要顯示的位置。

語法：

//標簽寫在什么地方，錯誤信息就顯示在什么地方
<label class="error" for="表單項的name"></label>

3. 自定義校驗方法

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

自定義校驗語法：

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

本文已被整理到了《jquery表單驗證大全》，歡迎大家學習閱讀。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

jquery自定義組件實例詳解
這篇文章主要為大家詳細介紹了jquery自定義組件實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery實現(xiàn)的頁面遮罩層功能示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的頁面遮罩層功能,結合完整實例形式詳細分析了jQuery遮罩層實現(xiàn)步驟與相關操作技巧,需要的朋友可以參考下
2017-10-10
jquery ui dialog實現(xiàn)彈窗特效的思路及代碼
這篇文章介紹了jquery ui dialog實現(xiàn)彈窗特效的思路及代碼，有需要的朋友可以參考一下
2013-08-08
詳談jQuery Ajax(load,post,get,ajax)的用法
下面小編就為大家?guī)硪黄斦刯Query Ajax(load,post,get,ajax)的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
jQuery輪播圖功能制作方法詳解
這篇文章主要介紹了jQuery輪播圖功能制作方法,結合實例形式詳細分析了jQuery輪播圖實現(xiàn)原理、步驟與相關操作技巧,需要的朋友可以參考下
2019-12-12
jquery mobile動態(tài)添加元素之后不能正確渲染解決方法說明
本篇文章主要是對jquery mobile動態(tài)添加元素之后不能正確渲染解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
25個非常棒的jQuery滑塊插件和教程小結
圖像滑塊和幻燈片效果，已成為網頁設計的基本要素。它們以有趣的方式展示視覺內容。如果你一直想知道這是如何實現(xiàn)的，那么這里的25個非常棒的 jQuery 圖片滑塊制作教程將幫助您實現(xiàn)這種效果
2011-09-09
jqNext能替代jQuery嗎
隨著前端的發(fā)展和瀏覽器的升級,jQuery也開始有些缺陷,其中最主要的就是在處理大量數(shù)據(jù)時會出現(xiàn)性能問題,而為了解決這個問題,我們可以使用jqNext,這是jQuery的一個輕量級替代品,盡管它并不能完全取代jQuery,但在一些場景下使用起來是十分便利的
2023-09-09
原生和jQuery的ajax用法詳解
Ajax被認為是(Asynchronous(異步) JavaScript And Xml的縮寫）?，F(xiàn)在，允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax。這篇文章主要介紹了原生和jQuery的ajax用法，需要的朋友參考下吧
2017-01-01
jQuery Validation實例代碼讓驗證變得如此容易
眾所周知，Jquery以其簡潔性讓無數(shù)人為之瘋狂。現(xiàn)在我要像大家介紹一個jQuery Validation，一看到Validation大家肯定第一直觀感覺就是這肯定是一個驗證框架，沒有錯，本文就是基于jQuery Validation展開討論。
2010-10-10