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 相关文章推荐
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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
PHP+javascript模拟Matrix画面
2006/10/09 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
html读出文本文件内容
2007/01/22 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
vue项目实战总结篇
2018/02/11 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
5种Python单例模式的实现方式
2016/01/14 Python
Python简单实现控制电脑的方法
2018/01/22 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
2014年手术室工作总结
2014/11/26 职场文书
事业单位考察材料范文
2014/12/25 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
python实现求纯色彩图像的边框
2021/04/08 Python
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers