jQuery validate插件实现ajax验证重复的2种方法


Posted in Javascript onJanuary 22, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 #Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 #Javascript
jQuery解析json格式数据简单实例
Jan 22 #Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 #Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 #Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 #Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 #Javascript
You might like
关于js与php互相传值的介绍
2013/06/25 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
python3实现绘制二维点图
2019/12/04 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
python实时监控logstash日志代码
2020/04/27 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
求职信的最佳写作思路
2014/02/01 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
学校运动会广播稿
2014/10/11 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
新员工入职欢迎词
2015/01/23 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python
MongoDB数据库之添删改查
2022/04/26 MongoDB