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

Question

实际上，我尝试验证表单并卡住以验证密码并确认密码.. useForm 中是否有任何属性来验证密码并在反应挂钩中显示消息最新版本的表格。请帮忙。实际上，我尝试验证表单并 Stucked 验证密码并确认密码.. 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

您应该使用 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 2

您可以单独使用 React 钩子表单来完成此操作。您可以使用反应挂钩形式的 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 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>

Answer 4

添加到 Amila Senadheera 回答和回答 llcho Talesky，“如果您输入密码确认，然后返回第一个密码字段并输入相同的密码”。

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

const password = watch("password");
  useEffect(() => {
    trigger("cpassword");
  }, [password, trigger]);

因此在使用 useEffect 的代码中，密码字段的更改被监视并使用它触发确认密码时的验证

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

How to validate password and confirm password in react hook form? Is there any validate property and message in react hook form to show errors?

reactjs

validation

react-hooks

react-hook-form

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

How to validate password and confirm password in react hook form? Is there any validate property and message in react hook form to show errors?

reactjs

validation

react-hooks

react-hook-form

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