JavaScript驗證重復第一個錯誤修復

我正在嘗試使用本機 JS 驗證我的專案中的表單

我正在為每個輸入驗證創建一個函式

我創建了第一個函式來驗證用戶編號，并且運行良好

但是當我創建用戶名驗證功能并對其進行測驗時，它顯示用戶號錯誤兩次，我嘗試輸入號而不輸入名稱，也沒有顯示錯誤

有人可以幫我嗎？

這是我的代碼

$('#addUserBtn').click(function (e) {
    e.preventDefault();

    let valid = false;
    let errors = [];

    if (validateNo($('#userNoInput').val()) == true) {
        return true;
    } else {
        errors.push(validateNo($('#userNoInput').val()));
        console.log(errors);
    }

    if (validateName($('#userNameInput').val()) == true) {
        return true;
    } else {
        errors.push(validateName($('#userNameInput').val()));
        console.log(errors);
    }

    if (errors.length == 0) {
        valid = true;
    }

    if (valid == true) {
        let user = {
            no: $('#userNoInput').val(),
            name: $('#userNameInput').val(),
            email: $('#userEmailInput').val(),
            tel: $('#userTelInput').val(),
            dob: $('#userDobInput').val(),
            rmk: $('#userRmkInput').val(),
        }

        usersContainer.push(user);

        localStorage.setItem('myUsers', JSON.stringify(usersContainer));
        displayUsers();
        //clearForm();
    } else {
        let messages = Object.values(errors);
        let errorsMarkup = ""

        for (let i = 0; i < messages.length; i  ) {
            errorsMarkup  = `${messages[i]}`;
        }
        console.log(errorsMarkup);

        errorsMarkup = errorsMarkup.replace(/\./g, '<br>');

        Swal.fire({
            icon: 'error',
            title: '???...',
            confirmButtonText: '?????',
            html: errorsMarkup
        });
    }
});

function validateNo(input) {
    if (input == '') {
        let error = "You must enter User No.";

        return error;
    }

    let reg = /^\d $/;
    if (reg.test(input) == false) {
        let error = "Not valid User No.";

        return error;
    }

    return true;
}

function validateName(input) {
    if (input == '') {
        let error = "You must enter User Name.";

        return error;
    }

    let reg = /^[a-z\s]{0,255}$/i;
    if (reg.test(input) == false) {
        let error = "Not valid User Name.";

        return error;
    }

    return true;
}

uj5u.com熱心網友回復：

在驗證 name 欄位時，您呼叫的是 validateNo 而不是 else 中的 validateName。

if (validateName($('#userNameInput').val()) == true) {
    return true;
} else {
    errors.push(validateNo($('#userNameInput').val()));
    console.log(errors);
};

此外，您要提前從函式中回傳。這意味著如果validateNo 沒有驗證錯誤，它將回傳true 而不是validateName。

if (validateNo($('#userNoInput').val()) == true) {
        return true;
    } else {
        errors.push(validateNo($('#userNoInput').val()));
        console.log(errors);
    }

    if (validateNo($('#userNoInput').val()) == true) {
            return true;
        } else {
            errors.push(validateNo($('#userNoInput').val()));
            console.log(errors);
        }
    
        if (validateName($('#userNameInput').val()) == true) {
            return true;
        } else {
            errors.push(validateName($('#userNameInput').val()));
            console.log(errors);
        }

我建議將您的代碼更改為：

if (validateNo($('#userNoInput').val()) == true) {
errors.push(validateNo($('#userNoInput').val()));
console.log(errors);
}

if (validateName($('#userNameInput').val()) == true) {
errors.push(validateName($('#userNameInput').val()));
console.log(errors);
}

uj5u.com熱心網友回復：

如果userNoInput輸入因塊return true中的被驗證，則您將結束您的函式if。

if (validateNo($('#userNoInput').val()) == true) {
    return true; // This ends the function early, you want the function to keep going to validate the other fields
} else {
    errors.push(validateNo($('#userNoInput').val()));
    console.log(errors);
}

您需要洗掉return true，只需檢查各個驗證函式是否回傳false，然后繼續操作，直到完成所有檢查。

然后在單獨驗證之后，檢查errors陣列是否為空。如果為空，則表示沒有錯誤。

標籤：javascript

上一篇：即使在嘗試使用路由和路由器時，路由也不起作用

下一篇：如何使用JavaScript在單擊后添加一個類，然后再次單擊后將其洗掉？