Question

我目前正在用HTML编写注册表，遇到了一些问题。首先，我必须在form标签之外有一个单独的按钮来运行该功能，因为我的Submit按钮只是提交表单（无论输入字段是否输入错误），只显示瞬间的验证警报。其次，如果我正确输入了电子邮件，则表明“ 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节点本身。您可能还想查看电子邮件正则表达式验证，它比检查“ @”和“”更好地匹配了电子邮件验证方式的要求。例如https://www.w3resource.com/javascript/form/email-validation.php

Answer 2

这里有两个问题：

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

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

第二，您需要检查电子邮件字段value的{{1}}是否正确。

您的电子邮件字段是这样的：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);
}

HTML表单提交按钮刷新页面

2 个答案: