强制无效如果两者都为空则有效但其中一个已填充则无效并且只有一个值插入到数据库中

Question

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 中也只添加一个字段。 代码有什么问题？ ..................................................... ..................................................... ...................................................

Answer 1

在这些中，如果第一个值为真，那么它会执行，它不会看到第二个值，所以尝试改变条件。写 if else if like it may work