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

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

jquery.validate.js下载地址：http://xiazai.jb51.net/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格式验证实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！