React Hook Form系列之二：通过Yup进行验证

教程

发布日期: 2021-10-14

在使用React Hook Form进行开发的时候，除了其自带的验证方法，比如required, maxLength，pattern等，还可以使用第三方库进行验证，比如使用Yup。

图源：React Hook Form官网

React Hook Form官网：https://react-hook-form.com/
React Hook Form GH：https://github.com/react-hook-form/react-hook-form
Yup官网：https://github.com/jquense/yup

React Hook Form系列

安装依赖

yarn add yup @hookform/resolvers

使用yup进行验证

首先需要引入依赖：

import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

接下来需要定义schema：

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  email: yup.string().required().email(),
  password: yup.string().required().min(8)
})

可以看到，每个字段都可以通过链式调用定义并组合不同的验证规则。

有了这个schema，就可以在创建表单的时候添加该验证规则了：

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<IFormInputs>({
  resolver: yupResolver(schema)
});
```  

如果定义了组合规则，在输出验证错误信息的时候最好使用更为准确的出错信息。比如对于email的验证，既有非空验证，也有email合法性验证，那么在检测时最好这样：

``` javascript
{errors.email && <span className="invalid_field">{errors.email.message}</span>}<br/>

条件验证

有些时候某个字段的验证规则是否生效要取决于另一个字段的值，比如：只有在showEmail这个复选框被选中的时候，才对email字段进行合法性检测。可以这样实现：

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  showEmail: yup.boolean(),
  email: yup.string()
            .email("Please enter a valid email address.")
            .when("showEmail", {
              is: true,
              then: yup.string().required("Email address must be provided.")
            }),
  password: yup.string().required().min(8)
})

完整代码

这一步的完整代码如下：

import { FC } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

interface IFormInputs {
  firstName: string,
  lastName: string,  
  showEmail: boolean,
  email: string;
  password: string;
}

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  showEmail: yup.boolean(),
  email: yup.string()
            .email("Please enter a valid email address.")
            .when("showEmail", {
              is: true,
              then: yup.string().required("Email address must be provided.")
            }),
  password: yup.string().required().min(8)
})

const Test2: FC = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IFormInputs>({
    resolver: yupResolver(schema)
  });

  const formSubmitHandler: SubmitHandler<IFormInputs> = (formdata: IFormInputs) => {
      console.log(formdata);
  }

  return (
    <div>
        <form onSubmit={handleSubmit(formSubmitHandler)}>
            <input {...register('firstName')}/><br/>
            {errors.firstName && <span className="invalid_field">{errors.firstName.message}</span>}<br/>
            <input {...register('lastName')}/><br/>
            {errors.lastName && <span className="invalid_field">{errors.lastName.message}</span>}<br/>
            <input type="checkbox" {...register('showEmail')}/><br/>
            <input {...register('email')}/><br/>
            {errors.email && <span className="invalid_field">{errors.email.message}</span>}<br/>
            <input {...register('password')}/><br/>
            {errors.password && <span className="invalid_field">{errors.password.message}</span>}<br/>
            <br/>
            <br/>
            <button type='submit'>Submit</button>
        </form>
    </div>
  );
};

export default Test2;