表单校验的几种写法

网上关于这个的资料不少，但很多都只讲原理不给代码。这里补一个完整的可运行示例，亲测有效。

先搞清楚原理

要理解表单校验，先得搞清楚渲染性能优化这个机制。直接看代码比看文字描述来得快：

class EventBus {
  constructor() { this.events = new Map(); }
  on(event, callback) {
    if (!this.events.has(event)) this.events.set(event, []);
    this.events.get(event).push(callback);
    return () => this.off(event, callback);
  }
  off(event, callback) {
    const callbacks = this.events.get(event);
    if (callbacks) this.events.set(event, callbacks.filter(cb => cb !== callback));
  }
  emit(event, ...args) {
    const callbacks = this.events.get(event);
    if (callbacks) callbacks.forEach(cb => cb(...args));
  }
}

const bus = new EventBus();
bus.on('data', (d) => console.log('收到:', d));
bus.emit('data', { id: 33 });

实际怎么用

实际用的时候有几个注意点。首先是配置问题，不同环境参数可能不一样。其次是性能，数据量大的时候要注意兼容性处理。看这段实际运行的代码：

class StorageManager {
  #storage = window.localStorage;
  #prefix = 'app_40';

  get(key, defaultValue = null) {
    const raw = this.#storage.getItem(`${this.#prefix}:${key}`);
    if (raw === null) return defaultValue;
    try { return JSON.parse(raw); } catch { return raw; }
  }

  set(key, value) {
    this.#storage.setItem(`${this.#prefix}:${key}`, JSON.stringify(value));
  }

  remove(key) { this.#storage.removeItem(`${this.#prefix}:${key}`); }

  clear() {
    Object.keys(this.#storage)
      .filter(k => k.startsWith(`${this.#prefix}:`))
      .forEach(k => this.#storage.removeItem(k));
  }
}

进阶一点的用法

有些场景下表单校验的常规写法不够用，需要做兼容性处理。这个改动涉及的地方不多，但要注意顺序：

容易踩的坑

踩坑经验分享：表单校验在渲染性能优化方面有几个暗坑。最常见的是参数默认值不符合预期，其次是并发场景下的竞态条件。建议加上防御性检查。

写在最后

表单校验这块先整理到这里。兼容性处理是最重要的部分，务必理解透彻。如果遇到问题，先检查配置和版本，大部分报错都是这两个原因。