jQuery validate插件实现ajax验证重复的2种方法
更新时间：2016年01月22日 09:24:45 作者：张映
这篇文章主要介绍了jQuery validate插件实现ajax验证重复的2种方法,结合完整实例形式分析了jQuery validate插件的使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法。分享给大家供大家参考，具体如下：
jquery validate 经过这种多年的改良，已经很完善了。它能满足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程序设计有所帮助。
相关文章
大家在逛淘宝的时候，把鼠标放在宝贝上就会放大，奇怪这种效果怎么实现的，下面小编就给大家分享基于jquery实现放大镜效果，有需要的朋友可以参考下2015-08-08
本文给大家分享jQuey将序列化对象在前台显示地的几种方式，非常不错，具有参考借鉴价值，需要的朋友一起看看吧2016-12-12
jquery提示效果有很多，本文也提供一个超漂亮的仿腾讯弹出层效果，热爱特效的你可千万不要错过了啊，希望本文提供的案例对你学习jquery特效有所帮助2013-02-02
在这篇指南中,我们将探讨如何使用jQuery获取第二个子元素集合,如果你正在寻找一种简单的方法来快速获取一个元素的第二个子元素,那么你来对地方了！跟着我们的步骤,你将很快成为一个jQuery专家,需要的朋友可以参考下2023-12-12
JQuery跨Iframe选择实现,下面也通过用DOM方法与jquery方法结合的方式实现了，需要的朋友可以参考下。2010-08-08
jQuery 3.0在日前发布了最终的全新版本。这篇文章主要介绍了jQuery 3.0十大新特性最终版发布的相关资料,需要的朋友可以参考下2016-07-07
本文的目的是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了jQuery表单选择器用法以及相关知识点内容，有兴趣的朋友们可以学习下。2019-08-08
一个利用jquery写的左右轮播图，将jquery框架的链接跟图片替换就可以看到效果了,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了利用jQuery轻松实现单选功能的相关资料,需要的朋友可以参考下2023-11-11
最新评论