用JavaScript实现自定义表单验证教程

实现一个支持自定义规则的表单验证库，关键在于设计灵活的规则注册机制、清晰的数据校验流程以及可扩展的错误反馈系统。下面是一个轻量但功能完整的实现思路与代码示例。

支持自定义规则的验证核心

验证库的核心是规则管理。每个规则应包含名称、校验逻辑和错误提示。通过注册机制让用户添加或覆盖规则。

以下是一个基础结构：

class Validator {
  constructor() {
    this.rules = {};
  }

  // 注册新规则
  addRule(name, validator, message) {
    this.rules[name] = { validator, message };
  }

  // 验证单个值
  validate(value, rules) {
    const errors = [];
    for (const [ruleName, param] of Object.entries(rules)) {
      const rule = this.rules[ruleName];
      if (!rule) continue;
      const isValid = typeof rule.validator === 'function'
        ? rule.validator(value, param)
        : false;
      if (!isValid) {
        errors.push(rule.message.replace('{0}', param));
      }
    }
    return errors.length > 0 ? errors : null;
  }
}

内置常用规则与使用方式

提供一些常用规则能提升可用性。比如必填、最小长度、最大长度、正则匹配等。

示例：

const validator = new Validator();

// 添加内置规则
validator.addRule('required', (value) => value != null && value.toString().trim() !== '', '此项为必填');
validator.addRule('minLength', (value, min) => value.toString().length >= min, '最少需要 {0} 个字符');
validator.addRule('maxLength', (value, max) => value.toString().length  new RegExp(regex).test(value), '格式不正确');

// 使用示例
const errors = validator.validate('abc', {
  required: true,
  minLength: 5,
  pattern: '^\\w+$'
});
console.log(errors); // ["最少需要 5 个字符"]

集成到表单元素（DOM 绑定）

让库能直接绑定 HTML 表单，提升实用性。可以通过 data 属性定义规则。

HTML 示例：

<form id="myForm">
  &lt;input type=&quot;text&quot; 
         name=&quot;username&quot; 
         data-rules=&apos;{&quot;required&quot;:true,&quot;minLength&quot;:6}&apos; 
         placeholder=&quot;用户名至少6位&quot; /&gt;
  <span class="error" data-for="username"></span>

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

JavaScript 绑定：

function bindForm(formElement, validator) {
  formElement.addEventListener('submit', function (e) {
    e.preventDefault();
    let hasError = false;

    // 清除旧错误
    formElement.querySelectorAll('.error').forEach(el => el.textContent = '');

    Array.from(formElement.elements).forEach(input => {
      if (!input.name) return;

      const rulesAttr = input.getAttribute('data-rules');
      if (!rulesAttr) return;

      const rules = JSON.parse(rulesAttr);
      const value = input.value;
      const errors = validator.validate(value, rules);

      if (errors) {
        hasError = true;
        const errorEl = formElement.querySelector(`.error[data-for="${input.name}"]`);
        if (errorEl) errorEl.textContent = errors[0];
      }
    });

    if (!hasError) {
      console.log('表单验证通过');
      // 提交逻辑
    }
  });
}

// 启用表单验证
bindForm(document.getElementById('myForm'), validator);

扩展性与异步验证支持

未来可扩展异步规则，如检查用户名是否已存在。

例如：

validator.addRule('uniqueUsername', async (value) => {
  const res = await fetch(`/api/check-username?name=${value}`);
  return await res.json().then(data => !data.exists);
}, '该用户名已被占用');

此时需调整 validate 方法支持异步，返回 Promise。

基本上就这些。这个结构足够灵活，既能快速上手，也能根据项目需求不断扩展规则和交互方式。