React中如何使用react-hook-form实现手机号校验并展示错误提示

实现步骤与修改后代码 #

1. 补全导入与useForm配置

首先补全react-hook-form相关依赖导入，同时解构出需要的control对象：

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import ReactPhoneInput from "react-phone-input-2"
import { TextField, Button } from "@material-ui/core"

const YourComponent = () => {
  // 补充解构control对象
  const { register, handleSubmit, control, formState: { errors } } = useForm()

  const getData = (data) => {
    console.log(data.username)
    console.log(data.phone);
  }

2. 改造表单与校验规则

给Controller添加校验规则，同时绑定错误状态到TextField的error和helperText属性：

return (
    <form onSubmit={handleSubmit(getData)} >
      <Controller
        control={control}
        name="phone"
        // 新增校验规则
        rules={{
          required: '手机号为必填项',
          validate: (value) => {
            // 移除所有非数字字符，过滤印度区号+91前缀
            const pureNumber = value.replace(/\D/g, '');
            const validNumber = pureNumber.startsWith('91') ? pureNumber.slice(2) : pureNumber;
            // 校验长度是否为10位纯数字
            return /^\d{10}$/.test(validNumber) ? true : '请输入10位有效的手机号';
          }
        }}
        render={({ field: { ref, ...field }, fieldState: { error } }) => (
          <ReactPhoneInput 
            {...field}
            // 指定使用MUI TextField作为输入组件，原生支持error、helperText属性
            component={TextField}
            inputExtraProps={{
              ref, 
              required: true, 
              autoFocus: true,
              // 绑定错误状态与提示文案
              error: !!error,
              helperText: error?.message
            }}
            country={"in"}
            onlyCountries={["in"]}
            countryCodeEditable={false}
            specialLabel={"Player Mobile Number"}
          />
        )}
      />
      <Button type='submit'>Submit</Button> 
    </form>
  )
}

export default YourComponent;

校验触发逻辑说明

• 输入过程中会实时校验，不符合规则立刻显示错误提示
• 表单提交时会自动触发全量校验，手机号不符合规则会拦截提交并显示错误

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