比较密码以重定向

Question

大家好，希望你们都做得很好。 我创建了一个反应应用程序，它有 2 个密码字段，每个都使用正则表达式进行验证。 两个验证都满足后不久，它将重定向到另一个页面。

现在我只想在两个密码都匹配时重定向。

请有人帮我解决我遇到的问题。

这是我的代码：

import React, { useState, useEffect } from 'react';
import LockIcon from '@mui/icons-material/Lock';
import { useNavigate } from 'react-router-dom';
import "../../index.css";


function ComparePassword () {
    
    
    const initialvalues = {password:"", confirmpassword:""}
    const [formValues, setFormValues] = useState(initialvalues);
    const [formErrors, setFormErrors] = useState({});
    const [isSubmit, setIsSubmit] = useState(false);


    const handleChange = (e) =>{
        const{name,value} = e.target;
        setFormValues({...formValues, [name]:value});
    }

    let navigate = useNavigate();

    const handleSubmits = (e) =>{
         e.preventDefault();
         const passerrors = validates(formValues);
      
        if (Object.keys(passerrors).length) {
          setFormErrors(passerrors);
        } else {
          navigate('/afterlogin');
        }
    }

    

    useEffect(()=>{
        console.log(formErrors);
        if(Object.keys(formErrors).length ===0 && !isSubmit){
            console.log(formValues);
        }
    },[formErrors])

    const validates = (values) =>{
        const passerrors ={}

        const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{4,12}$/;

        if(!values.password){
            passerrors.password = "Password is required";
        }else if(!regexp.test(values.password)){
            passerrors.password = "passsword must contain atleast one uppercase,lowercase,number,special character";
        }
        else if(values.password.length < 4){
            passerrors.password = "Password must me more than 4 characters";
        }else if (values.password.length > 6){
            passerrors.password = "Password cannot be more than 6 characters";
        }
        if(!values.confirmpassword){
            passerrors.confirmpassword = "Password is required";
        }else if(!regexp.test(values.confirmpassword)){
            passerrors.confirmpassword = "passsword must contain atleast one uppercase,lowercase,number,special character";
        }
        else if(values.confirmpassword.length < 4){
            passerrors.confirmpassword = "Password must me more than 4 characters";
        }else if (values.confirmpassword.length > 6){
            passerrors.confirmpassword = "Password cannot be more than 6 characters";
        }
        return passerrors;

    }


    
        return (
            <div className="container" 
                    style={{textAlign:'center'}}>
                
                <div style={{justifyContent:'space-between'}}>
                
                
                {/* validation */}
                    <div>
                    <form onSubmit={handleSubmits} >
                        <div>
                            <div>
                                <label style={{position:"relative", top:"8px",right:"5px"}} ><LockIcon/></label>
                                <input className='input_field' type="password" name='password' placeholder=''
                                value={formValues.password}
                                onChange={handleChange}
                                style={{width:"180px",height:"35px"}}
                                />
                                <label className='input_label1'>Enter New Password</label>
                                <p style={{color:"red"}}>{formErrors.password}</p>
                            </div>
                            <div>
                                <label style={{position:"relative", top:"8px",right:"5px"}} ><LockIcon/></label>
                                <input className='input_field' type="password" name='confirmpassword' placeholder=''
                                value={formValues.confirmpassword}
                                onChange={handleChange}
                                style={{width:"180px",height:"35px"}}
                                />
                                <label className='input_label2'>Confirm Password</label>
                                <p style={{color:"red"}}>{formErrors.confirmpassword}</p>
                            </div>
                    
                            <button className='btn-primary' 
                                    style={{width:"210px",height:"30px",fontSize:"15px",
                                            marginLeft:"10px",
                                            backgroundColor:"skyblue"
                                            }}>
                                            Login</button>
                        </div>
                    </form>
                    </div>
                
                {/* validation */}

                </div>
            </div>
        )
    }

export default ComparePassword;

Answer 1

如果您将两个密码作为最后一个 validate if 语句进行比较，那应该可以解决问题。

if (values.password !== values.confirmpassword){
    passerrors.confirmpassword = "Passwords must match";
}