驗證輸入欄位并將其更改為ReactJS中的另一個輸入欄位

我一直在創建一個 React 應用程式，它有一個手機號碼輸入欄位，之后我向手機號碼輸入添加了驗證并且它作業正常。

現在我想通過更改狀態將輸入欄位更改為密碼而不更改表單詳細資訊以外的任何內容，即

1. 手機號碼欄位到密碼欄位
2. 提交按鈕到登錄按鈕。

稍后在作為密碼的第二個表單中，我有第二個 onSubmit 函式來驗證并將其路由到下一頁。

下面，我已經給出了影像和代碼供您參考，以便請幫助我解決我的問題。

以下是圖片：

這是App.js的代碼：

    import React, { useState, useEffect } from 'react';
    import PhoneIcon from '@mui/icons-material/Phone';
    import LockIcon from '@mui/icons-material/Lock';
    import { NavLink, useNavigate } from 'react-router-dom';
    import "../../index.css";
    
    
    function Mobile () {
        
        
        const initialvalues = {number:"",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});
        }
    
        const handleSubmit = (e) =>{
            e.preventDefault();
            setFormErrors(validate(formValues));
            setIsSubmit(true);
            console.log("hello")
        }
    const handleSubmits = (e) =>{
            e.preventDefault();
            const errors = validate(formValues);
          
            if (Object.keys(errors).length) {
              setFormErrors(errors);
            } else {
              navigate('afterlogin');
            }
          }
    
        useEffect(()=>{
            console.log(formErrors);
            if(Object.keys(formErrors).length ===0 && isSubmit){
                console.log(formValues);
            }
        },[formErrors])
    
        const validate = (values) =>{
            const errors = {}
            
            const regexn = /^(\ 91[-\s]?)?[0]?(91)?[789]\d{9}$/;
            
            
            const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_= -]).{4,12}$/;
    
            
            if(!values.number){
                errors.number = "Mobile Number is required";
            }else if(!regexn.test(values.number)){
                errors.number = "Please enter a valid mobile number"
            }else if(values.number.length > 10){
                errors.number = "number must be only 10 digits"
            }
    
            return errors;
            
        };
        
            return (
                <div className="container" 
                        style={{textAlign:'center'}}>
                    
                    <div style={{justifyContent:'space-between'}}>
            {/*from this*/}
                    <form onSubmit={handleSubmit}>
                        <div >
                        
                        <div>
                            {/*style={{position:"relative",top:"",
                                            left:"6rem",cursor:"text",color:"blue"}} */}
                            <label style={{position:"relative", top:"8px",right:"5px"}}><PhoneIcon/></label>
    
                            <input className='input_field' type="number" name="number" placeholder=''
                                    autoComplete='off'
                                    value={formValues.number}
                                    onChange={handleChange}
                                    style={{width:"180px",height:"35px"}}
                            />
                            <label className='input_label'>Mobile Number</label>
    
                            <p style={{color:"red"}} >{formErrors.number}</p>
                        </div>
                            <button className='btn-primary'
                                        style={{width:"210px",height:"30px",fontSize:"15px",
                                                marginLeft:"10px",
                                                backgroundColor:"skyblue"
                                                }}>
                                                Submit</button>
                        </div>
{/*to this */}
                    </form>
                                        <form onSubmit={handleSubmits}>
                        <div >
                        
                        
                        <div>
              <form onSubmit={handleSubmits}> <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_label'>Password</label> <p style={{color:"red"}}>{formErrors.password}</p> </div> </form>
                            <button className='btn-primary'
                                        style={{width:"210px",height:"30px",fontSize:"15px",
                                                marginLeft:"10px",
                                                backgroundColor:"skyblue"
                                                }}>
                                                Submit</button>
                        </div>
                    </form>
    
                    </div>
                </div>
            )
        }
    
    export default Mobile;

uj5u.com熱心網友回復：

您可以JSX有條件地isSubmit呈現您的表單，因為您有一個狀態值來檢查第一步是否已通過，您可以像這樣呈現表單：

 { !isSubmit && <form onSubmit={handleSubmit}>mobile form</form> } 
 { isSubmit && <form onSubmit={handleSubmits}>password form</form> }

或者

 { !isSubmit ?
   <form onSubmit={handleSubmit}>mobile form</form> : 
   <form onSubmit={handleSubmits}>password form</form>
 }

uj5u.com熱心網友回復：

我認為您想保留基本代碼并添加另一個步驟或某事，您可以只創建一個 handleSubmit 并且對于每個輸入，您應該傳遞該函式的型別，例如：

<form onSubmit={(e) => handleSubmit(e,yourStep)}
...
</form>

yourStep 可以是您所在州的密碼或其他。我認為最好檢查模式并在 handleSubmit 中添加特定的驗證或其他內容。

const handleSubmit = (e,type) => {
if(type === "password"){
   handlePassword() /// Or something
}
// doSomthing general 

標籤：

上一篇：Nuget包的nupkgzip中沒有依賴項dll

下一篇：計算日期后自動更新資料庫欄位？