Question

我在Javascript中编写了一个验证函数来检查我的密码是否匹配。

HTML

<form action="/anotherPage" onsubmit="return validate()" method="POST">
    <input type="password" name="password"/>
    <input type="password" name="password2"/>

    <button type="submit" class="btn btn-primary">submit</button>
</form>

的Javascript

<script>
  function validate() {
      var ok = true;
      var password = document.getElementById("password").value;
      var password2 = document.getElementById("password2").value;
      if (password != password2) {
          alert("Passwords Do not match");
          document.getElementById("password").style.borderColor = "#E34234";
          document.getElementById("password2").style.borderColor = "#E34234";
          ok = false;
      }
      else {
          alert("Passwords Match!!!");
      }
      return ok;
  }
</script>

在控制台中，它表示已提交表单，但我想在提交表单之前进行验证。但我的验证功能永远不会到达。我该如何解决这个问题？

Answer 1

您正在使用getElementById - 但您没有包含此类ID的输入字段。将<{1}}和id="password"添加到输入字段 - 并且会发生魔法。

Answer 2

您需要使用event.preventDefault来阻止默认表单提交

function validate(event) {
event.preventDefault();
      //Rest of code
      return ok;
  }

JSFIDDLE

Answer 3

您错过了定义输入的ID：

<form action="/anotherPage" onsubmit="return validate()" method="POST">
    <input type="password" id="password" name="password"/>
    <input type="password" id="password2" name="password2"/>

    <button type="submit" class="btn btn-primary">submit</button>
</form>

Answer 4

你可以使用jQuery来实现这个目的但首先你必须给你的input id

<input type="password" id="password" name="password"/>
<input type="password" id="password2" name="password2"/>
// then the jQuery
pass = $('#password').val();
pass2 = $('#password2').val();
if(pass == pass2){
    alert('good');
} else {
    alert('bad');
}

Javascript表单验证onsubmit不起作用

4 个答案: