首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery Validate格式验证功能实例代码（包括重名验证）

Posted in jQuery onJuly 18, 2017

引入jQuery-1.7.1.js和jquery.validate.js两个js文件

jquery.validate.js下载地址：http://xiazai.3water.com/201703/yuanma/jquery.validate.rar

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <title></title>  
  <script src="Scripts/jquery-1.7.1.js"></script>  
  <script src="Scripts/jquery.validate.js"></script>  
  <script>  
    $().ready(function () {  
      ///自定义ajax验证  
      jQuery.validator.addMethod("ExistsCompany", function (value, element) {  //用jquery ajax的方法验证电话是不是已存在   
        var flag = 1;  
        $.ajax({  
          type: "POST",  
          url: '/CustomerMonkey/ExistsCompanyAction',  
          async: false,  
          data: {  
            'name': value, "monkeyid": GetQueryString("monkeyid"), "customerid": function () {  
              return $("#hidCustomerID").val();  
            }  
          },  
          success: function (data) {  
            if (data.result == "TRUE") {  
              flag = 0;  
            }  
            else if (data.result == "NO") {  
              compaymsg = "Name does not exist";  
            }  
          }  
        });  
        if (flag == 0) {  
          return true;  
        } else {  
          return false;  
        }  
      }, compaymsg);  
      $("#form1").validate({  
        rules: {  
          txtUserName:  
          {  
            required: true,  
            minlength: 6,  
            rangelength: [6, 20],      //长度5-10之间  
            remote: {  
              url: "/admin/CheckName",  //后台处理程序  
              type: "post",        //数据发送方式  
              dataType: "json",      //接受数据格式  
              data: {           //要传递的数据  
                name: function () {  
                  return $("#txtUserName").val();  
                }  
              }  
            },  
            ExistsCompany: true,  
          },  
          txtPassword: {  
            required: true,  
            minlength: 6,  
            rangelength: [6, 20],  //长度5-10之间  
            password: true,  
          },  
          txtPwd: {  
            required: true,  
            equalTo: "#txtPassword",  
            minlength: 6,  
            rangelength: [5, 20],  //长度5-10之间  
            password: true,  
          },  
          txtDisplayName: {  
            required: true,  
            minlength: 6,  
            rangelength: [6, 20],  //长度5-10之间  
          },  
          txtAge: {  
            required: true,  
            digits: true,  
            min: 1,  
            max: 100  
          },  
          sex: {  
            required: true,  
          },  
          txtCard: {  
            required: true,  
            creditcard: true,  
          },  
          txtidcard: {  
            required: true,  
            idcard: true,  
          },  
          txtEmail: {  
            required: true,  
            email: true,  
          },  
          txtTel: {  
            required: true,  
            phone: true,  
          },  
          txtQQ: {  
            required: true,  
            qq: true,  
          },  
          txtUrl: {  
            required: true,  
            url: true,  
          },  
          txtZipCode: {  
            required: true,  
            zipcode: true  
          },  
          txtDate: {  
            required: true,  
            date: true,  
          },  
          txtISO: {  
            required: true,  
            dateISO: true,  
          },  
          filFile: {  
            required: true,  
            filetype: ["mp3", "wma", "wav"]  
          }  
        },  
        messages: {  
          txtUserName: {  
            required: "请输入登录名",  
            minlength: jQuery.format("登录名不能小于{0}个字符"),  
            rangelength: "长度必须介于{0} 和 {1} 之间的字符串",  
            remote: "登录名已存在",  
          },  
          txtPassword: {  
            required: "请输入密码",  
            minlength: jQuery.format("密码不能小于{0}个字符"),  
            rangelength: "长度必须介于{0} 和 {1} 之间的字符串",  
            password: "密码只能是数字、字母与下划线"  
          },  
          txtPwd: {  
            required: "请输入确认密码",  
            minlength: "确认密码不能小于5个字符",  
            rangelength: "长度必须介于{0} 和 {1} 之间的字符串",  
            equalTo: "两次输入密码不一致不一致",  
            password: "密码只能是数字、字母与下划线"  
          },  
          txtDisplayName: {  
            required: "请输入用户名",  
            minlength: jQuery.format("密码不能小于{0}个字符"),  
            rangelength: "长度必须介于{0} 和 {1} 之间的字符串",  
          },  
          txtAge: {  
            required: "请输入年龄",  
            digits: "只能输入数字",  
            min: "最小值是1",  
            max: "最大值是100"  
          },  
          sex: {  
            required: "请选择性别",  
          },  
          txtCard: {  
            required: "请输入信用卡",  
            creditcard: "请输入信用卡",  
          },  
          txtidcard: {  
            required: "请输入身份证号",  
            idcard: "身份证号格式不正确",  
          },  
          txtEmail: {  
            required: "请输入邮箱",  
            email: "邮箱格式不正确",  
          },  
          txtTel: {  
            required: "请输入手机",  
            phone: "手机格式不正确"  
          },  
          txtQQ: {  
            required: "请输入QQ",  
            qq: "qq格式不正确",  
          },  
          txtUrl: {  
            required: "请输入网址",  
            url: "请输入正确的网址",  
          },  
          txtZipCode: {  
            required: "请输入邮编",  
            zipcode: "邮编格式不正确"  
          },  
          txtDate: {  
            required: "请输入时间",  
            date: "日期格式不正确",  
          },  
          txtISO: {  
            required: "请输入ISO",  
            dateISO: "ISO格式错误"  
          },  
          filFile: {  
            required: "请选择文件",  
            filetype: "只能上传MP3,WMA,WAV格式文件",  
          }  
        },  
        submitHandler: function (form) {  
          //避免重复提交数据  
          $(form).find(":submit").attr("disabled", true);  
          form.submit();  
        },  
        //指定错误信息位置  
        errorPlacement: function (error, element) {  
          if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox  
            var eid = element.attr('name');           //获取元素的name属性  
            error.appendTo(element.parent());          //将错误信息添加当前元素的父结点后面  
          } else {  
            error.insertAfter(element);  
          }  
        },  
      });  
    });  
  </script>  
