jQuery Validation的GreaterThanEqual规则输入值大于9时无法正常生效问题

问题根源 #

你使用的greaterThanEqual自定义验证规则默认按照字符串字典序对比数值，而非数字的实际大小：

• 输入≤9的数值时，字符串首字符和数字大小逻辑一致，比如"9" > "7"判断结果为真，验证正常
• 输入≥10的数值时，字符串首位为1，比高度（height）字段的最大允许值7的首字符字典序更小，"10" < "7"的字符串判断结果为真，因此触发错误提示。

解决方案 #

在你现有验证规则的代码之前，重写greaterThanEqual验证方法，强制将对比值转为数字类型后再判断大小即可：

$.validator.addMethod("greaterThanEqual", function(value, element, param) {
  const targetVal = parseFloat($(param).val());
  const currentVal = parseFloat(value);
  // 兼容目标字段未填写的场景，避免出现NaN判断错误
  if (isNaN(targetVal)) return true;
  return currentVal >= targetVal;
}, $.validator.format("输入值必须大于等于{0}对应字段的数值"));

注意事项 #

• 上述代码需要放在你定义rules的代码之前加载，确保验证方法先完成注册
• 如果你的表单仅允许输入整数，把parseFloat替换为parseInt即可
• 原有HTML结构、验证规则配置不需要做其他修改

内容的提问来源于stack exchange，提问作者Manny