如何在使用 onChange 的表单验证中比较两个输入值是否相同

Question

当我在带有钩子的功能组件中输入数据时，我创建了一个表单验证，一切正常，直到我确认密码并返回密码的那一刻。当确认密码输入已经归档并且我对密码输入进行更改时，它看不到更改并且不会出现确认密码错误。我不知道如何让验证检测输入的变化，如果密码 === 确认密码，请再次检查。

export default function Register() {

const [error, setError] = useState({
    username: false,
    email: false,
    password: false,
    confirmPassword: false,
    consent: false

})

const handleChange = (e) => {
    let emailver = /^\S+@\S+\.\S+$/;
    let passValidation = /(?=.*[!#@$^%*])[a-zA-Z0-9!#@$%*^]{6,100}$/;

    switch (e.target.name) {
        case "username": (e.target.value.length <= 4 && e.target.value !== '')
            ? setError({ ...error, username: true })
            : setError({ ...error, username: false })
            break;

        case "email": (emailver.test(e.target.value) || e.target.value === '')
            ? setError({ ...error, email: false })
            : setError({ ...error, email: true })
            break;

        case "password": (!e.target.value.match(passValidation) && e.target.value !== '')
            ? setError({ ...error, password: true })
            : setError({ ...error, password: false })
            break;

        case "confirm-password": (e.target.value !== document.getElementsByName('password')[0].value)
            ? setError({ ...error, confirmPassword: true })
            : setError({ ...error, confirmPassword: false })
            break;

        default:
            break;

    }

}


return (
    <div>
        <div className="login">
            <h2>Register</h2>
            <div className="login-box">
                <form noValidate >

                    <input type="text" name="username" placeholder="Username" className={(error.username) ? 'error' : ''} onChange={handleChange} />
                    {(error.username) ? <span className="register-info">(Username has to be atleast 5 charaters long.)</span> : ''}

                    <input type="email" name="email" placeholder="E-mail" className={(error.email) ? 'error' : ''} onChange={handleChange} />
                    {(error.email) ? <span className="register-info">(Invalid e-mail.)</span> : ''}

                    <input type="password" name="password" placeholder="Password" className={(error.password) ? 'error' : ''} onChange={handleChange} />
                    {(error.password) ? <span className="register-info">Password should be 6 letters long and include one special character (! # @ $ %).</span> : ''}

                    <input type="password" name="confirm-password" placeholder="Confirm password" className={(error.confirmPassword) ? 'error' : ''} onChange={handleChange} />
                    {(error.confirmPassword) ? <span className="register-info">Passwords does not match</span> : ''}

                    <div className="consent">
                        <input type="checkbox" id="approval" className="approval" />
                        <label htmlFor="approval">Consent.</label>
                    </div>

                    <input type="submit" value="Register" id="reg-bt" />

                </form>
                <p><Link to="/"  className="login-link">Login</Link></p>
            </div>

        </div>
    </div>
)

}

Answer 1

您需要将password 与confirm-password 进行比较。

  case "password":
        !e.target.value.match(passValidation)?
        setError({ ...error, password: true }):
        e.target.value !== document.getElementsByName("confirm-password")[0].value ?
        setError({ ...error, confirmPassword: true })
         : setError({ ...error, password: false });
       break;