当在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';// 定义验证Schemaconst 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 }) => ( {errors.itemName && touched.itemName ? ( {errors.itemName} ) : null} {/* 显示验证错误信息 */} {errors.percentage && touched.percentage ? ( {errors.percentage} ) : null} )} );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) 100) { error = '百分比不能大于100'; } return error;};const FieldValidatePropExample = () => ( { alert(JSON.stringify(values, null, 2)); }} > {({ errors, touched }) => ( <
以上就是Formik数字输入框的范围校验：深入理解与Yup实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597174.html
微信扫一扫 
支付宝扫一扫 
