重量范围校验逻辑异常：输入合法数值仍触发错误提示求助

问题根源 #

你遇到的错误是因为输入框的值是字符串类型，直接用字符串做大小比较会遵循字符ASCII码的规则，而非数字大小规则。比如输入最小重量2、最大重量10时，字符串"2"会被判定为大于"10"，触发错误提示。

原代码问题 #

你的校验逻辑直接进行了字符串比较：

if (input.weightMin > input.weightMax) {
  errors.weightMax = "最大重量应大于最小重量";
}

修复步骤 #

1. 转换为数字后再比较 #

将输入值转为数字类型，再执行大小判断，同时处理空值或非数字的情况：

// 转换为数字，空值/非数字默认设为0，可根据需求调整
const minWeight = Number(input.weightMin) || 0;
const maxWeight = Number(input.weightMax) || 0;

if (minWeight > maxWeight) {
  errors.weightMax = "最大重量应大于最小重量";
}

2. 优化输入框类型（可选） #

把输入框的type改为number，强制用户输入数字，同时简化后续类型处理：

<div className={d.contfilt}>
  <label>最小重量:</label>
  <input
    className={d.inp}
    type="number"
    value={input.weightMin}
    name="weightMin"
    onChange={handleChange}
    placeholder="Kg"
    min="0"
  />
  {errors.weightMin && <p className={d.error}>{errors.weightMin}</p>}
</div>
<div className={d.contfilt}>
  <label>最大重量:</label>
  <input
    className={d.inp}
    type="number"
    value={input.weightMax}
    name="weightMax"
    onChange={handleChange}
    placeholder="Kg"
    min="0"
  />
  {errors.weightMax && <p className={d.error}>{errors.weightMax}</p>}
</div>

3. 处理空输入场景（可选） #

如果允许用户不输入重量值，可先判断输入是否为有效数字再校验：

const minWeight = Number(input.weightMin);
const maxWeight = Number(input.weightMax);

// 仅当两个值都是有效数字时，才执行大小校验
if (!isNaN(minWeight) && !isNaN(maxWeight) && minWeight > maxWeight) {
  errors.weightMax = "最大重量应大于最小重量";
}

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