首页
所有分类
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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
Jquery获取radio选中的值
May 05 jQuery
jquery仿微信聊天界面
May 06 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
详解jQuery-each()方法
Mar 13 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery实现评论模块
Aug 19 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
太阳码(1) ant design(2) Word(2) pdf(1) 弹窗(1) 延时任务(1) cypress(1) JDBC(3) Eclipse(1) openGauss(1)
You might like
PHP排序算法的复习和总结
2012/02/15 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
Javascript的闭包详解
2014/12/26 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python的命名规则知识点总结
2019/10/04 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
几款好用的python工具库(小结)
2020/10/20 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
在购买印度民族服饰：Soch
2020/09/15 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
简历自我评价怎么写好呢？
2014/01/04 职场文书
学前班评语大全
2014/05/04 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
领导干部考核评语
2015/01/04 职场文书
服务员岗位职责范本
2015/04/09 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
Oracle 多表查询基本语法实例
2022/04/18 Oracle