本文介绍一种健壮的前端表单验证方案，用于约束两个数字输入框：允许单个字段为 0，禁止两者同时为 0 或同时为空，并提供实时反馈与语义化错误提示。
本文介绍一种健壮的前端表单验证方案，用于约束两个数字输入框：允许单个字段为 0，禁止两者同时为 0 或同时为空，并提供实时反馈与语义化错误提示。
在构建业务表单（如建筑规范、安防配置等场景）时，常需对成对数值字段施加互斥逻辑约束：例如“开口数量”和“入口数量”，要求二者至少有一个有效值（非空且为合法数字），且不能同时为 0——即允许 0 和 5、3 和 0，但拒绝 0 和 0、空和空、空和 0、0 和空。
原始代码存在多个关键问题：
- 使用 == 0 混淆了空字符串 "" 与数字 0 的类型判断；
- trim() 对 无效（浏览器自动忽略前导/尾随空格）；
- 未区分“未填写”（空值）与“明确填 0”的语义；
- 缺少用户友好的错误反馈机制。
✅ 推荐采用基于 valueAsNumber 的验证策略，它天然支持 NaN 判断（空输入返回 NaN），语义清晰、无需字符串转换：
function isValidNumber(input) {
return !isNaN(input.valueAsNumber); // true: 有合法数字（含 0）；false: 空或非法字符
}
function isNonZero(input) {
return input.valueAsNumber !== 0; // true: 非零；false: 为 0 或 NaN（因 NaN !== 0 为 true，需前置校验）
}
核心验证逻辑如下：
function validateForm(form) {
const errors = {};
const openings = form.elements.NumberOfOpenings;
const entrances = form.elements.NumberOfEntrances;
// 规则1：不能都为空（即都无效）
if (!isValidNumber(openings) && !isValidNumber(entrances)) {
errors.NumberOfOpenings = 'Both fields cannot be empty.';
}
// 规则2：不能都为 0（注意：仅当两者均为有效数字时才比较）
if (isValidNumber(openings) && isValidNumber(entrances) &&
openings.valueAsNumber === 0 && entrances.valueAsNumber === 0) {
errors.NumberOfOpenings = 'At least one field must be non-zero.';
}
return errors;
}
完整实现包含：
- HTML 结构：使用 强制非空（配合 valueAsNumber）；
- CSS 样式：通过 .has-error 类动态高亮错误字段及显示 .error-message；
- 事件绑定：监听 submit 事件，阻止默认提交，执行验证并渲染错误；
- 可扩展性：错误信息对象支持多字段独立提示，便于后续添加更多规则。
⚠️ 注意事项：
- 不要依赖 value === "0" 或 value == 0，type="number" 的 value 始终是字符串，而 valueAsNumber 提供可靠数值语义；
- required 属性防止用户提交空值，但需配合 JS 验证覆盖粘贴/脚本修改等边界情况；
- 若需兼容旧浏览器（不支持 valueAsNumber），应降级为 parseFloat(value) 并显式检查 isNaN；
- 实际项目中建议将验证逻辑封装为可复用 Hook（React）或 Class（Vanilla）。
该方案兼顾准确性、可维护性与用户体验，是处理此类互斥数值约束的推荐实践。
