如何限制Formik字段仅接受字母，禁止输入数字？

下面提供几种实用的实现方式，可根据需求选择：

1. 使用Yup Schema做验证（推荐，与Formik深度集成） #

如果你的项目已经用了Yup（Formik常用的验证库），可以通过正则表达式限制输入内容。

首先确保安装了Yup：

npm install yup
# 或
yarn add yup

然后编写表单代码：

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

// 定义验证规则
const NameValidationSchema = Yup.object().shape({
  firstName: Yup.string()
    .matches(/^[A-Za-z]+$/, '名字只能包含英文字母')
    .required('名字不能为空'),
  lastName: Yup.string()
    .matches(/^[A-Za-z]+$/, '姓氏只能包含英文字母')
    .required('姓氏不能为空'),
});

function NameForm() {
  return (
    <Formik
      initialValues={{ firstName: '', lastName: '' }}
      validationSchema={NameValidationSchema}
      onSubmit={(values) => {
        // 提交逻辑
        console.log('提交的姓名：', values);
      }}
    >
      <Form>
        <div>
          <label>名字</label>
          <Field name="firstName" type="text" />
          {/* 显示错误提示 */}
          <ErrorMessage name="firstName" component="div" style={{ color: '#ff4444' }} />
        </div>

        <div>
          <label>姓氏</label>
          <Field name="lastName" type="text" />
          <ErrorMessage name="lastName" component="div" style={{ color: '#ff4444' }} />
        </div>

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

export default NameForm;

这个方案会在用户输入或提交时验证内容，若包含数字则显示错误提示，并阻止表单提交。

2. 实时过滤输入内容（用户无法输入数字） #

通过自定义onChange事件，直接过滤掉非字母的输入内容，让用户根本无法输入数字：

import { Formik, Form, Field } from 'formik';

function NameForm() {
  // 过滤非字母内容的处理函数
  const filterLetterInput = (e, setFieldValue, fieldName) => {
    const cleanValue = e.target.value.replace(/[^A-Za-z]/g, '');
    setFieldValue(fieldName, cleanValue);
  };

  return (
    <Formik
      initialValues={{ firstName: '', lastName: '' }}
      onSubmit={(values) => {
        console.log('提交的姓名：', values);
      }}
    >
      {({ setFieldValue }) => (
        <Form>
          <div>
            <label>名字</label>
            <Field
              name="firstName"
              type="text"
              onChange={(e) => filterLetterInput(e, setFieldValue, 'firstName')}
            />
          </div>

          <div>
            <label>姓氏</label>
            <Field
              name="lastName"
              type="text"
              onChange={(e) => filterLetterInput(e, setFieldValue, 'lastName')}
            />
          </div>

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

export default NameForm;

这种方式体验更直接，用户输入数字时会被自动过滤掉，输入框里不会显示数字。

3. 双重保障：实时过滤+验证 #

将上面两种方式结合，既实时过滤输入，又通过Yup做最终验证，防止用户通过控制台等手段修改输入值提交非法内容：

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const NameValidationSchema = Yup.object().shape({
  firstName: Yup.string()
    .matches(/^[A-Za-z]+$/, '名字只能包含英文字母')
    .required('名字不能为空'),
  lastName: Yup.string()
    .matches(/^[A-Za-z]+$/, '姓氏只能包含英文字母')
    .required('姓氏不能为空'),
});

function NameForm() {
  const filterLetterInput = (e, setFieldValue, fieldName) => {
    const cleanValue = e.target.value.replace(/[^A-Za-z]/g, '');
    setFieldValue(fieldName, cleanValue);
  };

  return (
    <Formik
      initialValues={{ firstName: '', lastName: '' }}
      validationSchema={NameValidationSchema}
      onSubmit={(values) => {
        console.log('提交的姓名：', values);
      }}
    >
      {({ setFieldValue }) => (
        <Form>
          <div>
            <label>名字</label>
            <Field
              name="firstName"
              type="text"
              onChange={(e) => filterLetterInput(e, setFieldValue, 'firstName')}
            />
            <ErrorMessage name="firstName" component="div" style={{ color: '#ff4444' }} />
          </div>

          <div>
            <label>姓氏</label>
            <Field
              name="lastName"
              type="text"
              onChange={(e) => filterLetterInput(e, setFieldValue, 'lastName')}
            />
            <ErrorMessage name="lastName" component="div" style={{ color: '#ff4444' }} />
          </div>

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

export default NameForm;

内容的提问来源于stack exchange，提问作者H.b