jQuery如何用正则表达式验证手机号、身份证号、中文名称

首先，需要引入 jQuery 库和 jQuery validate 插件代码库。jQuery validate 是一个优秀的表单验证插件，它提供了丰富的验证规则，包括正则表达式验证。

其次，在表单中定义手机号、身份证号、中文名称等需要验证的表单项，使用 HTML 标签即可。

例如，定义一个手机号码输入框如下：

<input type="text" name="phone" id="phone" placeholder="请输入手机号码">

然后，在 JavaScript 代码中使用 jQuery validate 插件添加验证规则。对于手机号码，可以通过在配置 validate 方法时添加 rules 和 messages 设置来完成验证。

代码示例：

$("#myForm").validate({
  rules: {
    phone: {
      required: true,
      minlength: 11,
      maxlength: 11,
      digits: true,
      customphone: true
    }
  },
  messages: {
    phone: {
      required: "请输入手机号码",
      minlength: "手机号码长度不能少于 11 位",
      maxlength: "手机号码长度不能大于 11 位",
      digits: "手机号码只能包含数字",
      customphone: "请输入正确的手机号码"
    }
  }
});

// 自定义手机号码验证方法
jQuery.validator.addMethod("customphone", function(value, element) {
  var length = value.length;
  var regPhone = /^1[3456789]\d{9}$/;
  return this.optional(element) || (length == 11 && regPhone.test(value));
}, "请输入正确的手机号码");

在这里，我们使用了自定义手机号码验证方法，该方法中使用正则表达式验证手机号码格式，正则表达式为 /^1[3456789]\d{9}$/。

针对其他需要验证的表单项，例如身份证号和中文名称，同样可以使用类似的方法进行验证。

示例代码：

// 身份证号码验证
jQuery.validator.addMethod("customidcard", function(value, element) {
  var regIdCard = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  return this.optional(element) || regIdCard.test(value);
}, "请输入正确的身份证号码");

// 中文名称验证
jQuery.validator.addMethod("customchinese", function(value, element) {
  var regChinese = /^[\u4e00-\u9fa5]+$/;
  return this.optional(element) || regChinese.test(value);
}, "请输入正确的中文名称");

完整代码实现如下：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery validate 插件实现表单验证</title>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery-validate/1.19.3/jquery.validate.min.js"></script>
</head>
<body>
  <form id="myForm">
    <div>
      <label for="phone">手机号码：</label>
      <input type="text" name="phone" id="phone" placeholder="请输入手机号码">
    </div>
    <div>
      <label for="idcard">身份证号码：</label>
      <input type="text" name="idcard" id="idcard" placeholder="请输入身份证号码">
    </div>
    <div>
      <label for="name">中文名称：</label>
      <input type="text" name="name" id="name" placeholder="请输入中文名称">
    </div>
    <button type="submit">提交</button>
  </form>

  <script>
    $(function() {
      $("#myForm").validate({
        rules: {
          phone: {
            required: true,
            minlength: 11,
            maxlength: 11,
            digits: true,
            customphone: true
          },
          idcard: {
            required: true,
            customidcard: true
          },
          name: {
            required: true,
            customchinese: true
          }
        },
        messages: {
          phone: {
            required: "请输入手机号码",
            minlength: "手机号码长度不能少于 11 位",
            maxlength: "手机号码长度不能大于 11 位",
            digits: "手机号码只能包含数字",
            customphone: "请输入正确的手机号码"
          },
          idcard: {
            required: "请输入身份证号码",
            customidcard: "请输入正确的身份证号码"
          },
          name: {
            required: "请输入中文名称",
            customchinese: "请输入正确的中文名称"
          }
        }
      });

      // 自定义手机号码验证方法
      jQuery.validator.addMethod("customphone", function(value, element) {
        var length = value.length;
        var regPhone = /^1[3456789]\d{9}$/;
        return this.optional(element) || (length == 11 && regPhone.test(value));
      }, "请输入正确的手机号码");

      // 身份证号码验证
      jQuery.validator.addMethod("customidcard", function(value, element) {
        var regIdCard = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        return this.optional(element) || regIdCard.test(value);
      }, "请输入正确的身份证号码");

      // 中文名称验证
      jQuery.validator.addMethod("customchinese", function(value, element) {
        var regChinese = /^[\u4e00-\u9fa5]+$/;
        return this.optional(element) || regChinese.test(value);
      }, "请输入正确的中文名称");
    });
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery如何用正则表达式验证手机号、身份证号、中文名称 - Python技术站

jQuery如何用正则表达式验证手机号、身份证号、中文名称

相关文章