Yup库是否提供内置校验方法验证字符串是否属于允许值数组？

当然有啦！Yup 本身就提供了内置的oneOf方法来实现这个需求，完全不需要自己编写自定义测试函数。

基本用法示例 #

针对你给出的场景，我们可以用oneOf快速构建验证规则：

import * as Yup from 'yup';

// 你的允许值数组
const allowedFruits = ['orange', 'cherry'];

// 构建Yup验证schema
const fruitSchema = Yup.string()
  .oneOf(allowedFruits, `请选择有效的水果，可选值：${allowedFruits.join(', ')}`)
  .required('水果不能为空');

// 测试验证逻辑
const testCases = ['apple', 'orange', 'banana', 'cherry'];

testCases.forEach(fruit => {
  fruitSchema.validate(fruit)
    .then(() => console.log(`"${fruit}" 验证通过`))
    .catch(err => console.log(`"${fruit}" 验证失败：${err.message}`));
});

关键细节说明 #

• oneOf接受两个参数：第一个是允许值的数组，第二个是可选的自定义错误提示信息
• 如果你需要验证的是非字符串类型（比如数字、枚举值），同样可以用oneOf，只需要把前面的类型方法换成对应的（比如Yup.number().oneOf([1,2,3])）
• 如果允许值数组是动态生成的，直接传入变量即可，oneOf支持动态数组参数

结合表单场景（比如React Hook Form） #

如果是和表单库配合使用，用法也很简单：

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

// 同上的fruitSchema

function FruitForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(fruitSchema)
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('fruit')} />
      {errors.fruit && <p>{errors.fruit.message}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

这样就能轻松实现用户输入的水果是否在允许列表中的验证啦！

内容的提问来源于stack exchange，提问作者me.at.coding