Formik数字输入框的范围校验：深入理解与Yup实践_技术教程

当在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 }) => (
        
          
            项目名称
            
            {errors.itemName && touched.itemName ? (
              {errors.itemName}
            ) : null}
          

          
            百分比 (0-100)
            
            {/* 显示验证错误信息 */}
            {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) < 0) {
    error = '百分比不能小于0';
  } else if (Number(value) > 100) {
    error = '百分比不能大于100';
  }
  return error;
};

const FieldValidatePropExample = () => (
   {
      alert(JSON.stringify(values, null, 2));
    }}
  >
    {({ errors, touched }) => (
      
        百分比 (0-100)
        <