jquery validation验证身份证号,护照,电话号码,email(实例代码)

下面是“jquery validation验证身份证号,护照,电话号码,email”的完整攻略：

1. 引入jQuery和jQuery Validation插件

首先需要引入jQuery和jQuery Validation插件的js文件和css文件：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入jQuery Validation插件的js和css文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.css"/>

2. 创建表单并设置验证规则

在HTML中，创建表单并设置每个需要验证的输入框的规则，例如：

<form id="myForm">
  <label for="id_card">身份证号码：</label>
  <input type="text" id="id_card" name="id_card">

  <br>

  <label for="passport">护照号码：</label>
  <input type="text" id="passport" name="passport">

  <br>

  <label for="phone">电话号码：</label>
  <input type="text" id="phone" name="phone">

  <br>

  <label for="email">邮箱地址：</label>
  <input type="text" id="email" name="email">

  <br>

  <button type="submit">提交</button>
</form>

接着，在JavaScript中设置验证规则，例如：

$(function() {
  // 验证规则
  $("#myForm").validate({
    rules: {
      // 身份证号码
      id_card: {
        required: true,
        isIdCardNo: true
      },
      // 护照号码
      passport: {
        required: true,
        isPassport: true
      },
      // 电话号码
      phone: {
        required: true,
        isPhone: true
      },
      // 邮箱地址
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      // 错误提示信息
      id_card: {
        required: "请输入身份证号码",
        isIdCardNo: "请输入正确的身份证号码"
      },
      passport: {
        required: "请输入护照号码",
        isPassport: "请输入正确的护照号码"
      },
      phone: {
        required: "请输入电话号码",
        isPhone: "请输入正确的电话号码"
      },
      email: {
        required: "请输入邮箱地址",
        email: "请输入正确的邮箱地址"
      }
    }
  });
});

注意：上述代码中rules和messages分别为设置规则和错误提示的对象。

3. 自定义验证方法

为了验证身份证号码、护照号码和电话号码，需要自定义验证方法，例如：

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

$.validator.addMethod("isPassport", function(value, element) {
   var pattern = /^[a-zA-Z0-9]{5,17}$/;
   return this.optional(element) || pattern.test(value);
}, "请输入正确的护照号码");

$.validator.addMethod("isPhone", function(value, element) {
  var pattern = /^1[3456789]\d{9}$/;
  return this.optional(element) || pattern.test(value);
}, "请输入正确的电话号码");

4. 示例说明

示例1

假设输入的身份证号码为“123456789012345678”，那么就会出现以下错误提示信息：“请输入正确的身份证号码。”

示例2

假设输入的电话号码为“1234567890”，那么就会出现以下错误提示信息：“请输入正确的电话号码。”

完整的实例代码及在线演示可以查看下面的链接：
- 代码：https://codepen.io/shadowsmith/pen/abvRqJd
- 在线演示：https://codepen.io/shadowsmith/full/abvRqJd