js手写表单验证框架

class FormValidator {
  constructor(formId) {
    this.form = document.getElementById(formId);
    this.inputs = this.form.querySelectorAll('input, textarea, select');
    this.init();
  }

  init() {
    this.inputs.forEach(input => {
      input.addEventListener('blur', () => this.validateInput(input));
    });
    this.form.addEventListener('submit', (e) => this.validateForm(e));
  }

  validateInput(input) {
    const rules = input.dataset.rules.split('|');
    for (let rule of rules) {
      const [ruleName, param] = rule.split(':');
      if (!this[ruleName](input.value, param)) {
        input.classList.add('error');
        return false;
      }
    }
    input.classList.remove('error');
    return true;
  }

  validateForm(e) {
    let isValid = true;
    this.inputs.forEach(input => {
      if (!this.validateInput(input)) {
        isValid = false;
      }
    });
    if (!isValid) {
      e.preventDefault();
    }
  }

  required(value) {
    return value.trim() !== '';
  }

  email(value) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(value);
  }

  minLength(value, length) {
    return value.length >= parseInt(length);
  }
}

// 使用示例
document.addEventListener('DOMContentLoaded', () => {
  new FormValidator('myForm');
});