首页
所有分类
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网页加载进度条的实现
Jun 01 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jquery插件懒加载的示例
Oct 24 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
Mint UI(1) exists(2) 相对路径(1) 远程桌面(2) 相对路径 (1) 慢日志(1) REST(1) cmd(1) Switch(1) mt-swipe(1)
You might like
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python自动化报告的输出用例详解
2018/05/30 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
大班亲子运动会方案
2014/06/10 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
学生检讨书
2015/01/27 职场文书
小学教师自我评价
2015/03/04 职场文书
七年级作文之游记
2019/12/11 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server
MySQL分布式恢复进阶
2022/07/23 MySQL