嘿，我之前也折腾过这个需求，其实只需要在React Hook Form的Controller组件里加个自定义验证规则就能搞定！下面是具体的修改步骤和完整代码：

首先，我们要利用React Hook Form的validate规则，把isValidPhoneNumber方法整合进去。需要注意这几点：

• 保留原来的required: true规则处理必填校验，还可以给它加个自定义提示文本
• 在validate函数里，判断如果有输入值的话，再用isValidPhoneNumber验证格式是否正确
• 修正错误提示的判断条件——你的表单字段名是phone-input，所以错误对象得用errors['phone-input']来访问

下面是修改后的完整代码：

import { useForm, Controller } from 'react-hook-form'
import PhoneInput, { isValidPhoneNumber } from 'react-phone-number-input'
import 'react-phone-number-input/style.css'

const MyForm = () => {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm()

  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="user-info-form">
      <div>
        <label htmlFor="phone-input">Phone Number</label>
        <Controller
          name="phone-input"
          control={control}
          rules={{
            required: 'Phone number is required', // 给必填规则加自定义提示
            validate: (value) => {
              // 有输入值时才验证格式
              if (value && !isValidPhoneNumber(value)) {
                return 'Invalid phone number format'
              }
              return true // 验证通过返回true
            }
          }}
          render={({ field: { onChange, value } }) => (
            <PhoneInput
              value={value}
              onChange={onChange}
              defaultCountry="TH"
              id="phone-input"
            />
          )}
        />
        {/* 对应字段名，直接显示错误提示文本 */}
        {errors['phone-input'] && <p className="error-message">{errors['phone-input'].message}</p>}
      </div>
    </form>
  )
}

export default MyForm

关键修改点说明： #

1. 自定义验证规则：在rules里新增validate函数，当输入值存在但不符合手机号格式时，返回对应的错误信息
2. 明确错误提示：给required规则也添加了自定义文本，用户没填手机号时会显示清晰提示
3. 正确访问错误对象：因为字段名带连字符，所以用errors['phone-input']来访问，避免语法问题
4. 动态错误文本：直接渲染errors['phone-input'].message，不管是必填错误还是格式错误，都能显示对应的提示

这样修改后，表单就会同时处理必填校验和手机号格式校验，完全符合你的需求啦~

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