Formik中数字输入字段的范围验证实践

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import './App.css'; // 假设你有一个包含基础样式的CSS文件

// 定义Yup验证Schema
const validationSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, '名字太短，至少需要2个字符！')
    .max(50, '名字太长，最多50个字符！')
    .required('名字是必填项'),
  lastName: Yup.string()
    .min(2, '姓氏太短，至少需要2个字符！')
    .max(50, '姓氏太长，最多50个字符！')
    .required('姓氏是必填项'),
  email: Yup.string().email('请输入一个有效的邮箱地址').required('邮箱是必填项'),
  // 针对数字字段的min/max验证
  percentage: Yup.number()
    .min(0, '百分比不能小于0')
    .max(100, '百分比不能大于100')
    .required('百分比是必填项')
    .typeError('请输入一个有效的数字') // 当输入非数字时显示此错误
});

export const NumberFieldValidationExample = () => (
  <div className="form-container">
    <h1>用户注册与百分比设置</h1>
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
        percentage: 50, // 为数字字段设置一个初始值
      }}
      validationSchema={validationSchema} // 将Yup Schema传递给Formik
      onSubmit={values => {
        // 表单提交逻辑，只有当所有字段都通过验证时才会执行
        console.log('表单提交成功，值:', values);
        alert('提交成功!\n' + JSON.stringify(values, null, 2));
      }}
    >
      {({ errors, touched }) => (
        <Form className="form">
          <div className="form-group">
            <label htmlFor="firstName">名:</label>
            <Field name="firstName" id="firstName" className="form-control" />
            {errors.firstName && touched.firstName ? (
              <div className="error-message">{errors.firstName}</div>
            ) : null}
          </div>

          <div className="form-group">
            <label htmlFor="lastName">姓:</label>
            <Field name="lastName" id="lastName" className="form-control" />
            {errors.lastName && touched.lastName ? (
              <div className="error-message">{errors.lastName}</div>
            ) : null}
          </div>

          <div className="form-group">
            <label htmlFor="email">邮箱:</label>
            <Field name="email" type="email" id="email" className="form-control" />
            {errors.email && touched.email ? (
              <div className="error-message">{errors.email}</div>
            ) : null}
          </div>

          <div className="form-group">
            <label htmlFor="percentage">百分比 (0-100):</label>
            <Field name="percentage" type="number" id="percentage" className="form-control" />
            {errors.percentage && touched.percentage ? (
              <div className="error-message">{errors.percentage}</div>
            ) : null}
          </div>

          <button type="submit" className="submit-button">提交</button>
        </Form>
      )}
    </Formik>
  </div>
);

/* App.css */
.form-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-control {
  width: calc(100% - 20px);
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.form-control:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.error-message {
  color: #dc3545;
  font-size: 14px;
  margin-top: 5px;
}

.submit-button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 20px;
}

.submit-button:hover {
  background-color: #0056b3;
}

// 示例：使用Field的validate prop
<Field
  name="singleValue"
  type="number"
  validate={value => {
    let error;
    if (!value) {
      error = '此字段为必填';
    } else if (value < 10) {
      error = '值不能小于10';
    } else if (value > 50) {
      error = '值不能大于50';
    }
    return error; // 返回错误字符串，如果没有错误则返回undefined
  }}
/>
{errors.singleValue && touched.singleValue ? (
  <div className="error-message">{errors.singleValue}</div>
) : null}