表单验证逻辑应抽离为纯函数或独立方法，避免耦合DOM和UI状态，确保可测试性；如邮箱校验写成isValidEmail(email)函数，支持Node.js/Jest直接断言；复合规则用可组合验证器，如required、minLength、email等；表单类如FormValidator也应仅处理数据、返回结果，不操作DOM；单元测试专注输入输出，不测DOM操作本身。
直接对表单验证逻辑写单元测试，关键是把验证规则抽离成纯函数或独立方法，避免耦合 DOM 操作和 UI 状态。这样测试才干净、可重复、不依赖浏览器环境。
把验证逻辑封装成独立函数
不要在事件回调里写一堆 if 判断。比如邮箱校验，应写成：
function isValidEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
这样就能直接在 Node.js 或 Jest 环境中调用并断言：
expect(isValidEmail('test@example.com')).toBe(true)expect(isValidEmail('invalid-email')).toBe(false)expect(isValidEmail('')).toBe(false)
为复合规则写可组合的验证器
多个字段、多条规则（如“密码需 8 位以上且含数字”）适合用函数组合或配置驱动方式。例如：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const validators = {
required: (v) => v && v.trim() !== '',
minLength: (min) => (v) => typeof v === 'string' && v.length >= min,
email: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v),
};
function validateField(value, rules) {
for (const rule of rules) {
const result = rule(value);
if (result !== true) return result; // 可返回错误消息字符串
}
return true;
}
测试时可分别验证每个规则，也可组合测试：
expect(validateField('abc', [validators.minLength(5)])).toBe(false)expect(validateField('hello123@x.com', [validators.email, validators.minLength(6)])).toBe(true)
测试带状态的表单类（非纯函数）
如果用了类封装表单（如 class FormValidator），确保它的方法不操作 DOM，只处理数据和返回结果：
class FormValidator {
constructor(rules) { this.rules = rules; }
validate(formData) {
const errors = {};
Object.entries(this.rules).forEach(([key, ruleList]) => {
const value = formData[key];
const error = validateField(value, ruleList);
if (error !== true) errors[key] = error;
});
return errors;
}
}
测试它只需传入模拟数据：
const validator = new FormValidator({ email: [validators.email], password: [validators.minLength(8)] });expect(validator.validate({ email: 'a', password: '123' })).toEqual({ email: 'invalid', password: 'too short' });
避免测试 DOM 操作本身（除非必要）
点击按钮、聚焦输入框、触发 blur 这类行为属于集成或 E2E 范畴。单元测试专注“给定输入 → 得到预期输出”。若真要测事件绑定逻辑，可用 JSDOM 模拟简单 DOM，但优先保证核心验证函数 100% 覆盖。
不复杂但容易忽略：只要验证逻辑不读 document、不调 getElementById、不改 input.value，它就天然适合单元测试。
