本文解决 input type="number" 在 yup 表单验证中无法同时处理“非数字输入”和“空值必填”两类错误的问题，通过 yup.mixed().test() 实现灵活、准确的双条件校验。
本文解决 input type="number" 在 yup 表单验证中无法同时处理“非数字输入”和“空值必填”两类错误的问题，通过 yup.mixed().test() 实现灵活、准确的双条件校验。
在使用 HTML <input type="number"> 时，用户虽被浏览器限制输入非数字字符（如字母），但仍可清空输入框（提交空字符串 ""），或通过粘贴、开发者工具等方式传入非法值（如 "abc"、"12a"）。此时若直接使用 yup.number() 验证，会因空字符串或无效字符串无法转换为 JavaScript 数字而优先触发 .typeError()，导致 .required() 消息永远无法显示——这正是你遇到“始终只显示 only numbers allowed”的根本原因。
yup.number() 要求值必须是严格意义上的 number 类型（如 42, 0, -3.14），而空字符串 ""、null、undefined 或 " " 均不满足该类型约束，因此 .required() 的逻辑甚至不会执行。
✅ 正确解法是：放弃强类型预过滤，改用 yup.mixed() 接收任意原始值，再通过自定义 .test() 显式区分三类情况：
- 值为空（"", null, undefined）→ 触发“必填”错误
- 值为非空但非有效数字（如 "abc", "12a", " ") → 触发“仅数字”错误
- 值为有效数字字符串（如 "42", "0.5"）或数字 → 允许通过（可选：进一步转为数字并校验范围）
以下是生产就绪的验证 Schema 示例：
import * as yup from 'yup';
const schema = yup.object().shape({
fieldName: yup
.mixed()
.test(
'is-number-or-required',
'Only numbers allowed or value is required', // 统一错误消息（或按需拆分）
(value) => {
// 1. 允许空值进入 required 校验环节（不在此处报错）
if (value === '' || value == null || value === undefined) {
return true;
}
// 2. 尝试转换为数字；isNaN() 对非字符串/数字类型返回 true，故先 toString()
const num = Number(value);
// 3. 仅当转换后为有效数字（且非 NaN、Infinity）才视为合法
return !isNaN(num) && isFinite(num);
}
)
.required('Value is required') // ✅ 现在 required 可正常生效
.typeError('Only numbers allowed') // 仅当 mixed() 接收到非数字类型时触发
.min(0, 'Value must be at least 0'), // 可继续链式添加数值约束
});⚠️ 关键注意事项：
- 不要依赖 yup.number().required() 处理空字符串——它本质是类型校验，不是语义校验；
- .test() 中应使用 Number(value) + isNaN() + isFinite() 组合判断，比 !isNaN(value) 更健壮（后者对 "123abc" 也返回 true）；
- 若需在表单提交前自动将字符串数字转为 number 类型，可在 transform 中处理（需配合 nullable(false)）；
- 浏览器原生 type="number" 的 valueAsNumber 属性在空时返回 NaN，建议在 React/Vue 等框架中统一用 onChange 捕获并规范化值（如空值设为 ""，非法值设为 null），再交由 Yup 验证。
通过 mixed().test().required() 的组合，你既能保留类型安全的提示粒度，又能实现符合业务语义的双重错误反馈，让表单体验更专业、更可控。
