Question

我开始学习JavaScript，并且有这样一个问题。填写表格后如何在div中插入消息不正确？我曾在使用innerHTML的地方遇到过类似的问题，但是尝试将其转换为我的应用程序后，我什么也没得到，消息也没有输出。我可能在哪里错了？

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-z0-9]{4,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';
        event.preventDefault();
      } else if (!namePattern.test(lName)) {
        document.getElementById("error_last_name").innerHTML = 'Wrong last name';
        event.preventDefault();
      } else if(!emailPattern.test(email)){
        document.getElementById("error_email").innerHTML = 'Wrong email';
        event.preventDefault();
      } else if(!passwordPattern.test(password)){
        document.getElementById("error_password").innerHTML = 'Wrong password';
        event.preventDefault();
      } else if(confirmPassword != password){
        document.getElementById("error_confirmPassword").innerHTML = ''
        event.preventDefault();
      }
    })

<form action="" method="post" id="registration_form">
                <div class="register-top-grid">
                    <h3>PERSONAL INFORMATION</h3>
                    <div>
                        <span>First Name<label>*</label></span>
                        <div id="error_first_name" style="color: #ff0000"></div>
                        <input type="text" name="fName" id="fName" placeholder="Your first name">
                    </div>
                    <div>
                        <span>Last Name<label>*</label></span>
                        <div id="error_last_name" style="color: #ff0000"></div>
                        <input type="text" name="lName" id="lName" placeholder="Your last name" >
                    </div>
                    <div>
                        <span>Email Address<label>*</label></span>
                        <div id="error_email" style="color: #ff0000"></div>
                        <input type="text" name="eMail" id="email" placeholder="Your email" >
                    </div
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
                <div class="register-bottom-grid">
                    <h3>LOGIN INFORMATION</h3>
                    <div>
                        <span>Password<label>*</label></span>
                        <div id="error_password" style="color: #ff0000"></div>
                        <input type="password" name="password" id="pass" placeholder="Your password">
                    </div>
                    <div>
                        <span>Confirm Password<label>*</label></span>
                        <div id="error_confirmPassword" style="color: #ff0000"></div>
                        <input type="password" name="confirmPassword" id="confPass" placeholder="Confirm your password">
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
                <input type="submit" name="submit" id="submit" value="submit"/>
            </form>

Answer 1

有些错误的地方。

首先，没有任何东西触发表单提交，为此我添加了一个将提交表单的按钮。

第二个事件。preventDefault是函数。

我更正了以上两个问题，您的表格正在提交中。（也看看正则表达式，我认为这是不正确的）

var namePattern = new RegExp("^([a-z]{4,20})$");

document.getElementById("registration_form").addEventListener("submit", function(event) {
  var fName = document.getElementById("fName").value;
  var lName = document.getElementById("lName").value;

  if (!namePattern.test(fName)) {
    document.getElementById("error_first_name").innerHTML = 'Wrong first name';
    event.preventDefault();
  } else if (!namePattern.test(lName)) {
    document.getElementById("error_last_name").innerHTML = 'Wrong last name';
    event.preventDefault();
  }
}, false)

<form action="" method="post" id="registration_form">
  <div class="register-top-grid">
    <h3>PERSONAL INFORMATION</h3>
    <div>
      <div id="error_first_name" style="color: #ff0000"></div>
      <span>First Name<label>*</label></span>
      <input type="text" name="fName" id="fName" placeholder="Your first name">
    </div>
    <div>
      <div id="error_last_name" style="color: #ff0000"></div>
      <span>Last Name<label>*</label></span>
      <input type="text" name="lName" id="lName" placeholder="Your last name">
    </div>
    <button type="submit">Submit</button>
</form>

Answer 2

JS：

var namePattern = new RegExp("^([A-z]{4,20})$");

document.getElementById("registration_form").addEventListener("submit", function(event){ //you have a syntax error here
    //you need to prevent the page reload after submitting the form
    event.preventDefault();
    var fName = document.getElementById("fName").value;
    var lName = document.getElementById("lName").value;

    if(!namePattern.test(fName)){
        document.getElementById("error_first_name").innerHTML = 'Wrong first name';
        event.preventDefault;
    }else if(!namePattern.test(lName)){
        document.getElementById("error_last_name").innerHTML = 'Wrong last name';
        event.preventDefault;
    }
}) //don't forget the closed parenthese

输出：

使用innerHTML的消息输出

2 个答案: