如何在单个输入框中同时验证邮箱与手机号（基于React Hook Form）

1. 安装依赖 #

先安装React Hook Form包：
npm install react-hook-form
或者
yarn add react-hook-form

2. 基础验证实现 #

核心是使用useForm钩子，获取注册表单、处理提交、错误状态这几个关键能力，以下是完整示例：

import { useForm } from 'react-hook-form';

function LoginForm() {
  // 初始化表单钩子，可配置验证模式（比如实时验证）
  const { register, handleSubmit, formState: { errors } } = useForm({
    mode: "onBlur" // 失去焦点时触发验证，可选onChange/onSubmit等
  });

  // 验证通过后执行的提交逻辑
  const onSubmit = (formData) => {
    console.log("表单数据：", formData);
    // 这里可以写接口请求等业务逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 用户名输入框 - 必填+最小3字符 */}
      <div>
        <label>用户名</label>
        <input
          {...register("username", {
            required: "用户名不能为空",
            minLength: {
              value: 3,
              message: "用户名至少3个字符"
            }
          })}
        />
        {errors.username && <span style={{color: "red"}}>{errors.username.message}</span>}
      </div>

      {/* 邮箱输入框 - 必填+格式验证 */}
      <div>
        <label>邮箱</label>
        <input
          {...register("email", {
            required: "邮箱不能为空",
            pattern: {
              value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
              message: "请输入有效邮箱"
            }
          })}
        />
        {errors.email && <span style={{color: "red"}}>{errors.email.message}</span>}
      </div>

      {/* 密码输入框 - 必填+最小6字符 */}
      <div>
        <label>密码</label>
        <input
          type="password"
          {...register("password", {
            required: "密码不能为空",
            minLength: {
              value: 6,
              message: "密码至少6个字符"
            }
          })}
        />
        {errors.password && <span style={{color: "red"}}>{errors.password.message}</span>}
      </div>

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

export default LoginForm;

3. 关键能力说明 #

• register：给表单元素绑定验证规则，返回的属性必须解构到input/select等表单组件上
• handleSubmit：包裹提交函数，只有表单验证全通过时，才会执行传入的业务逻辑
• formState.errors：存储所有验证失败的字段信息，直接读取即可展示错误提示

4. 进阶自定义验证 #

比如添加密码确认的匹配验证：

// 先获取密码输入框的值（可通过watch方法）
const password = watch("password");

// 确认密码输入框
<input
  type="password"
  {...register("confirmPassword", {
    required: "请确认密码",
    validate: value => value === password || "密码不匹配"
  })}
/>
{errors.confirmPassword && <span style={{color: "red"}}>{errors.confirmPassword.message}</span>}

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