const handleChange = (e) => {
        console.log("handleChange")
        setSuccessMessage("")
        setErrorMessage("")
        setMandatory(false)

        let { name, value } = e.target
        
        validator(name, value);
    }

const handleSubmit = (e) => {
        e.preventDefault();
        setSuccessMessage("")
        setErrorMessage("")
        if (formValue.userName === "" || formValue.passWord === "") {
            console.log("Mandatory")
            setMandatory(true)
        }
        else {
            axios.post(url, formValue)
                .then(response => {
                    console.log(response);
                    let newMsg = "Loged in successfully for ID: " + response.data.id
                    setSuccessMessage(newMsg)
                })
                .catch(error => {
                    console.log(error);
                    setErrorMessage(message.ERROR)
                })
        }

 const validator = (name, value) => {
        console.log("validator")
        switch (name) {

            case "userName":
                console.log("switchName")
                // let regex=/^[A-Za-z]+([\s][A-Za-z]+)*$/;
                setformValue({
                    "userName": value
                })
                if (!(value.match(/^[A-Za-z]+([\s][A-Za-z]+)*$/))) {
                    setformErrors({
                        "username": "Enter letters only"
                    })
                }
                else {
                    setformErrors({
                        "username": ""
                    })
                }
                break;

            case "passWord":

                setformValue({
                    "passWord": value
                })
                if (!value.match(/^.*[A-Z].*$/)) {
                    setformErrors({
                        "password": "Password should contain at least one capital letter"
                    })
                }
                else if (!value.match(/^.*[a-z].*$/)) {
                    setformErrors({
                        "password": "Password should contain at least one small letter"
                    })
                } else if (!value.match(/^.*[!@#$%^&*].*$/)) {
                    setformErrors({
                        "password": "Password should contain at least one symbol"
                    })
                }
                else if (!value.match(/^.*[0-9].*$/)) {
                    setformErrors({
                        "password": "Password should contain at least one number"
                    })
                }

                else {
                    setformErrors({
                        "password": ""
                    })
                }
                if (value.length < 7) {
                    setformErrors({
                        "password": "Password length should at least 8 "
                    })
                }
                break;
            default:
        }
        if (Object.values(formErrors).every((value) => value === "")) {
            console.log("Valid true")
            setValid(true)
        }
        else {
            setValid(false)
        }
    }

//Input
<form className='form' onSubmit={handleSubmit}>
                <div className='container w-25 p-4 text-danger text-center'>
                    <div className='form-floating mt-3 mb-3'>
                        <input type="text" className='form-control ' name="userName" placeholder='Enter Username'
                            value={formValue.userName} onChange={handleChange} />
                        <label className='form-label fw-bold'>User Name</label>
                        <span className="text-danger fw-bold">{formErrors.username}</span>
                    </div>
                    <div className='form-floating mt-3 mb-3'>
                        <input type="password" className='form-control' name="passWord" placeholder='Enter Password'
                            value={formValue.passWord} onChange={handleChange} />
                        <label className='form-label fw-bold'>Password</label>
                        <span className="text-danger fw-bold">{formErrors.password}</span>
                    </div>

                    <button type='submit' className='badge p-2 m-2 btn-success fw-bold'
                        disabled={!valid}>Login</button>

                    <div className="text-danger- fw-bold">{
                        mandatory ? message.MANDATORY : null
                    }
                    </div>
                    <div className="text-success fw-bolf">{successMessage}</div>
                </div>
            </form>

如果两个字段均为空，则显示错误消息，但其中一个字段已填充，则显示成功消息。如果输入第二个值，然后清空第一个值，也只在DB中增加一个字段，代码有什么问题？..................................................................................................................................