1. 架构设计与目标
1.1 需求与目标
本篇文章聚焦的主题是 JavaScript表单验证技巧：用自定义类实现字段状态的精确控制，旨在通过将字段状态与展示逻辑分离，获得更清晰的验证流程和更易维护的实现路径。字段状态在此框架中不仅仅表示正确与错误，而是描述字段从未修改到已提交之间的完整演化过程，方便后续联动提示与样式同步。
通过这套设计，我们希望实现的核心目标包括精确的状态跟踪、一致的 UI 表现、以及可扩展的验证规则，以应对多字段表单和异步校验场景。
1.2 字段状态模型要点
一个清晰的字段状态模型通常包含诸如 pristine、dirty、valid、invalid、validating 等状态，帮助开发者快速判断当前字段的生命周期阶段。状态机般的设计使得你可以在任意时刻对字段的 UI 提示、错误信息以及可提交性做出一致的响应。
在该模型下，状态的变化不仅影响样式，还会驱动错误信息的呈现、禁用提交按钮、以及与服务器端校验的联动行为，进而提升整体用户体验。
2. 自定义类的核心实现
2.1 FieldState 类设计
为实现字段级别的精确控制，我们引入一个名为 FieldState 的自定义类来封装单个输入的状态逻辑，这个类提供了对字段的验证、状态更新以及 UI 同步的能力。通过将验证规则绑定到对象实例，可以实现高度可维护的字段状态管理。
核心方法包括 validate、setStatus、addError、以及 clearErrors，能够在任意时刻重新评估字段并及时更新 UI。
class FieldState {constructor(input, validators = []) {this.input = input;this.validators = validators;this.status = 'pristine'; // pristine, dirty, validating, valid, invalidthis.errors = [];}// 运行所有验证器， acumulate errorsvalidate() {this.status = 'validating';this.errors = [];for (const validator of this.validators) {const result = validator(this.input.value);if (result !== true) {this.errors.push(result);}}if (this.errors.length > 0) {this.status = 'invalid';} else {this.status = 'valid';}this.updateUI();return this.status;}setStatus(status) {this.status = status;this.updateUI();}addError(error) {this.errors.push(error);this.setStatus('invalid');}clearErrors() {this.errors = [];this.setStatus(this.input.value ? 'valid' : 'pristine');}updateUI() {// 将状态映射到样式与无障碍属性const isValid = this.status === 'valid';this.input.classList.toggle('is-valid', isValid);this.input.classList.toggle('is-invalid', this.status === 'invalid');this.input.setAttribute('aria-invalid', this.status === 'invalid');// 简单的错误提示区可在外部处理}
}
2.2 FormController 的职责
在
该控制器的主要职责包括 字段注册、事件绑定、以及 批量验证与聚合错误信息，从而确保在提交前每个字段都处在合法状态。
class FormController {constructor(form) {this.form = form;this.fields = [];}// 注册一个字段及其验证器register(input, validators = []) {const field = new FieldState(input, validators);this.fields.push(field);// 常见 UX 行为：用户离开时触发验证，输入时视情况重新验证input.addEventListener('blur', () => field.validate());input.addEventListener('input', () => {if (field.status !== 'pristine') field.validate();});return field;}// 验证所有字段，返回通过/未通过结果validateAll() {const results = this.fields.map(f => f.validate());// 如果需要，可聚合错误信息返回return results;}// 提交前的最终校验，若全部通过再执行提交逻辑canSubmit() {this.validateAll();return this.fields.every(f => f.status === 'valid');}
}
3. 与 DOM 的绑定与工作流
3.1 事件驱动验证
在实际应用中，表单字段的验证应尽量以事件驱动的方式进行，以实现即时反馈并避免重复计算。blur事件是入口点，因为它标志用户完成某项输入；input事件用于实时性较强的场景，但需要配合节流策略以防止高频触发。
为避免布局抖动或性能问题，我们通常在触发验证时更新 aria-invalid、错误提示区域 的可及性内容，并确保样式的改变是最小化的。
// 绑定示例（伪代码，使用前面定义的 FormController 与 validators）
const formEl = document.getElementById('contactForm');
const formCtrl = new FormController(formEl);const emailInput = document.getElementById('email');
formCtrl.register(emailInput, [v => v.trim() ? true : 'Email is required',v => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(v) ? true : 'Enter a valid email'
]);const nameInput = document.getElementById('name');
formCtrl.register(nameInput, [v => v.trim().length >= 2 ? true : 'Name must be at least 2 characters'
]);
3.2 与服务器端验证的联动
在需要服务器端校验（如邮箱唯一性）的场景中，可以将 FieldState 的 validating 状态与异步请求结果整合，保持用户界面的一致性。异步验证完成后，及时调用 updateUI，以确保错误信息与样式与实际结果相符。
为可访问性考虑，任何异步错误都应通过 aria-live 区域呈现，避免屏幕阅读器无法读到状态变化的情况。
// 异步验证示例（伪代码）
async function asyncEmailCheck(value) {const res = await fetch('/api/validate-email', { method: 'POST', body: JSON.stringify({ email: value }) });const data = await res.json();return data.valid ? true : data.message || 'Email is invalid';
}// 将异步验证整合到 FieldState
emailInput.validators.push(async (v) => {this.status = 'validating';const result = await asyncEmailCheck(v);if (result !== true) return result;return true;
});
4. 示例与测试用例
4.1 HTML 结构与数据属性
良好的 HTML 结构应具备明确的标签层级、可识别的 id 与 name、以及无障碍友好的描述。将校验信息与 UI 状态绑定到字段的 data-validators 或直接在 JS 中注册，可以实现更清晰的分离与扩展。aria-invalid 与 aria-describedby 能帮助辅助技术正确理解当前字段状态。
4.2 使用示例与联动效果
下面的示例展示如何将上述 FieldState 与 HTML 结构结合，形成一个可交互、可测试的表单。通过集中注册和统一验证，实现字段之间的联动提示与提交控制。
// 初始化并注册字段
const formEl = document.getElementById('contactForm');
const formCtrl = new FormController(formEl);formCtrl.register(document.getElementById('email'), [v => v.trim() ? true : 'Email is required',v => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(v) ? true : 'Enter a valid email'
]);formCtrl.register(document.getElementById('name'), [v => v.trim().length >= 2 ? true : 'Name must be at least 2 characters'
]);// 提交处理
formEl.addEventListener('submit', (e) => {if (!formCtrl.canSubmit()) {e.preventDefault();// 额外的提示逻辑}
});
5. 性能与无障碍
5.1 性能优化要点
在实现表单验证时，避免对同一字段进行重复校验，尽量利用 事件代理 和 按需验证 策略。合理的节流与去抖可以提升输入密集场景的响应性，同时确保 视觉反馈 与 无障碍提示 不被延迟。
通过将验证码逻辑外置为独立的可复用组件，代码复用性 与 测试覆盖率 将显著提升，降低后续维护成本。
5.2 无障碍与浏览器兼容性
无障碍要求应贯穿整个实现，确保屏幕阅读器能在字段状态变化时读出正确的提示信息。aria-live、aria-invalid 与清晰的错误描述区域是实现的关键。此外，考虑不同浏览器对表单控件的差异，保持最低限度的自定义行为，以避免兼容性问题。
最终，采用自定义类实现字段状态的精确控制的方案，应在设计阶段就把无障碍与性能作为并重的目标来对待，确保可维护性和用户体验同时提升。
