使用 jQuery 实现表单验证功能

下面是使用 jQuery 实现表单验证功能的完整攻略。

1. 添加表单验证的基本步骤

为了能够使用 jQuery 来完成表单验证功能，我们需要首先在页面中引入它的库文件。可以通过以下代码来实现：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

接下来我们需要定义需要验证的表单字段以及验证规则。例如，下面定义了一个用户名字段和一个密码字段，以及它们各自的验证规则：

<form>
  <label>用户名：<input type="text" id="username" name="username"></label>
  <label>密码：<input type="password" id="password" name="password"></label>
  <button type="button" id="submitBtn">提交</button>
</form>

// 设置验证规则
const rules = [
  {selector: '#username', required: true, message: '用户名不能为空'},
  {selector: '#password', required: true, message: '密码不能为空', minLength: 6, maxLength: 16}
];

代码可以简单理解为：通过选择器获取需要验证的表单字段，然后定义其对应的验证规则。例如上述代码中的第一条规则：选择器为 #username，表示选取 ID 为 username 的表单字段；required: true 表示该字段为必填字段，message 则表示该字段验证不通过时的提示信息。其他规则的含义请自行查看。

2. 实现表单验证的具体方法

一般来说，我们可以将验证规则分为两类：必填规则和其他规则。其中必填规则可以通过判断字段是否为空来实现，而其他规则则可以通过正则表达式来验证。

下面是一个完整的表单验证代码实例：

// 设置验证规则
const rules = [
  {selector: '#username', required: true, message: '用户名不能为空'},
  {selector: '#password', required: true, message: '密码不能为空', minLength: 6, maxLength: 16}
];

// 添加表单验证事件
$('#submitBtn').on('click', function() {
  let errors = [];  // 用于存放验证失败的提示信息
  for (let rule of rules) {
    const $field = $(rule.selector);  // 获取需要验证的表单字段
    if (rule.required) {  // 检查必填规则
      const value = $field.val().trim();
      if (!value) {
        errors.push(rule.message);
      }
    }
    if (rule.minLength || rule.maxLength) {  // 检查长度规则
      const value = $field.val().trim();
      const {minLength, maxLength} = rule;
      if (minLength && value.length < minLength) {
        errors.push(`${rule.message}，需至少为 ${minLength} 个字符`);
      }
      if (maxLength && value.length > maxLength) {
        errors.push(`${rule.message}，需不超过 ${maxLength} 个字符`);
      }
    }
    // 添加其他规则的判断，例如正则表达式等
  }
  if (errors.length === 0) {  // 表单验证通过，提交表单
    $('form').submit();
  } else {  // 表单验证失败，弹出提示信息
    alert(errors.join('\n'));
  }
});

这段代码的大致作用如下：

1. 获取需要验证的表单字段以及对应的验证规则；
2. 在按钮点击时，依次检查每个字段是否符合对应的验证规则，将验证失败的提示信息存放在 errors 数组中；
3. 最终根据 errors 数组的长度来判断表单验证是否通过，如果通过，则提交表单，否则弹出提示信息。

需要特别注意的是，验证规则中的选择器应该严格写法。例如，要想选取一个 name 属性为 username 的表单字段时，需要写成 selecter: '[name=username]'。

3. 示例说明

下面是两个示例说明。

示例一：检查密码是否符合正则表达式规则

假设我们的密码规则为：必须包含大小写字母、数字，且长度不少于 8 个字符。可以使用正则表达式来实现这个规则的检查。修改一下验证规则，使其能够检查密码是否符合正则表达式规则：

const rules = [
  {selector: '#username', required: true, message: '用户名不能为空'},
  {selector: '#password', required: true, message: '密码不能为空',
   pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{8,}$/}
];

其中 pattern 表示要匹配的正则表达式。在上述案例中，我们将正则表达式直接写在了规则中，也可以将其封装成一个单独的函数，方便复用。

示例二：检查两次输入的密码是否一致

假设我们的表单中还有一个密码确认字段，需要检查两次输入的密码是否一致。可以添加一个自定义规则，检查两个字段的值是否相同：

const rules = [
  {selector: '#username', required: true, message: '用户名不能为空'},
  {selector: '#password', required: true, message: '密码不能为空', minLength: 6},
  {selector: '#password-confirm', required: true, message: '请确认密码', validate: (value) => {
     const password = $('#password').val().trim();
     return value === password ? null : '两次输入的密码不一致';
   }
  }
];

其中 validate 表示自定义规则的验证方法。在上述案例中，我们定义了一个匿名函数 来实现验证逻辑。如果验证通过，函数返回 null，否则返回不符合要求的提示信息。

4. 总结

使用 jQuery 实现表单验证功能主要是依靠以下几个步骤：

1. 定义需要验证的表单字段以及验证规则。
2. 添加表单验证事件，检查每个字段是否符合对应的验证规则。
3. 如果所有字段都符合要求，则提交表单；否则弹出提示信息。在实际开发中，验证规则可能会比较复杂，需要事先做好规划和设计。