怎样开发一个表单验证插件_JavaScript表单验证插件开发完整指南

class FormValidator {
  constructor(formElement, rules) {
    this.form = formElement;
    this.rules = rules;
    this.errors = {};
    this.init();
  }

  init() {
    // 绑定提交事件
    this.form.addEventListener('submit', (e) => {
      e.preventDefault();
      this.validateAll();
    });

    // 可选：为每个输入框绑定blur事件进行实时验证
    const fields = this.form.querySelectorAll('[name]');
    fields.forEach(field => {
      field.addEventListener('blur', () => {
        this.validateField(field);
      });
    });
  }

  validateAll() {
    this.errors = {};
    let isValid = true;

    for (const fieldName in this.rules) {
      const field = this.form.querySelector(`[name="${fieldName}"]`);
      if (field) {
        const value = field.value.trim();
        const fieldRules = this.rules[fieldName];
        const result = this.runValidation(value, fieldRules, field);

        if (!result.valid) {
          this.errors[fieldName] = result.message;
          isValid = false;
        }
      }
    }

    this.renderErrors();
    return isValid;
  }

  validateField(field) {
    const fieldName = field.name;
    if (!this.rules[fieldName]) return;

    const value = field.value.trim();
    const rules = this.rules[fieldName];
    const result = this.runValidation(value, rules, field);

    if (!result.valid) {
      this.errors[fieldName] = result.message;
    } else {
      delete this.errors[fieldName];
    }

    this.renderErrors();
  }

  runValidation(value, rules, field) {
    for (const rule of rules) {
      const { validator, message, param } = rule;

      // 支持内置和自定义验证器
      let isValid;
      if (typeof validator === 'function') {
        isValid = validator(value, param, field);
      } else {
        isValid = this.builtInValidators[validator]?.(value, param);
      }

      if (!isValid) {
        return { valid: false, message };
      }
    }
    return { valid: true };
  }

  renderErrors() {
    // 清除之前的错误提示
    this.form.querySelectorAll('.error-message').forEach(el => el.remove());

    // 显示新的错误
    for (const field in this.errors) {
      const input = this.form.querySelector(`[name="${field}"]`);
      const msgEl = document.createElement('div');
      msgEl.className = 'error-message';
      msgEl.style.color = 'red';
      msgEl.innerText = this.errors[field];
      input.parentNode.appendChild(msgEl);
    }
  }

  builtInValidators = {
    required(value) {
      return value !== '' && value != null && value.length > 0;
    },
    email(value) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(value);
    },
    min(value, length) {
      return value.length >= length;
    },
    max(value, length) {
      return value.length <= length;
    },
    phone(value) {
      const re = /^1[3-9]\d{9}$/;
      return re.test(value);
    }
  };
}

const form = document.getElementById('myForm');
const validator = new FormValidator(form, {
  username: [
    { validator: 'required', message: '用户名不能为空' },
    { validator: 'min', param: 3, message: '用户名至少3个字符' }
  ],
  email: [
    { validator: 'required', message: '邮箱不能为空' },
    { validator: 'email', message: '请输入有效的邮箱地址' }
  ],
  phone: [
    { validator: 'phone', message: '请输入正确的手机号' }
  ]
});

FormValidator.addValidator = function(name, fn, defaultMessage) {
  FormValidator.prototype.builtInValidators[name] = fn;
};

FormValidator.addValidator('passwordStrong', function(value) {
  return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(value);
}, '密码必须包含大小写字母、数字，且不少于8位');

// 然后在规则中使用：
password: [
  { validator: 'required', message: '密码不能为空' },
  { validator: 'passwordStrong', message: '密码强度不足' }
]

this.form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
for (const field in this.errors) {
  const input = this.form.querySelector(`[name="${field}"]`);
  input.classList.add('is-invalid');
}