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();
  }
})

MyHTML：

<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中删除else if。您没有得到期望的结果，因为它只运行通过的第一种情况。

编辑：您还将清除每种情况下前一个字段的错误消息。删除设置为xyz.innerHTML = ''的语句。

EDIT2：这是一个demo

Answer 2

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();
 }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();
 }if(!emailPattern.test(email)){
 document.getElementById("error_last_ name").innerHTML = '';
 document.getElementById("error_email").innerHTML = 'Wrong email';
 event.preventDefault();
 }if(!passwordPattern.test(password)){
 document.getElementById("error_email").innerHTML = '';
 document.getElementById("error_password").innerHTML = 'Wrong password';
 event.preventDefault();
 }if(confirmPassword != password){
 document.getElementById("error_password").innerHTML = '';
 document.getElementById("error_confirmPassword").innerHTML = 'Your passwords do not 
 match';
 event.preventDefault();
 }
 })

立即输出格式不正确的所有消息

2 个答案: