如何配置Yup.number().integer()将1.0识别为非整数？

JS 中 1.0 属于数值类型的整数，Number.isInteger(1.0) 会返回 true，所以单纯用 Yup.number().integer() 或基于 Number.isInteger 的自定义校验无法区分 1 和 1.0。要实现**拒绝带小数点的整数格式（如1.0、2.00）**的需求，需要同时检查输入的格式和数值有效性。

以下是两种可行的解决方案：

方案一：自定义test校验，同时检查格式与数值 #

通过 Yup.test() 同时验证输入字符串是否包含小数点，以及数值是否为有效整数：

const schema = Yup.object().shape({
  yourIntegerField: Yup.number()
    .test(
      'integer-format',
      '请输入整数（不能带小数点）',
      function(value) {
        // 处理空值（如需禁止空值可删除此判断，添加.required()）
        if (value === null || value === undefined) return true;
        
        const numValue = Number(value);
        // 排除非数字值
        if (isNaN(numValue)) return false;
        
        // 检查字符串形式是否包含小数点
        const strValue = String(value);
        if (strValue.includes('.')) return false;
        
        // 确保数值为整数
        return Number.isInteger(numValue);
      }
    )
});

方案二：先验证字符串格式，再转换为数字 #

如果表单输入的原始值是字符串，可先通过正则匹配整数格式，再转换为数字类型：

const schema = Yup.object().shape({
  yourIntegerField: Yup.string()
    // 正则匹配正负整数，禁止小数点
    .matches(/^-?\d+$/, '请输入整数（不能带小数点）')
    // 将合法字符串转换为数字
    .transform((val) => val ? Number(val) : null)
    // 如需禁止空值，添加.required()
    .nullable()
});

说明 #

• 方案一适用于输入值可能是数字或字符串的场景，通过字符串格式检查拦截带小数点的输入；
• 方案二更适用于表单输入为字符串的场景，从源头拦截不符合格式的内容，再转换为后端需要的数字类型。

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