本文介绍如何使用 Yup 库对 HTML 字段实现精准的双重校验——既检测空值（显示“value is required”），又识别非法字符（显示“only numbers allowed”），解决 yup.number().required().typeError() 无法区分空字符串与无效数字的常见问题。
本文介绍如何使用 yup 库对 html `` 字段实现精准的双重校验——既检测空值（显示“value is required”），又识别非法字符（显示“only numbers allowed”），解决 `yup.number().required().typeerror()` 无法区分空字符串与无效数字的常见问题。
在表单验证中， 看似只接受数字，但实际用户仍可通过手动清空、粘贴文本或禁用 JS 等方式提交空字符串（""）或非法值（如 "abc"、"12a"）。此时若直接使用 yup.number().required("value is required").typeError("only numbers allowed")，Yup 会将空字符串和所有非数字值统一视为类型错误（typeError），导致“value is required”提示永远无法触发——因为 required() 校验在 typeError 之前已被跳过。
根本原因在于：yup.number() 严格要求值为 JavaScript number 类型（如 42、0），而空字符串 ""、null 或 " " 均无法被 Number() 安全转换为有效数字，因此直接抛出类型错误，required() 不再执行。
✅ 正确解法是放弃强类型约束，改用 yup.mixed() + 自定义 test()，分层判断：
- 先允许任意类型输入（mixed()）；
- 再通过 test() 显式区分：空值 → 触发必填校验；非空但非数字 → 触发格式校验。
以下是完整、可运行的验证 Schema 示例：
import * as yup from 'yup';
const schema = yup.object().shape({
fieldName: yup
.mixed() // ✅ 接收 string/number/null/undefined 等任意类型
.test(
'is-number-or-required',
'Only numbers allowed or value is required', // 统一错误消息（也可按需拆分为两个 test）
(value) => {
// 情况1：值为空（undefined / null / "" / " "）→ 视为未填写，交由 required() 处理
if (value == null || String(value).trim() === '') {
return true; // 让 required() 决定是否报错
}
// 情况2：尝试转换为数字
const num = Number(value);
// 仅当转换后为有效数字且非 NaN 时才通过
return !isNaN(num) && isFinite(num);
}
)
.required('value is required') // ✅ 现在 required 能正确生效
.typeError('only numbers allowed') // ⚠️ 注意：typeError 仅在 mixed() 下对非 number 类型触发（如 object/array），此处建议配合 test 使用更可控
});
? 关键注意事项：
- yup.mixed().required() 会将 ""、null、undefined 视为缺失值并触发 required 错误；而 yup.number().required() 在遇到 "" 时会先失败于类型转换，required 不生效。
- 若需更精细控制（如分别提示“value is required”和“only numbers allowed”），可拆分为两个独立 test()，或结合 when() 动态切换错误消息。
- 实际项目中，建议搭配 transform() 预处理（如 transform((v) => v === '' ? undefined : Number(v))），但需注意 transform 不影响原始值，仅作用于验证流程内部。
最终，该方案确保：用户清空输入 → 显示“value is required”；输入 "xyz" → 显示“only numbers allowed”；输入 "12.5" 或 42 → 顺利通过。
