尝试将完成的表单存储到数组中答案

【问题标题】：Trying to store a completed form into an array尝试将完成的表单存储到数组中
【发布时间】：2018-06-27 16:07:03
【问题描述】：

我正在创建一个注册页面，目前正在尝试将表单的输入存储到一个数组中。我正在使用

var form_inputs = document.getElementsByClassName("form_input");

将输入存储在同一位置，但是如果我尝试提醒form_inputs 以测试是否实际存储了任何内容，它只会提醒"Undefined"。

function validate_form(event) {
  var forename = document.getElementById("forename");
  var surname = document.getElementById("surname");
  var username = document.getElementById("username");
  var password = document.getElementById("password");
  var re_password = document.getElementById("re_password");
  var email = document.getElementById("email");
  var errors = 0
  var special_chars = "<>@!#$%^&*()_+[]{}?:;|'\"\\,./~`-=";
  var form_inputs = document.getElementsByClassName("form_input");

  if (forename.value == "") {
    //document.getElementById("forename").style.background = "red";
    forename_confirmation.style.visibility = 'visible';
    var errors = errors + 1
  } else
    for (var i = 0; i < forename.value.length; i++) {
      if (special_chars.indexOf(forename.value.charAt(i)) != -1) {
        forename_chars.style.visibility = 'visible'
      }
    }

  if (surname.value == "") {
    //document.getElementById("surname").style.background = "red";
    surname_confirmation.style.visibility = 'visible';
    var errors = errors + 1
  } else
    for (var i = 0; i < surname.value.length; i++) {
      if (special_chars.indexOf(surname.value.charAt(i)) != -1) {
        surname_chars.style.visibility = 'visible'
      }
    }

  if (username.value == "") {
    //document.getElementById("username").style.background = "red";
    username_confirmation.style.visibility = 'visible';
    var errors = errors + 1
  } else
    for (var i = 0; i < username.value.length; i++) {
      if (special_chars.indexOf(username.value.charAt(i)) != -1) {
        username_chars.style.visibility = 'visible'
      }
    }

  if (password.value == "") {
    //document.getElementById("password").style.background = "red";
    pass_confirmation.style.visibility = 'visible';
    var errors = errors + 1
  }

  if (password.value != re_password.value) {
    //document.getElementById("re_password").style.background = "red";
    repass_confirmation.style.visibility = 'visible';
    var errors = errors + 1
  }

  if (email.value == "") {
    //document.getElementById("email").style.background = "red";
    var errors = errors + 1
  }

  if (errors != "0") {
    alert("Whoops! Looks like you didn't enter your details properly");
    console.log(form_inputs);
    event.preventDefault(); // Prevent the form from submitting
  }
  if (!email.value.includes("@") || !email.value.includes(".")) {
    //document.getElementById("email").style.background = "blue";
    email_confirmation.style.visibility = 'visible';
    return false;
  }
  return (true);
}

<!DOCTYPE html>
<html>

<head>
  <title>Login form</title>
  <link rel="stylesheet" type="text/css" href="Login Form CSS.css">
  <script src="Registration function.js" defer></script>

  <body>
    <div class="loginbox">
      <img src="Logo.jpg" class="avatar">
      <h1> Create Account </h1>
      <form name="login-form">
        <div id="forename_confirmation"> Please fill in this box </div>
        <div id="forename_chars"> Don't use special characters</div>
        <p>Forename
          <p>
            <input class="form_input" type="text" name="forename" id="forename" placeholder="Enter Forename here">
            <div id="surname_confirmation"> Please fill in this box </div>
            <div id="surname_chars"> Don't use special characters</div>
            <p>Surname
              <p>
                <input class="form_input" type="text" name="surname" id="surname" placeholder="Enter Surname here">
                <div id="username_confirmation"> Please fill in this box </div>
                <div id="username_chars"> Don't use special characters</div>
                <p>Username
                  <p>
                    <input class="form_input" type="text" name="username" id="username" placeholder="Enter Username here">
                    <div id="pass_confirmation"> Please fill in this box </div>
                    <div id="pass_chars">Don't use special characters</div>
                    <p>Password
                      <p>
                        <input class="form_input" type="password" name="password" id="password" placeholder="Enter Password here">
                        <div id="repass_confirmation"> Passwords do not match </div>
                        <p>Re-enter Password
                          <p>
                            <input class="form_input" type="password" name="re_password" id="re_password" placeholder="Re-enter your password here">
                            <div id="email_confirmation"> Please enter a valid email </div>
                            <p>Email
                              <p>
                                <input class="form_input" type="email" name="email" id="email" placeholder="Enter Email here">
                                <!-- 
                  <p>Gender<p>
                  <input type="radio" id="Male" name="Gender" value="Male">Male</input>
                  <input type="radio" id="Female" name="Gender" value="Female">Female</input>
                  -->
                                <button onclick="validate_form(event)" type="Submit" value="True" name="button-submit"> Submit </button>
                                <br />
                                <br />
                                <a href="#"> Forgot your password? </a>
                                <br />
                                <a href="#"> Already got an account? </a>
                                <br /><br />
      </form>
      <!-- <button onclick="validate_form()" type="submit"> Validate </button> -->
    </div>
  </body>
</head>
<script>
  forename_confirmation.style.visibility = 'hidden'
  forename_chars.style.visibility = 'hidden'
  surname_confirmation.style.visibility = 'hidden'
  surname_chars.style.visibility = 'hidden'
  username_confirmation.style.visibility = 'hidden'
  username_chars.style.visibility = 'hidden'
  pass_confirmation.style.visibility = 'hidden'
  pass_chars.style.visibility = 'hidden'
  repass_confirmation.style.visibility = 'hidden'
  email_confirmation.style.visibility = 'hidden'
</script>
</body>

【问题讨论】：

你为什么要这样做？ HTML 表单通常在单个表单控件级别进行验证，如果所有表单控件均无效，则表单将不会提交。查看this link。
只是因为我的老师想让我这样做，我已经按照你建议的方式做了，但显然它没有显示足够的代码。

标签： javascript html arrays forms webpage

【解决方案1】：

Array.from(document.getElementsByClassName("form_input")).forEach(
    function(element, index, array) {
        alert(element.innerHTML)
    }
);

这会提醒您这些元素

【讨论】：

您好，感谢您的评论。我试过了，它只是显示一个空警报？
@LucaBriggs whoops 有价格而不是你的form_input，正在测试我的代码哈哈:) 再试一次
是的，我猜对了，但是它仍然只显示多个空白警报？