React-hook-form与Yup空输入验证冲突问题求助

问题分析 #

你遇到的核心问题是：firstName字段需要可选填写，但填写时必须符合指定正则；但当前空提交时，Yup的matches验证依然触发并报错。之前尝试的nullable(true)无效，是因为React Hook Form默认会把空输入框的值处理为空字符串""，而非null，所以nullable只允许null值的设置无法覆盖空字符串的场景。

解决方案 #

方案1：使用Yup的optional()方法（最简方案） #

optional()会让字段在不存在或为空时跳过后续验证，刚好适配你的需求。修改验证Schema如下：

const SignupSchema = yup.object().shape({
  firstName: yup.string()
    .optional()
    .matches(/^[a-zA-Z ,.'-]+$/, "姓名格式无效，仅允许字母、空格、逗号、点号、单引号和连字符")
});

方案2：结合nullable()与setValueAs（支持null值场景） #

如果需要把空输入转为null存储，可以同时使用nullable()，并在register时通过setValueAs把空字符串转为null：

1. 更新Schema

const SignupSchema = yup.object().shape({
  firstName: yup.string()
    .nullable()
    .optional()
    .matches(/^[a-zA-Z ,.'-]+$/, "姓名格式无效，仅允许字母、空格、逗号、点号、单引号和连字符")
});

2. 修改输入框注册逻辑

<input {...register("firstName", { 
  setValueAs: value => value === "" ? null : value 
})} />

完整示例代码（方案1） #

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

import "./styles.css";

const SignupSchema = yup.object().shape({
  firstName: yup.string()
    .optional()
    .matches(/^[a-zA-Z ,.'-]+$/, "姓名格式无效，仅允许字母、空格、逗号、点号、单引号和连字符")
});

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

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        <input {...register("firstName")} />
        {errors.firstName && <p>{errors.firstName.message}</p>}
      </div>

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

效果验证 #

• 空提交表单：无错误提示，正常触发onSubmit
• 输入不符合正则的内容（如数字、特殊符号）：显示自定义错误提示
• 输入符合正则的内容：正常提交

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