詳解jQuery的表單驗證插件--Validation
大致介紹
jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。該插件是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發(fā)人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經(jīng)開始出現(xiàn)，并一直更新至今。訪問 jQuery Validate 官網(wǎng)，下載最新版的 jQuery Validate 插件。
下載地址：http://xiazai.jb51.net/201612/yuanma/jquery-validation-1.14.0_jb51.rar
基本語法
Validate插件需要jQuery,所以我們需要在頭部引入jQuery和Validate文件
<script type="text/javascript" src="lib/jquery.js"></script> <script type="text/javascript" src="dist/jquery.validate.min.js"></script>
文件引入完畢，先寫個簡單的表單
<form class="cmxform" id="commentForm" method="get"> <fieldset> <legend>驗證完整的表單</legend> <p> <label for="firstname">名字</label> <input id="firstname" name="firstname" type="text"> </p> <p> <label for="lastname">姓氏</label> <input id="lastname" name="lastname" type="text"> </p> <p> <label for="username">用戶名</label> <input id="username" name="username" type="text"> </p> <p> <label for="password">密碼</label> <input id="password" name="password" type="password"> </p> <p> <label for="confirm_password">驗證密碼</label> <input id="confirm_password" name="confirm_password" type="password"> </p> <p> <label for="email">Email</label> <input id="email" name="email" type="email"> </p> <p> <label for="agree">請同意我們的聲明</label> <input type="checkbox" class="checkbox" id="agree" name="agree"> </p> <p> <input class="submit" type="submit" value="提交"> </p> </fieldset> </form>
然后我們開始寫驗證表單的代碼
首先我們需要知道那個表單需要驗證
$(function(){
$('#commentForm').validate();
});
然后開始寫驗證的規(guī)則，要注意這里選擇元素是根據(jù)每個標簽的name屬性選擇的，基本語法如下
$('#commentForm').validate({
rules: {
firstname: 'required',//required 表示是必填字段
lastname: {
required: true,
minlength: 3 // 最小長度是3
}
}
});
從上面可以看出，如果一個信息只有一個驗證要求可以寫成一行，比如 firstname；如果有多個驗證要寫成像 lastname 這種形式；知道了基本的語法
在看看Validation都提供了那些校驗規(guī)則
(1)、required:true 必輸字段 (2)、remote:"remote-valid.jsp" 使用ajax方法調(diào)用remote-valid.jsp驗證輸入值 (3)、email:true 必須輸入正確格式的電子郵件 (4)、url:true 必須輸入正確格式的網(wǎng)址 (5)、date:true 必須輸入正確格式的日期，日期校驗ie6出錯，慎用 (6)、dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性 (7)、number:true 必須輸入合法的數(shù)字(負數(shù)，小數(shù)) (8)、digits:true 必須輸入整數(shù) (9)、creditcard:true 必須輸入合法的信用卡號 (10)、equalTo:"#password" 輸入值必須和#password相同 (11)、accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴） (12)、maxlength:5 輸入長度最多是5的字符串(漢字算一個字符) (13)、minlength:10 輸入長度最小是10的字符串(漢字算一個字符) (14)、rangelength:[5,10] 輸入長度必須介于 5 和 10 之間的字符串")(漢字算一個字符) (15)、range:[5,10] 輸入值必須介于 5 和 10 之間 (16)、max:5 輸入值不能大于5 (17)、min:10 輸入值不能小于10
我們將上面的表單驗證完善一下，如下
$(function(){
$('#commentForm').validate({
rules: {
firstname: {
required: true,
minlength: 5
},
lastname: "required",
username: {
required: true,
rangelength: [4,6]
},
password: {
required: true,
minlength: 4,
number: true
},
confirm_password: {
required: true,
minlength: 3,
equalTo: '#password'
},
email: {
required: true,
email: true
},
}
});
});
效果：
可以看到，這里的提示默認是英文的不太滿意，將提示信息更改成中文有兩種方式
第一種方式：引入語言文件（推薦）
<script type="text/javascript" src="dist/localization/messages_zh.js"></script>
他的提示信息是：
required: "這是必填字段",
remote: "請修正此字段",
email: "請輸入有效的電子郵件地址",
url: "請輸入有效的網(wǎng)址",
date: "請輸入有效的日期",
dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
number: "請輸入有效的數(shù)字",
digits: "只能輸入數(shù)字",
creditcard: "請輸入有效的信用卡號碼",
equalTo: "你的輸入不相同",
extension: "請輸入有效的后綴",
maxlength: $.validator.format("最多可以輸入 {0} 個字符"),
minlength: $.validator.format("最少要輸入 {0} 個字符"),
rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"),
range: $.validator.format("請輸入范圍在 {0} 到 {1} 之間的數(shù)值"),
max: $.validator.format("請輸入不大于 {0} 的數(shù)值"),
min: $.validator.format("請輸入不小于 {0} 的數(shù)值")
第二種方式：自己寫提示信息
$('#commentForm').validate({
rules: {
firstname: {
required: true,
minlength: 5
},
lastname: "required",
username: {
required: true,
rangelength: [4,6]
},
password: {
required: true,
minlength: 4,
number: true
},
confirm_password: {
required: true,
minlength: 3,
equalTo: '#password'
},
email: {
required: true,
email: true
}
},
messages: {
firstname: "請輸入您的名字",
lastname: "請輸入您的姓氏",
username: {
required: "請輸入用戶名",
minlength: "用戶名必需由兩個字母組成"
},
password: {
required: "請輸入密碼",
minlength: "密碼長度不能小于 5 個字母"
},
confirm_password: {
required: "請輸入密碼",
minlength: "密碼長度不能小于 5 個字母",
equalTo: "兩次密碼輸入不一致"
},
email: "請輸入一個正確的郵箱",
}
});
效果：
注意：還有一種寫驗證的方式是在 class 中寫，例如
<input id="firstname" name="firstname" type="text" class="{required:true, minlength:2}">
但是不推薦這種寫法，因為不符合樣式與結(jié)構(gòu)分離的要求，并且還需要自己下載一個jquery.metadata.js文件才能夠這樣寫
表單提交問題
可以在表單提交之前執(zhí)行我們自定義的代碼，當我們的自定義代碼執(zhí)行完畢后再提交表單
$('#commentForm').validate({
submitHandler: function(){
alert("提交事件成功");
from.submit();
}
});
可以設置validate的默認值
$.validate.setDefaults({
submitHandler: function(){
alert("提交成功！");
form.submit();
}
});
只驗證不提交表單
$(function(){
$("#commentForm").validate({
debug:true;
});
});
錯誤提示信息設置
1、錯誤信息位置設置
errorPlacement方法是設置錯誤信息顯示在哪，默認值是在驗證元素的后面
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
errorClass 是設置錯誤信息的樣式，后跟css類名
errorElement 是設置用什么標簽包住錯誤信息，默認值是<label>
errorLabelContainer 是設置將所有的錯誤信息包在一個地方
wrapper 是設置用什么標簽再把上邊的 errorELement 包起來
例如：
errorPlacement: function(error,element){
$(element).closest('form').find('label[for="'+ element.attr("id") +'"]').append(error);
},
是將錯誤提示信息顯示在驗證的信息前面
效果：
例如：
errorElement: 'span',
errorClass: 'commentError',
errorLabelContainer: $('form div.error'),
wrapper: 'li',
是將每個提示信息用<span>標簽包起來，給他們添加css名為 .commentError 的樣式， 并把他們都包再一個class為 error 的div里，在用<li>把每個提示信息包起來
效果：
2、錯誤信息樣式設置
有兩種方式可以修改提示信息的樣式
第一種就是采用下載Validation時自帶的樣式文件
<link href="demo/css/screen.css" type="text/css" rel="stylesheet" />
第二種方式就是自己定義樣式（當然也可以修改自帶的css文件）
例如添加這樣的樣式：
input.error { border: 1px solid red; }
label.error {
background:url("demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("demo/images/checked.gif") no-repeat 0px 0px;
}
效果：
驗證時的問題
1、驗證的元素通過
驗證的元素通過驗證時如果要進行操作，可以使用 success ，他可以接受字符串或者是函數(shù)，當接受的是字符串的時候是添加樣式
例如：
success: function(){
alert(1);
},
是在要驗證的元素通過驗證時，彈出1
例如：
success: "valid"
是將css樣式名為 .valid 添加到元素上
2、驗證方式
自定義校驗
雖然Validation提供了許多驗證的方式，但是有些情況還是不夠用的，所以如果要添加自定義的校驗方式可以使用 addMethod 方法，通常將自定義的方法寫在 additional-methods.js 中，然后要引入這個文件
<script type="text/javascript" src="dist/additional-methods.js"></script>
寫入 additional-methods.js 文件的內(nèi)容
例如：
$.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");
只要把這段代碼寫入 additional-methods.js 文件就可以使用了
例如：
zipcode: {
required: true,
isZipCode :true
}
效果：
radio 和 checkbox、select 的驗證
radio的required表示必須選中一個
checkbox的required表示必須選中，minlength表示必須選中的最小個數(shù)，maxlength表示必須選中的最大個數(shù)，rangelength[2,3]表示選中個數(shù)區(qū)間
select的required表示選中的value不能為空，minlength表示必須選中的最小個數(shù)，maxlength表示必須選中的最大個數(shù)，rangelength[2,3]表示選中個數(shù)區(qū)間
總結(jié)：Validation插件提供了許多的驗證，用戶可以自己添加自己的驗證和提示信息的樣式，但是在博客中我并沒有提及與ajax相關(guān)的內(nèi)容，因為ajax還沒有學習-_-||，如果有什么問題可以和我探討，如果有不對的地方，歡迎指正
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
jQuery each()小議，對于具體的使用方法， 可以參考腳本之家的下一篇文章。2010-03-03
本節(jié)主要介紹了jquery使用text()方法取標簽中的文本的具體實現(xiàn),需要的朋友可以參考下2014-07-07
jQuery 1.5 beta1出來了，從學習跟進上來說，這一次已經(jīng)比較晚了（我竟然不知道1.5什么時候出的alpha，就這么beta了）。2011-01-01
一般情況下，在jQuery選擇器中，我們很少會用到諸如“.”、“#”、“(”、“[”等特殊字符，但是在實際應用中，偶爾也會遇到表達式中含有“#”和“.”等特殊字符,那么是如何處理這些個特殊字符的呢？下面小編給大家介紹下2017-09-09
這篇文章主要為大家詳細介紹了JQuery用戶名校驗的具體實現(xiàn)，感興趣的小伙伴們可以參考一下2016-03-03
jQuery插件echarts實現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的多柱子柱狀圖效果,結(jié)合完整實例形式分析了echarts繪制多柱子柱狀圖效果的操作步驟與相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)視頻展示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
最近在做項目的時候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家2014-07-07
本篇文章詳細概述了jQuery選擇器的作用并對其進行了實例解析，有助于理解與學習。文章通過對jQuery選擇器進行分類的形式進行一一介紹，有助于理解與記憶，希望通過對本文的閱讀對大家有所幫助2016-11-11
JQuery實現(xiàn)簡單的復選框樹形結(jié)構(gòu)圖示例【附源碼下載】
這篇文章主要介紹了JQuery實現(xiàn)簡單的復選框樹形結(jié)構(gòu)圖,涉及jQuery頁面元素屬性動態(tài)操作與事件響應相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-07-07