我一直在使用 ReactJS 實作一個表單，但遇到了一個問題，但找不到解決方案：
->我使用 ReactJS 創建了一個表單，并在提交時成功地將驗證添加到了輸入值，但是當我將路由器添加到它以重定向到另一個頁面時，驗證不起作用并且正在被重定向而不是驗證。所以我已經檢查了使用多個函式來提交表單的解決方案，以便執行驗證，然后我的路由，但沒有任何結果。
- >在下面我有我的代碼，任何人都可以幫助我進行兩個驗證的作業，然后在提交表單時一個接一個驗證輸入欄位后重定向。
代碼：
import React, { useState, useEffect } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
function Password () {
const initialvalues = {password:""}
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 handleSubmit = (e) =>{
e.preventDefault();
setFormErrors(validate(formValues));
setIsSubmit(true);
navigate('afterlogin');
}
useEffect(()=>{
console.log(formErrors);
if(Object.keys(formErrors).length ===0 && isSubmit){
console.log(formValues);
}
},[formErrors])
const validate = (values) =>{
const errors = {}
const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_= -]).{4,12}$/;
if(!values.password){
errors.password = "Password is required";
}else if(!regexp.test(values.password)){
errors.password = "passsword must contain atleast one uppercase,lowercase,number,special character";
}
else if(values.password.length < 4){
errors.password = "Password must me more than 4 characters";
}else if (values.password.length > 6){
errors.password = "Password cannot be more than 6 characters";
}
return errors;
};
return (
<div>
<form onSubmit={handleSubmit} >
<div>
<input type="password" name='password' placeholder='Password'
value={formValues.password}
onChange={handleChange}
style={{width:"180px",height:"35px"}}
/>
<p style={{color:"red"}}>{formErrors.password}</p>
<button className='btn-primary'
style={{width:"210px",height:"30px",fontSize:"15px",
marginLeft:"10px",
backgroundColor:"skyblue"
}}>
Login</button>
</div>
</form>
</div>
)
}
export default Password;
->這是我的代碼，如果有人清楚我面臨的問題，請幫助我解決這個問題。
**Thanks in advance**
uj5u.com熱心網友回復：
如果每個欄位都有效，您需要檢查驗證是否通過的條件，然后將提交設定為 true 并導航試試這個
const handleSubmit = (e) => {
e.preventDefault();
const errors = validate(formValues)
if (Object.keys(errors).length) {
setFormErrors(errors);
}
else {
setIsSubmit(true);
navigate('afterlogin');
}
}
uj5u.com熱心網友回復：
handleSubmit是同步的，每次提交處理程式運行時都會無條件地導航到“登錄后”。如果我正確理解您的問題，您似乎應該驗證表單，并且只有在沒有錯誤的情況下才能導航。
檢查errors提交處理程式中的驗證密鑰長度，如果有任何錯誤更新適當的狀態，否則發出命令式導航。
const handleSubmit = (e) =>{
e.preventDefault();
const errors = validate(formValues);
if (Object.keys(errors).length) {
setFormErrors(errors);
} else {
navigate('afterlogin');
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/401757.html