未通过验证时阻止表单提交:权重表单的验证需求与代码完善
完善权重表单的验证逻辑
我来帮你补全这个权重验证函数,把缺失的权重大于0和总和严格等于100的检查补上。先看修改后的完整代码,再一步步拆解优化点:
function assertWeightValidity() { let weightSum = 0; $.each($('[name^=weight_]'), function() { const currWeight = Number(this.value); // 验证条件1:必须是有效数字(排除NaN、Infinity这类非法值) chai.assert(!isNaN(currWeight) && isFinite(currWeight), `权重「${this.value}」不是有效数字!`); // 验证条件2:权重必须大于0(不能是0或负数) chai.assert(currWeight > 0, `权重不能为0或负数,当前输入值:${this.value}`); weightSum += currWeight; }); // 验证条件3:所有权重之和必须等于100 // 考虑JavaScript浮点数精度问题,用极小容差判断避免误判(比如0.1+0.2≠0.3的情况) chai.assert(Math.abs(weightSum - 100) < 0.0001, `权重总和应为100,当前计算总和:${weightSum.toFixed(2)}`); console.log('所有权重验证通过!总和为:', weightSum); } // 绑定回车触发验证的逻辑(补全你提到的onEnterCalcul部分) $(document).on('keypress', '[name^=weight_]', function(e) { if (e.which === 13) { try { assertWeightValidity(); // 这里插入你的计算逻辑 console.log('开始执行计算...'); } catch (err) { console.error('验证失败:', err.message); // 可以在这里添加错误提示给用户,比如alert(err.message) } } });
核心优化说明:
- 补全条件2验证:新增了
currWeight > 0的断言,同时加上具体输入值的错误提示,方便用户快速定位问题输入框。 - 完善条件3验证:原来的代码只打印了总和,没有做等于100的校验。这里用浮点数容差判断,避免因为JavaScript的精度问题(比如多个小数权重相加后出现99.99999999999999)导致误判。
- 优化数字合法性检查:原来的
isNaN(this.value)存在漏洞(比如空字符串、"Infinity"会被Number转为NaN/Infinity),改成!isNaN(currWeight) && isFinite(currWeight),确保输入是有效的有限数字。 - 增加错误捕获:在回车触发逻辑里加了try-catch,避免单个验证失败导致后续代码完全无法执行,同时可以友好提示用户错误原因。
额外实用建议:
如果是表单提交场景,建议在表单提交事件中调用验证函数,失败时阻止提交:
$('form').on('submit', function(e) { try { assertWeightValidity(); } catch (err) { alert('权重验证失败:' + err.message); e.preventDefault(); // 阻止表单提交 return false; } });
内容的提问来源于stack exchange,提问作者naz
相关产品推荐
相关产品推荐

