如何以react hook形式验证密码并确认密码？反应钩子形式是否有任何验证属性和消息来显示错误？

实际上，我尝试验证表单并卡住以验证密码并确认密码.. 中是否有任何属性useForm在最新版本中验证密码并以反应钩子形式显示消息。请帮忙。实际上，我尝试验证表单并卡住以验证密码并确认密码.. 中是否有任何属性useForm在最新版本中验证密码并以反应钩子形式显示消息。请帮忙。

import React, { useState } from 'react'
import Image from '../../../Components/UI/Images/Image'
import SubmitButton from '../../../Components/UI/Button/Button'
import {useForm} from 'react-hook-form'
import illustrate from '../../../Assets/Imagesused/resetpass.png'
import '../Login/Login.css'
import "./CreatePass.css"
import "../ChangePassword/ChangePass.css"

const CreatePass = () => {

//show password
const [toggle1, setToggle1] = useState(false);
const [toggle2, setToggle2] = useState(false);
let password;

const { register, handleSubmit, formState: { errors }, reset,watch,getValues } = useForm({
    mode: "onTouched"
});
password = watch("password", "");

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


return (
    <div className='Container'>
        <div className='illustration-box'>
            <Image imge={illustrate}/>
        </div>
        <div>
            <form className='Login-Box' onSubmit={handleSubmit(onSubmit)}>
                <div className='Heading1'>
                    <h1 className='Login-Heading'>Create Password</h1>
                </div>
                
                <div className='type-box1'>
                    <div className='Label1'>
                        <label >
                         Password
                        </label>
                    </div>
                    <div className='input1'>
                        <i id="passlock" className="fa fa-lock icon"></i>
                        <i id="showpass" className="fa fa-eye icon" onClick={() => { setToggle1(!toggle1) }}></i>
                        <input className='input-field' size={"44"} type={toggle1 ? "text" : "password"} placeholder='Password' name="password" {...register("password", { required: "**Password is required", minLength: { value: 4, message: "**Password must be more than 4 characters" }, maxLength: { value: 12, message: "**Password cannot exceed more than 12 characters" }})}></input>
                    </div>
                    <p className='alerts'>{errors.password?.message}</p>
                    <div className='Label2'>
                        <label >
                           Confirm Password
                        </label>
                    </div>
                    <div className='input2'>
                        <i id="passlock" className="fa fa-lock icon"></i>
                        <i id="showpass" className="fa fa-eye icon" onClick={() => { setToggle2(!toggle2) }}></i>
                        <input className='input-field' size={"44"} type={toggle2 ? "text" : "password"} placeholder='Password' name="cpassword" {...register("cpassword", { required: "**Password is required" },{validate: (value) => value === getValues("password")})}></input>
                    </div>
                    <p className='alerts'>{errors.cpassword?.message}</p>
                    <div className='Button'>
                        <SubmitButton className="Login-Button4" Label="Proceed"  ></SubmitButton>
                    </div>
                </div>
                
            </form>

        </div>

    </div>
)
}

export default CreatePass

您可以单独使用反应钩子形式来做到这一点。您可以使用watch https://react-hook-form.com/api/useform/watch从反应钩子形式来完成这项工作。这使您可以侦听密码字段中的更改，您可以在确认密码验证方法中使用该更改来将密码与确认密码字段值进行比较，如下所示；

const {register, watch} = useForm();
<input
 {...register("password", {
  required: true
 })}
/>
<input
 {...register("confirm_password", {
  required: true,
  validate: (val: string) => {
    if (watch('password') != val) {
      return "Your passwords do no match";
    }
  },
 })}
/>