HTML 表单提交按钮刷新页面

Question

我目前正在 HTML 中编写注册表，遇到了一些问题。首先，我必须在表单标签之外有一个单独的按钮来运行函数，因为无论输入字段是否输入错误，我的提交按钮都只是提交表单，只显示一瞬间的验证警报。其次，如果我正确输入电子邮件，它会指出 'email.includes' 无效，但是，它仍然是运行，如果我输入无效电子邮件，则不会出现此错误。感谢任何答案（我知道我的代码不是很好，我仍在学习很多东西）

function validate_form() {
  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 = "<>@!#$%^&*()_+[]{}?:;|'\"\,./~`-=";

  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")
  }
  if (!email.value.includes("@") || !email.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 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 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 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 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 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 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()" 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>

Answer 1

如果存在验证错误，您需要阻止事件默认行为，以防止浏览器重定向到目标页面（您在 action 属性中指定的内容，或者如果未指定则重新加载当前页面）： https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

你的第二个问题：我猜它是 email.value.includes（因为你已经在你的代码中使用过）并且你想检查值而不是 HTML-Node 本身。您可能还想查看电子邮件正则表达式验证，它比检查“@”和“.”更符合电子邮件验证方式的要求。例如https://www.w3resource.com/javascript/form/email-validation.php

Answer 2

这里有两个问题：

当您不想提交表单时（例如输入的详细信息不正确），您需要阻止它提交。在 JavaScript 中，您可以使用 preventDefault()。

为了实现这一点，我将行 event.preventDefault() 添加到您的 if statement 以检查是否有任何错误。请记住，您需要将 event 参数传递给您的函数才能使 preventDefault() 正常工作。

其次，您需要检查您的电子邮件字段的 value 是否有 includes 内容。

您的电子邮件字段是这样的：var email = document.getElementById('email');，因此您需要像这样检查 value：email.value.includes('bla').

总而言之，您的脚本运行良好：

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 = "<>@!#$%^&*()_+[]{}?:;|'\"\,./~`-=";

  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");
    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 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 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 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 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 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 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>

HTML 表单提交按钮刷新页面

HTML form submit button refreshing the page

javascript

html

forms

web

registration