如何使用javascript显示提交时的所有错误

我想知道，当用户提交表单时，如何一次显示所有已验证的错误。在此之前，它工作正常，但它会一个接一个地显示错误

const form = document.getElementsByTagName('form')[0];
let errorMessages = [
                    "please fill in your name here", 
                    "please, fill in your email correct here", 

                    ];
const reg = /^\d+$/;

form.addEventListener('submit', function(e){
    if(valName.value !== ''){
        valName.nextElementSibling.textContent = '';
        valName.className = '';
    } else {
        e.preventDefault();
        valName.nextElementSibling.textContent = errorMessages[0];
        valName.className = 'errorborder';
        return false;
    }
    if(valEmail.value.indexOf('@') != -1 && this.value.indexOf('.') != -1){
        valEmail.nextElementSibling.textContent = '';
        valEmail.className = '';
    } else {
        e.preventDefault();
        valEmail.nextElementSibling.textContent = errorMessages[1];
        valEmail.className = 'errorborder';
        return false;
    }
});

---

非常感谢

您可以将所有错误存储在字符串变量中，并一次显示所有错误

form.addEventListener('submit', function(e){
        var errors = "";
        if(valName.value !== ''){
                    valName.nextElementSibling.textContent = '';
                    valName.className = '';
                }
                else{
                    e.preventDefault();
                    errors += errorMessages[0];
                }
                if(valEmail.value.indexOf('@') != -1 && this.value.indexOf('.') != -1){
                    valEmail.nextElementSibling.textContent = '';
                    valEmail.className = '';
                }else{
                    e.preventDefault();
                    errors += errorMessages[1];

                }
            if(errors !== ""){
               valName.className = 'errorborder';
               valName.nextElementSibling.textContent = errors.
               return false;
            }
    })

---

您可以将所有错误存储在字符串变量中，并一次显示所有错误

form.addEventListener('submit', function(e){
        var errors = "";
        if(valName.value !== ''){
                    valName.nextElementSibling.textContent = '';
                    valName.className = '';
                }
                else{
                    e.preventDefault();
                    errors += errorMessages[0];
                }
                if(valEmail.value.indexOf('@') != -1 && this.value.indexOf('.') != -1){
                    valEmail.nextElementSibling.textContent = '';
                    valEmail.className = '';
                }else{
                    e.preventDefault();
                    errors += errorMessages[1];

                }
            if(errors !== ""){
               valName.className = 'errorborder';
               valName.nextElementSibling.textContent = errors.
               return false;
            }
    })

---

您必须删除您的返回-否则代码将停止在那里。 我还将代码移动到函数中，而不是复制

    const form = document.getElementsByTagName('form')[0];
    let errorMessages = [
                        "please fill in your name here", 
                        "please, fill in your email correct here", 

                        ];

    const reg = /^\d+$/;

    function isEmailValid(email){
        return email.indexOf('@') != -1 && email.indexOf('.') != -1;
    }

    function isNameValid(name){
        return name !== ''
    }

    function setErrorMessage(el, errorMessage){
        el.nextElementSibling.textContent = errorMessage;
        el.className = 'errorborder';
    }

    function clearError(el){
        el.nextElementSibling.textContent = '';
        el.className = '';
    }

    form.addEventListener('submit', function(e){
        var validName = isNameValid(valName.value);
        var validEmail = isEmailValid(valEmail.value);

        if(!validName){
            setErrorMessage(valName, errorMessages[0]); 
        }else{
            clearError(valName);
        }

        if(!validEmail){
            setErrorMessage(valEmail, errorMessages[1]); 
        }else{
            clearError(valEmail);
        }

        if(!validName || !validEmail) {
            e.preventDefault(); 
            return false;
        }
    })

---

您必须删除您的返回-否则代码将停止在那里。 我还将代码移动到函数中，而不是复制

    const form = document.getElementsByTagName('form')[0];
    let errorMessages = [
                        "please fill in your name here", 
                        "please, fill in your email correct here", 

                        ];

    const reg = /^\d+$/;

    function isEmailValid(email){
        return email.indexOf('@') != -1 && email.indexOf('.') != -1;
    }

    function isNameValid(name){
        return name !== ''
    }

    function setErrorMessage(el, errorMessage){
        el.nextElementSibling.textContent = errorMessage;
        el.className = 'errorborder';
    }

    function clearError(el){
        el.nextElementSibling.textContent = '';
        el.className = '';
    }

    form.addEventListener('submit', function(e){
        var validName = isNameValid(valName.value);
        var validEmail = isEmailValid(valEmail.value);

        if(!validName){
            setErrorMessage(valName, errorMessages[0]); 
        }else{
            clearError(valName);
        }

        if(!validEmail){
            setErrorMessage(valEmail, errorMessages[1]); 
        }else{
            clearError(valEmail);
        }

        if(!validName || !validEmail) {
            e.preventDefault(); 
            return false;
        }
    })

---

你听说过吗？每当您看到一个模式（如

else

block语句中的模式）时，就有可能更动态地重写代码。试着找到一种写

e.preventDefault（）的方法

，

valEmail.nextElementSibling.textContent=errorMessages[1]
valEmail.className='errorborder'
，
返回false仅一次。有什么不同？你听说过吗？每当您看到一个模式（如
else
block语句中的模式）时，就有可能更动态地重写代码。试着找到一种写
e.preventDefault（）的方法
，
valEmail.nextElementSibling.textContent=errorMessages[1]
valEmail.className='errorborder'
，
返回false仅一次。有什么不同？谢谢你@Amal！它工作正常唯一的问题是现在。。。。errors变量将显示内部的所有错误，并忽略上面的语句。示例：
code
if（valName.value！=''）{valName.nextElementSibling.textContent=''；valName.className=''；}
code
谢谢@Amal！它工作正常唯一的问题是现在。。。。errors变量将显示内部的所有错误，并忽略上面的语句。示例：
code
if（valName.value！=''）{valName.nextElementSibling.textContent=''；valName.className=''；}
code
hi@Lasse，我刚刚尝试了你的代码，效果很好，非常感谢！但是现在它只在所有错误消息中显示了
errorMessages[0]
，它现在应该可以工作了-在setErrorMessage函数中，它说的是errorMessages[0]，而不是errorMessage:）嗨@Lasse，我刚刚试过你的代码，效果很好，非常感谢！但是现在它只在所有错误消息中显示了
errorMessages[0]
，现在应该可以工作了-在setErrorMessage函数中，它说的是errorMessages[0]，而不是errorMessage:）