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

Question

---

实际上，我尝试验证表单并卡住以验证密码并确认密码。是否有任何属性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

Answer 1

您可以单独使用反应钩子形式来做到这一点。您可以使用React hook 表单中的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";
    }
  },
 })}
/>

Answer 2

您应该使用yup和@hookform/resolvers作为验证定义来轻松配置它。

  const formSchema = Yup.object().shape({
    password: Yup.string()
      .required("Password is required")
      .min(4, "Password length should be at least 4 characters")
      .max(12, "Password cannot exceed more than 12 characters"),
    cpassword: Yup.string()
      .required("Confirm Password is required")
      .min(4, "Password length should be at least 4 characters")
      .max(12, "Password cannot exceed more than 12 characters")
      .oneOf([Yup.ref("password")], "Passwords do not match")
  });

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

并将调用更改register为仅包含归档的名称。

<input
    ...
    ...
    {...register("password")}
></input>

<input
    ...
    ...
    {...register("cpassword")}
></input>

代码沙箱 => https://codesandbox.io/s/summer-glade-pjg06?file=/src/App.js

Answer 3

尝试以下对我有用的7.x

const {
    register,
    getValues,
  } = useForm();

<input
   
    {...register("password")}
></input>
<input
    {...register("cpassword",  validate: (value) => {
              const { password } = getValues();
              return password === value || "Passwords should match!";
            })}
></input>