jquery Validation表單驗證使用詳解
是一款優(yōu)秀的插件，它能對客戶端表單進行驗證，并且提供了許多可以定制的屬性和方法，良好的擴展性。本文就是通過講解這個實例來理解Validation的應(yīng)用。
本實例涉及到的驗證有：
用戶名：長度、字符驗證，重復(fù)性ajax驗證（是否已存在）。
密碼：長度驗證，重復(fù)輸入密碼驗證。
郵件：郵件地址驗證。
固定電話：中國大陸固定電話號碼驗證。
手機號：中國大陸手機號碼驗證。
網(wǎng)址：網(wǎng)站URL地址驗證。
日期：標準日期格式驗證。
數(shù)字：整數(shù)、正整數(shù)驗證，數(shù)字范圍驗證。
身份證：大陸身份證號碼驗證。
郵政編碼：大陸郵政編碼驗證。
文件：文件類型（后綴）驗證，如只允許上傳圖片。
IP：IP地址驗證。
驗證碼：驗證碼ajax驗證。
使用方法：
1、準備jquery和jquery.validate插件
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script>
2、準備CSS樣式
頁面樣式我不再詳述，大家可以自己寫個樣式，也可以參看DEMO的頁面源代碼。這里要強調(diào)的關(guān)鍵樣式是要顯示驗證信息的樣式
label.error{color:#ea5200; margin-left:4px; padding:0px 20px;
background:url(images/unchecked.gif) no-repeat 2px 0 }
label.right{margin-left:4px; padding-left:20px; background:
url(images/checked.gif) no-repeat 2px 0}
3、XHTML
<form id="myform" action="#" method="post"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable"> <tr class="table_title"> <td colspan="2">jquery.validation 表單驗證</td> </tr> <tr> <td width="22%" align="right">用戶名：</td> <td><input type="text" name="user" id="user" class="input required" /> <p>用戶名為3-16個字符，可以為數(shù)字、字母、下劃線以及中文</p></td> </tr> <tr> <td align="right">密碼：</td> <td><input type="password" name="pass" id="pass" class="input required" /> <p>最小長度:6 最大長度:16</p> </td> </tr> <tr> <td align="right">確認密碼：</td> <td><input type="password" name="repass" class="input required" /></td> </tr> </table> </form>
限于篇幅，本文的只截取了實例中HTML代碼的一小部分，詳細XHTML代碼可參看頁面DEMO源代碼。值得一提的是，我在給了標簽一個“required”類樣式，下文將會提到它的作用。
4、應(yīng)用Validation插件
調(diào)用Validation插件的方法：
$(function(){
var validate = $("#myform").validate({
rules:{ //定義驗證規(guī)則
......
},
messages:{ //定義提示信息
......
}
})
});
rules:定義驗證規(guī)則，key:value的形式，key是要驗證的元素,value可以是字符串或?qū)ο?。比如驗證用戶名的長度和不允許為空：
rules:{
user:{
required:true,
maxlength:16,
minlength:3
},
......
}
其實我們在XHTML代碼中可以直接指定input的class屬性為required，作用是不允許為空，這樣在JS部分就不用重復(fù)寫了。同樣的驗證email等，直接設(shè)置input的class屬性為email。
messages:定義提示信息，key:value的形式key是要驗證的元素,值是字符串或函數(shù)，當驗證不通過時提示的信息。
messages:{
user:{
required:"用戶名不能為空！",
remote:"該用戶名已存在，請換個其他的用戶名！"
},
......
}
本例中涉及的驗證JS就是按照上面的規(guī)則進行編寫的，Validation插件封裝了好多基本的驗證方式，如下：
required:true 必須有值，不能為空
remote:url 可以用于判斷用戶名等是否已經(jīng)存在,服務(wù)器端輸出true,表示驗證通過
minlength:6 最小長度為6
maxlength:16 最大長度為16
rangelength:長度范圍
range:[10,20] 數(shù)值范圍在10-20之間
email:true 驗證郵件
url:true 驗證URL網(wǎng)址
dateISO:true 驗證日期格式'yyyy-mm-dd'
digits:true 只能為數(shù)字
accept:'gif|jpg' 只接受gif或jpg為后綴的圖片。常用于驗證文件的擴展名
equalTo:'#pass' 與哪個表單字段的值相等，常用于驗證重復(fù)輸入密碼
此外，我還根據(jù)項目實際情況擴展了幾個驗證，驗證的代碼在validate-ex.js，使用前需要先加載這個JS。它能提供以下驗證：
userName:true 用戶名只能包括中文字、英文字母、數(shù)字和下劃線
isMobile:true 手機號碼驗證
isPhone:true 大陸手機號碼驗證
isZipCode:true 郵政編碼驗證
isIdCardNo:true 大陸身份證號碼驗證
ip:true IP地址驗證
以上提供的驗證方式基本上滿足我們在大多數(shù)項目中的需求。如果其他特殊驗證需求，可以擴展，方法如：
jQuery.validator.addMethod("isZipCode", function(value, element) {
var zip = /^[0-9]{6}$/;
return this.optional(element) || (zip.test(value));
}, "請正確填寫您的郵政編碼!");
疑難問題解決
1、在項目中遇到在驗證用戶名是否存在時，發(fā)現(xiàn)不支持中文輸入驗證。我的解決辦法是給用戶名進行encodeURIComponent編碼，后臺PHP再對接受的值進行urldecode解碼
user:{
remote: {
url: "chk_user.php", //服務(wù)端驗證程序
type: "post", //提交方式
data: { user: function() {
return encodeURIComponent($("#user").val()); //編碼數(shù)據(jù)
}}
}
},
服務(wù)端驗證程序chk_user.php的代碼：
<?php
$request = urldecode(trim($_POST['user']));
usleep(150000);
$users = array('daimajiayuan.com', 'jeymii', 'Peter', 'daimajiayuan');
$valid = 'true';
foreach($users as $user) {
if( strtolower($user) == $request )
$valid = 'false';
}
echo $valid;
?>
我使用的服務(wù)端程序是PHP，您也可以使用ASP，ASP.NET，JAVA等。此外本例為了演示，用戶名數(shù)據(jù)是直接寫在服務(wù)端的，真正的應(yīng)用是從數(shù)據(jù)庫里取出的用戶名數(shù)據(jù)，來和接收客戶端的數(shù)據(jù)進行對比。
2、在驗證checkbox和radio控件時，驗證信息不會出現(xiàn)在最后的控件文本后面，而是直接跟在第一個控件的后面，不符合我們的要求。
解決辦法是在validate({})追加以下代碼：
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo ( element.parent() );
else if ( element.is(":checkbox") )
error.appendTo ( element.parent() );
else if ( element.is("input[name=captcha]") )
error.appendTo ( element.parent() );
else
error.insertAfter(element);
}
3、重置表單。Form表單原始的重置方法是reset自帶
<input type="reset" value="重 置" />
點擊“重置”按鈕，表單元素將會重置，但是再運行Validation插件后，驗證的提示信息并沒重置，就是那些提示信息沒有消失。感謝Validation提供了重置表單的方法：resetForm()
$("input:reset").click(function(){
validate.resetForm();
});
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
- jquery validation插件表單驗證的一個例子
- Jquery Validation插件防止重復(fù)提交表單的解決方法
- jQuery Validation插件remote驗證方式的Bug解決
- JQuery的Validation插件中Remote驗證的中文問題
- jQuery Validation實例代碼 讓驗證變得如此容易
- ASP.NET jQuery 實例11 通過使用jQuery validation插件簡單實現(xiàn)用戶登錄頁面驗證功能
- ASP.NET jQuery 實例12 通過使用jQuery validation插件簡單實現(xiàn)用戶注冊頁面驗證功能
- ASP.NET jQuery 實例17 通過使用jQuery validation插件校驗ListBox
- ASP.NET jQuery 實例18 通過使用jQuery validation插件校驗DropDownList
- 修改jQuery Validation里默認的驗證方法
- ASP.NET中實現(xiàn)jQuery Validation-Engine的Ajax驗證
- jquery?validation驗證電話號碼,email(實例代碼)
- .NET驗證組件Fluent Validation使用指南
- jQuery驗證插件validation使用指南
- jquery插件validation實現(xiàn)驗證身份證號等
- 支持ASP.NET MVC、WebFroM的表單驗證框架ValidationSuar使用介紹
- 表單驗證插件Validation應(yīng)用的實例講解
相關(guān)文章
非常簡單的一句話即可實現(xiàn)，大家可以看看。2009-04-04
jQuery 調(diào)用WebService 實例講解
以前都是Web程序調(diào)用WebService，.net把WebService封裝的太簡單了，所以之前都是很膚淺的用，都沒有想過更深層的東西，并且只是停留在表面的添加引用和調(diào)用。2016-06-06
在aspx文件中使用一個RadioButtonList控件顯示兩個radio標簽。表示一對選中狀態(tài)：2013-04-04
利用jQuery彈出select選擇的值,當單擊按鈕的時候就會執(zhí)行的一個方法，它的作用就是alert select值2013-04-04
鼠標移到導(dǎo)航當前位置的LI變色處于選中狀態(tài)
本文所要實現(xiàn)的效果廣泛應(yīng)用于當前導(dǎo)航,主要表現(xiàn)為鼠標移到導(dǎo)航上面當前的LI變色，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
JQueryEasyUI框架下的combobox的取值和綁定的方法
這篇文章主要介紹了JQueryEasyUI框架下的combobox的取值和綁定的方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01
本文主要介紹了jquery實現(xiàn)頁面加載效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery事件委托代碼實踐詳解， 事件委托是利用事件冒泡，只指定一個事件處理程序來管理某一類型的所有事件。,需要的朋友可以參考下2019-06-06
jquery實現(xiàn)表格中點擊相應(yīng)行變色功能效果【實例代碼】
下面小編就為大家?guī)硪黄猨query實現(xiàn)表格中點擊相應(yīng)行變色功能效果【實例代碼】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05
本文主要介紹如何實現(xiàn)類似淘寶好評差評的效果，需要的小伙伴直接拿去用吧。2016-05-05