jQuery validate插件實現(xiàn)ajax驗證重復的2種方法
更新時間：2016年01月22日 09:24:45 作者：張映
這篇文章主要介紹了jQuery validate插件實現(xiàn)ajax驗證重復的2種方法,結合完整實例形式分析了jQuery validate插件的使用技巧,需要的朋友可以參考下
本文實例講述了jQuery validate插件實現(xiàn)ajax驗證重復的2種方法。分享給大家供大家參考，具體如下：
jquery validate 經(jīng)過這種多年的改良，已經(jīng)很完善了。它能滿足80%的驗證需要，如果validate自帶的功能，不能滿足我們需求，它提供了addMethod來擴展功能。下面就舉個小例子來說明一下addMethod的用法。
完整demo實例代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>jquery validate ajax check exist</title>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
jQuery.validator.addMethod("phonecheck", function(value, element) {
string = value.match(/0(\d{2,2})-(\d{7,7})/ig);
if(string != null){
return true;
}else{
return false;
}
}, "telphone number like 021-1234567");
jQuery.validator.addMethod("phonesame", function(value, element) {
var flag = 1;
$.ajax({
type:"POST",
url:'tel.php',
async:false,
data:{'tel':value},
success: function(msg){
if(msg == 'yes'){
flag = 0;
}
}
});
if(flag == 0){
return false;
}else{
return true;
}
}, "sorry number have been exist");
$("#myform").validate({
errorPlacement: function(error, element) {
error.insertAfter(element);
},
rules:{
username:{
required:true,
remote:{
url:"tel.php",
type:"post",
dataType:"html",
data:{
username:function(){return $("#username").val();}
},
dataFilter: function(data, type) {
if (data == "yes")
return true;
else
return false;
}
}
},
telphone:{
required:true,
rangelength:[11,11],
phonecheck:true,
phonesame:true
}
},
messages:{
telphone:{
required:"Please enter your phone",
rangelength:"phone must be 11 numbers"
},
username:{
required:"Please enter your username",
remote:"the username have been exist"
}
},
debug:true
})
});
</script>
</head>
<body style="margin-left:500px;margin-top:100px;">
<div style="font-size:24px;">021-1234567 or tank exist</div><br>
<form id="myform" method="post">
<label>Your telphone</label>
<input name="telphone" class="required" value="" /><br><br>
<label>Your username</label>
<input name="username" id="username" class="required" value="" />
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
在這里推薦大家使用jquery validate，用熟了，很方便。
更多關于jQuery插件相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
首先還是感謝下 妙味課堂 錄制的這一個日歷聯(lián)動的視頻，正好整理下，方便需要的朋友2012-05-05
基于jQuery的網(wǎng)頁右下角彈出廣告(IE7,firefox)
以前曾寫過一個,不過太麻煩了,呵呵```現(xiàn)在改進了一下,其實很簡單:css定位層一直在右下角,用js控制層的高度增減。2010-08-08
javascript（基于jQuery）實現(xiàn)鼠標獲取選中的文字示例【測試可用】
這篇文章主要介紹了javascript（基于jQuery）實現(xiàn)鼠標獲取選中的文字,涉及jQuery響應鼠標事件及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-10-10
這篇文章主要為大家介紹了jQuery一鍵移除使項目脫離對它的依賴使用方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要介紹了jQuery中replaceAll()方法用法,實例分析了replaceAll()方法的功能、定義及匹配元素去替換指定內容的方法,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了jQuery樹插件zTree的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
用jQuery做網(wǎng)頁換膚確實是很一個很巧妙，很好的選擇，這是本人在學習jQuery中學的知識，感覺很有用，寫了下來，希望大家有更好的方法或者代碼不足的地方請諒解，本人也是初學者啊，希望大家互相勉勵互相學習。2011-04-04
本篇文章主要是對JQuery中操作Css樣式的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery實現(xiàn)頁碼跳轉式動態(tài)數(shù)據(jù)分頁
本片文章教給大家用jQuery實現(xiàn)頁碼跳轉式動態(tài)數(shù)據(jù)分頁，效果非常好而且沒有頁面刷新，需要的朋友學習下吧。2017-12-12
jquery操作checkbox火狐下第二次無法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無法勾選問題的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10