jQuery validate插件實現(xiàn)ajax驗證重復(fù)的2種方法
本文實例講述了jQuery validate插件實現(xiàn)ajax驗證重復(fù)的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,用熟了,很方便。
更多關(guān)于jQuery插件相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery在vs2008及js文件中的無智能提示的解決方法
我通過下面方法實現(xiàn)了jQuery在VS2008及js文件中的智能提示的,希望對朋友們有所幫助。2010-12-12
使用jQuery在移動頁面上添加按鈕和給按鈕添加圖標(biāo)
這篇文章主要介紹了使用jQuery在移動頁面上增加按鈕和給按鈕添加圖標(biāo)的方法,用到了針對移動開發(fā)的jQuery mobile庫,需要的朋友可以參考下2015-12-12
jquery動態(tài)增加text元素以及刪除文本內(nèi)容實例代碼
這段代碼是通過jquery動態(tài)增加限定數(shù)額的text,以及清除文本內(nèi)容,用到了after()方法追加元素,具體實現(xiàn)如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07
jQuery實現(xiàn)點擊某個div打開層,點擊其他div關(guān)閉層實例分析(阻止冒泡)
這篇文章主要介紹了jQuery實現(xiàn)點擊某個div打開層,點擊其他div關(guān)閉層的方法,結(jié)合實例形式分析了jQuery兩種阻止冒泡實現(xiàn)彈出層的處理技巧,需要的朋友可以參考下2016-11-11
jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02