</head>  
<body>  
  <form id="form1" runat="server">  
    <div>  
      <p>  
        <label>登录名：</label>  
        <input id="txtUserName" name="txtUserName" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>密码：</label>  
        <input id="txtPassword" name="txtPassword" class="sf" type="password" value="" />  
      </p>  
      <p>  
        <label>确认密码：</label>  
        <input id="txtPwd" name="txtPwd" type="password" value="" class="sf" />  
      </p>  
      <p>  
        <label>用户名：</label>  
        <input id="txtDisplayName" name="txtDisplayName" class="mf" type="text" value="" />  
      </p>  
      <p>  
        <label>年龄：</label>  
        <input id="txtAge" name="txtAge" class="mf" type="text" value="" />  
      </p>  
      <p>  
        <label>性别：</label>  
        <input id="Radio1" type="radio" value="" name="sex" />男<input id="Radio2" type="radio" value="" name="sex" />女  
      </p>  
      <p>  
        <label>信用卡：</label>  
        <input id="txtCard" name="txtCard" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>身份证：</label>  
        <input id="txtidcard" name="txtidcard" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>邮箱：</label>  
        <input id="txtEmail" name="txtEmail" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>手机：</label>  
        <input id="txtTel" name="txtTel" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>QQ：</label>  
        <input id="txtQQ" name="txtQQ" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>网址：</label>  
        <input id="txtUrl" name="txtUrl" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>邮编：</label>  
        <input id="txtZipCode" name="txtZipCode" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>时间：</label>  
        <input id="txtDate" name="txtDate" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>ISO：</label>  
        <input id="txtISO" name="txtISO" class="sf" type="text" value="" />  
      </p>  
      <p>  
        <label>文件：</label>  
        <input id="filFile" name="filFile" type="file" />  
      </p>  
    </div>  
    <input id="Submit1" type="submit" value="submit" />  
  </form>  
</body>  
</html>  
 
password: function (value, element) {  
      return this.optional(element) || /^\w+$/.test(value);  
    },  
    address: function (value, element) {  
      return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9\s]+$/.test(value);  
    },  
    ///固定电话123-85611111 或 0311-8561111  
    phone: function (value, element) {  
      return this.optional(element) || /^\d{3}-\d{8}$|\d{4}-\d{7}$/.test(value);  
    },  
    ///13866666666  
    telphone: function (value, element) {  
      return this.optional(element) || /^(\+86)|(86)?1[3,5,8]{1}[0-9]{1}[0-9]{8}$/.test(value)  
    },  
    mobilephone: function (value, element) {  
      return this.optional(element) || /^\d{3}-\d{8}$|\d3\d{8}$|\d{4}-\d{7}$|\d4\d{7}$|1[358]\d{9}$/.test(value);  
    },  
    //身份证号  
    idcard: function (value, element) {  
      return this.optional(element) || /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);  
    },  
    ///上传文件格式验证  
    filetype: function (value, element, param) {  
      var fileType = value.substring(value.lastIndexOf(".") + 1).toLowerCase();  
      return this.optional(element) || $.inArray(fileType, param) != -1;  
    },

总结

以上所述是小编给大家介绍的jQuery Validate格式验证实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

jQuery Validate格式验证功能实例代码（包括重名验证）

- Author -

igFishisBig

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现本地存储
Dec 22 jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
jQuery remove()过滤被删除的元素（推荐）
Jul 18 #jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 #jQuery
jQuery常用选择器详解
Jul 17 #jQuery
requests(1) 面向对象(3) hmac(1) 解密(1) 相对路径 (1) Mint UI(1) 相对路径(1) 加密(1) hashlib(1) openpyxl(1)
You might like
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP getName()函数讲解
2019/02/03 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python多进程机制实例详解
2015/07/02 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python实现搜索算法的实例代码
2020/01/02 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
Farfetch香港官网：汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
市优秀教师事迹材料
2014/02/05 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
投资建议书模板
2014/05/12 职场文书
个人年底工作总结
2015/03/10 职场文书
电影地道战观后感
2015/06/04 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript