如何结合Yup与React Hooks校验输入值是否在指定数组中

要实现输入姓名必须存在于指定数组的校验，只需在Yup的校验规则中添加自定义校验逻辑即可，具体操作如下：

修改Yup校验规则 #

在原有的required校验后，通过.test()方法添加自定义校验，检查输入值是否在names数组内：

const schema = yup.object().shape({
  firstname: yup.string()
    .required('First Name Required')
    .test(
      'name-exists',
      '该姓名不在允许列表中',
      (value) => names.includes(value)
    ),
});

完整代码示例 #

替换原代码中的schema部分后，完整代码如下：

import * as React from 'react';
import './style.css';

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

interface User {
  firstname: string;
  singleErrorInput: string;
}

const names = ['John', 'Paul', 'Mike', 'Adam'];

const schema = yup.object().shape({
  firstname: yup.string()
    .required('First Name Required')
    .test(
      'name-exists',
      '该姓名不在允许列表中',
      (value) => names.includes(value)
    ),
});

const App: React.FC = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<User>({
    resolver: yupResolver(schema),
  });

  const submitForm = (data: User): void => {
    console.log(data);
  };

  return (
    <div className="App">
      <div>
        <form className="form" onSubmit={handleSubmit(submitForm)}>
          <input
            className="input"
            type="text"
            name="firstname"
            placeholder="Firstname"
            {...register('firstname')}
          />
          <input type="submit" />
          {errors.firstname && (
            <div className="error">{errors.firstname.message}</div>
          )}
        </form>
      </div>
    </div>
  );
};

export default App;

可选优化：忽略大小写匹配 #

如果需要支持大小写不敏感的匹配（比如输入john也能通过John的校验），可以调整校验逻辑：

.test(
  'name-exists',
  '该姓名不在允许列表中',
  (value) => {
    return names.some(name => name.toLowerCase() === value.toLowerCase());
  }
)

内容的提问来源于stack exchange，提问作者cdmt