0

我正在寻找一种使我的 JS 错误处理函数动态化的方法，现在我正在分别检查每个可能的错误，函数代码如下所示。

function handleErrors(errors){
    
    if (errors.nameError){
        nameEl.classList.add('is-invalid');
        nameEl.nextElementSibling.innerHTML = errors.nameError;
    }
    if (errors.surnameError){
        surNameEl.classList.add('is-invalid');
        surNameEl.nextElementSibling.innerHTML = errors.surnameError;
    }
    if (errors.emailError){
        emailEl.classList.add('is-invalid');
        emailEl.nextElementSibling.innerHTML = errors.emailError;
    }
    if (errors.passwordError){
        passwordEl.classList.add('is-invalid');
        passwordEl.nextElementSibling.innerHTML = errors.passwordError;
    }
    if (errors.passwordConfirmError){
        passwordConfirmEl.classList.add('is-invalid');
        passwordConfirmEl.nextElementSibling.innerHTML = errors.passwordConfirmError;
    }
    if (errors.phoneError){
        phoneEl.classList.add('is-invalid');
        phoneEl.nextElementSibling.innerHTML = errors.phoneError;
    }
    if (errors.addressError){
        addressEl.classList.add('is-invalid');
        addressEl.nextElementSibling.innerHTML = errors.addressError;
    }
}

基本上每次我有两个变量时，我都会检查是否存在特定的错误对象，如果存在，我会将该错误值打印到相应的 HTML 元素。编写一个动态检查所有错误的函数的方法是什么。谢谢你的想法。

4

1 回答 1

1

你可以这样做：

var errorsAndElements = {
    nameError: nameEl,
    surnameError: surNameEl,
    emailError: emailEl,
    passwordError: passwordEl,
    passwordConfirmError: passwordConfirmEl,
    phoneError: phoneEl,
    addressError: addressEl
};

function handleErrors(errors){
    var possibleErrors = Object.keys(errorsAndElements);
    for (var i = 0; i < possibleErrors.length; i++) {
        var errorName = possibleErrors[i];
        if (errors[errorName]) {
            var errorElement = errorsAndElements[errorName];
            errorElement.classList.add('is-invalid');
            errorElement.nextElementSibling.innerHTML = errors[errorName];
        }
    }
}

它将可能的错误和相应的元素存储在一个对象中，然后遍历该对象并检查传递的error对象中是否存在错误。如果错误存在，它将获取元素并显示它。

于 2021-03-02T06:57:54.790 回答