首页
所有分类
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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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
HAM-2000(1) 开幕词(63) 观后感(479) 导游词(322) 慰问信(53) 通知(159) 申请书(21) 文书(291) 实用文书(952) 闭幕词(9)
You might like
我的php学习笔记(毕业设计)
2012/02/21 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
js动态生成Html元素实现Post操作（createElement）
2015/09/14 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python+django实现文件下载
2016/01/17 Python
Python算法应用实战之队列详解
2017/02/04 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python多线程扫描端口代码示例
2018/02/09 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python实现贪吃蛇游戏
2020/03/21 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
美国一家著名的儿童鞋制造商：Stride Rite
2017/01/02 全球购物
请介绍一下Ant
2016/07/22 面试题
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
采购主管的岗位职责
2013/12/17 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
个人买房协议书范本
2014/10/06 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android