如何使用react hook form和yup验证密码和确认密码

React Hook Form 是一个用于处理表单验证的库，而 Yup 是一个用于编写验证规则的 JavaScript 库。结合使用这两个库，可以很方便地实现密码和确认密码的验证。

首先，需要安装 React Hook Form 和 Yup：

npm install react-hook-form yup

然后，在你的 React 组件中引入所需的库：

import React from 'react';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';

接下来，定义验证规则和表单组件：

const schema = yup.object().shape({
  password: yup
    .string()
    .required('密码不能为空')
    .min(6, '密码长度不能少于6位'),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref('password'), null], '确认密码必须与密码相同')
    .required('确认密码不能为空'),
});

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>密码</label>
        <input type="password" name="password" ref={register} />
        {errors.password && <p>{errors.password.message}</p>}
      </div>
      <div>
        <label>确认密码</label>
        <input type="password" name="confirmPassword" ref={register} />
        {errors.confirmPassword && <p>{errors.confirmPassword.message}</p>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

在上面的代码中，我们首先定义了验证规则 schema，其中 password 字段需要满足非空且长度不少于 6 位，confirmPassword 字段需要与 password 字段相同且非空。

然后，在 App 组件中使用 useForm hook 初始化表单，并将验证规则传递给 resolver。通过 register 方法将表单元素与验证规则关联起来，handleSubmit 方法用于处理表单提交事件。

最后，在表单元素中使用 ref={register} 将其注册到表单中，并根据验证结果显示错误信息。

这样，当用户提交表单时，如果密码和确认密码不符合验证规则，将会显示相应的错误信息。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库 MySQL（CDB）等。你可以在腾讯云官网上找到这些产品的详细介绍和文档。

参考链接：