直接绑定 oninput 会导致事件重复绑定、状态不同步等问题；应采用 customevent 实现观察者模式，由 input 发布 field-change 事件，校验器等各自独立订阅响应，配合防抖、命名空间、结构化 detail 和统一状态中心（map）实现解耦与可靠校验。
为什么直接绑定 oninput 会失控
表单校验一加动态反馈，立刻出现事件重复绑定、状态不同步、校验逻辑和 UI 更新混在一起的问题。观察者模式不是为了炫技，是把「谁该响应变化」和「变化发生在哪里」拆开——input 元素只负责发出值变更通知，校验器、提示组件、提交按钮状态管理器各自订阅，互不感知对方存在。
用 CustomEvent 实现轻量级 Subject
不用框架、不引入第三方库，浏览器原生 CustomEvent 就够用。关键不是“造轮子”，而是控制通知的粒度和时机：
-
dispatchEvent必须在值真正变化后触发（比如防抖后的input或blur），避免高频误触发 - 事件名建议带命名空间，如
form:field-change，防止和其他自定义事件冲突 - 事件 detail 必须包含字段名和当前值：
{ field: 'email', value: 'a@b' }，订阅方靠这个做条件响应
const input = document.querySelector('#email');
input.addEventListener('input', debounce(() => {
input.dispatchEvent(new CustomEvent('form:field-change', {
detail: { field: 'email', value: input.value }
}));
}, 300));
多个 Observer 怎么避免互相干扰
一个字段可能同时触发格式校验、必填检查、远程唯一性验证——它们必须独立运行、各自更新 UI，不能因为某个校验器卡住就阻塞其他反馈：
- 每个 Observer 用单独的
addEventListener订阅同一事件，不要集中在一个 handler 里 if-else 分发 - 异步校验（如 fetch）必须有超时和错误兜底，失败时仍要 dispatch
form:field-validate并传{ valid: false, message: '网络异常' } - UI 更新只读取自身关心的字段状态，不依赖其他 Observer 的执行顺序或结果
document.addEventListener('form:field-change', ({ detail }) => {
if (detail.field !== 'email') return;
validateEmail(detail.value).then(valid => {
document.querySelector('.email-error').textContent = valid ? '' : '邮箱格式错误';
});
});
表单提交前如何聚合所有校验状态
提交按钮禁用状态不能靠监听每个字段事件临时拼凑，必须有统一的状态中心。最简方案是维护一个 Map，键为字段名，值为当前校验结果对象：
- 每次校验完成（无论成功失败）都调用
updateFieldStatus(field, { valid, message }) - 提交前遍历
Map.values()，只要有一个valid === false就阻止提交 - 不要在 Map 里存 DOM 引用，只存纯数据；DOM 更新由对应 Observer 负责
容易被忽略的是：用户手动修改了字段但没触发校验事件（比如粘贴后没失焦），这时 Map 状态已过期。解决方法是在 submit 事件里对所有 dirty 字段强制触发一次校验，而不是直接读缓存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
