当在formik的field组件中使用type="number"时，原生的html min和max属性可能无法提供健壮的客户端校验。本教程将演示如何在formik应用中，利用强大的yup schema验证库，为数字输入框有效地实现范围校验，从而确保数据完整性并提升用户体验。
在使用Formik构建表单时，我们经常会遇到需要对数字输入框进行范围限制的场景，例如要求用户输入的年龄介于18到65岁之间，或者百分比值在0到100之间。虽然HTML 元素提供了原生的min和max属性来限制输入范围，但这些属性主要在浏览器层面提供视觉提示和基础的验证，其行为可能因浏览器而异，并且容易被用户绕过。为了在Formik应用中实现更一致、健壮且用户友好的客户端验证，我们应该利用Formik强大的验证生态系统，特别是结合像Yup这样的验证库。
为什么不完全依赖HTML min和max属性？
HTML的min和max属性在上确实能提供一些初步的限制：
- 视觉提示： 某些浏览器会在输入框旁边显示增减按钮，并根据min/max限制其操作。
- 浏览器验证： 当用户尝试提交一个超出范围的值时，浏览器可能会阻止提交并显示默认错误信息。
然而，这些限制存在局限性：
- 一致性问题： 不同浏览器对这些属性的实现和错误提示可能不一致。
- 易于绕过： 用户可以通过开发者工具轻松修改或移除这些属性，或者直接输入非法值。
- 用户体验： 默认的浏览器错误提示通常不够友好和定制化，难以与应用的整体UI风格保持一致。
- Formik集成： 在Formik的上下文环境中，我们更希望将验证逻辑集中管理，以便于状态跟踪和错误消息的统一展示。
因此，为了实现可靠的客户端验证，推荐使用Formik的validationSchema或Field组件的validate prop。
使用Yup实现数字范围校验
Yup是一个流行的JavaScript schema验证库，它与Formik完美集成，提供了一种声明式的方式来定义数据结构和验证规则。对于数字类型的输入，Yup提供了.number()方法，并结合.min()和.max()方法来定义范围约束。
1. 安装Yup
首先，确保你的项目中已安装Yup：
npm install yup # 或 yarn add yup
2. 定义验证Schema
创建一个Yup schema，其中包含对数字字段的验证规则。例如，我们希望一个名为percentage的字段其值介于0到100之间：
import * as Yup from 'yup';
const MyValidationSchema = Yup.object().shape({
// 假设我们有一个名为 'percentage' 的数字字段
percentage: Yup.number()
.typeError('请输入一个有效的数字') // 当输入非数字时显示
.min(0, '百分比不能小于0') // 最小值校验，并提供自定义错误信息
.max(100, '百分比不能大于100') // 最大值校验，并提供自定义错误信息
.required('百分比是必填项'), // 必填校验
// 如果有其他字段，可以在这里添加它们的验证规则
// 例如：firstName: Yup.string().required('姓名为必填项'),
});- .number(): 声明该字段应为数字类型。
- .typeError(message): 当输入值无法被解析为数字时触发，显示指定的错误信息。
- .min(value, message): 确保数字不小于指定值。
- .max(value, message): 确保数字不大于指定值。
- .required(message): 确保字段不为空。
3. 将Schema集成到Formik中
在你的Formik组件中，通过validationSchema prop传入你定义的Yup schema。Formik会自动处理字段值的验证，并在errors和touched对象中提供验证结果。
完整示例代码:
以下是一个结合Formik和Yup实现数字范围校验的完整示例：
import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
// 定义验证Schema
const ItemValidationSchema = Yup.object().shape({
// 假设我们正在验证一个数组中的某个项，例如 itemsAndServices[index].percentage
// 为了简化示例，我们直接验证一个名为 'percentage' 的字段
// 如果是嵌套结构，Yup支持类似 'itemsAndServices[0].percentage' 这样的路径
percentage: Yup.number()
.typeError('请输入一个有效的数字')
.min(0, '百分比不能小于0')
.max(100, '百分比不能大于100')
.required('百分比是必填项'),
itemName: Yup.string().required('项目名称是必填项'),
});
const NumberRangeValidationForm = () => (
数字范围校验示例
{
// 模拟异步提交
setTimeout(() => {
alert('提交成功！\n' + JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ errors, touched, isSubmitting }) => (
)}
);
export default NumberRangeValidationForm;在这个示例中，当用户输入一个不在0到100范围内的数字，或者输入非数字字符时，Formik会根据Yup Schema显示相应的错误信息。
Field组件的validate Prop (替代方案)
除了使用全局的validationSchema，Formik的Field组件也支持一个validate prop。这个prop接受一个函数，该函数会接收字段的值作为参数，并返回一个错误字符串（如果有错误）或undefined（如果没有错误）。
这种方法适用于特定字段的简单、独立的验证逻辑，而无需构建整个Yup schema。例如：
import React from 'react';
import { Formik, Form, Field } from 'formik';
// 在Formik组件内部或外部定义验证函数
const validatePercentage = value => {
let error;
if (value === undefined || value === null || value === '') {
error = '百分比是必填项';
} else if (isNaN(Number(value))) { // 确保转换为数字进行判断
error = '请输入一个有效的数字';
} else if (Number(value) < 0) {
error = '百分比不能小于0';
} else if (Number(value) > 100) {
error = '百分比不能大于100';
}
return error;
};
const FieldValidatePropExample = () => (
{
alert(JSON.stringify(values, null, 2));
}}
>
{({ errors, touched }) => (
