javascript - 立即输出所有表单填写错误的消息

Question

我最近开始掌握javascript，现在正在做注册表单。我需要确保，在错误填写多个字段时，会同时输出带有错误的消息。我想到了如何将所有内容收集到一个数组中，然后调用那些指定形式不正确的数组。在我的代码中如何更好地做到这一点，我不太明白？

MyJS:

var namePattern = new RegExp("^([A-z]{4,20})$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var passwordPattern = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{6,20}$");

document.getElementById("registration_form").addEventListener("submit", function(event) {
  var fName = document.getElementById("fName").value;
  var lName = document.getElementById("lName").value;
  var email = document.getElementById("email").value;
  var password = document.getElementById("pass").value;
  var confirmPassword = document.getElementById("confPass").value;


  if (!namePattern.test(fName)) {
    document.getElementById("error_first_name").innerHTML = 'Wrong first name, first name must be at least four characters long and not contain numbers';
    event.preventDefault();
  } else if (!namePattern.test(lName)) {
    document.getElementById("error_first_name").innerHTML = '';
    document.getElementById("error_last_name").innerHTML = 'Wrong first name, last name must be at least four characters long and not contain numbers';
    event.preventDefault();
  } else if(!emailPattern.test(email)){
    document.getElementById("error_last_ name").innerHTML = '';
    document.getElementById("error_email").innerHTML = 'Wrong email';
    event.preventDefault();
  } else if(!passwordPattern.test(password)){
    document.getElementById("error_email").innerHTML = '';
    document.getElementById("error_password").innerHTML = 'Wrong password';
    event.preventDefault();
  } else if(confirmPassword != password){
    document.getElementById("error_password").innerHTML = '';
    document.getElementById("error_confirmPassword").innerHTML = 'Your passwords do not match';
    event.preventDefault();
  }
})

我的HTML:

<form action="" id="registration_form">
                    <ul>
                        <div id="error_first_name" style="color: #ff0000"></div>
                        <li class="text-info">First Name: </li>
                        <li><input type="text" id="fName" placeholder="Your first name" value=""></li>
                    </ul>
                    <ul>
                        <div id="error_last_name" style="color: #ff0000"></div>
                        <li class="text-info">Last Name: </li>
                        <li><input type="text" id="lName" placeholder="Your last name" value=""></li>
                    </ul>
                    <ul>
                        <div id="error_email" style="color: #ff0000"></div>
                        <li class="text-info">Email: </li>
                        <li><input type="text" id="email" placeholder="Your email" value=""></li>
                    </ul>
                    <ul>
                        <div id="error_password" style="color: #ff0000"></div>
                        <li class="text-info">Password: </li>
                        <li><input type="password" id="pass" placeholder="Your password" value=""></li>
                    </ul>
                    <ul>
                        <div id="error_confirmPassword" style="color: #ff0000"></div>
                        <li class="text-info">Re-enter Password:</li>
                        <li><input type="password" id="confPass" placeholder="Conform your password" value=""></li>
                    </ul>

                    <input type="submit" id="submit" value="Register Now">
                    <p class="click">By clicking this button, you agree to my modern style <a>Policy Terms and Conditions</a> to Use</p>
                </form>

Answer 1

只需从 else if 中删除 else 即可。您没有得到您所期望的结果，因为它只运行第一个通过的案例。

编辑:您还可以清除每个条件的前一个字段的错误消息。删除设置 xyz.innerHTML = '' 的语句。

编辑2:这是一个demo