javascript 在点击或输入时验证和验证

Question

我有一个登录脚本日期在单击提交按钮时验证。

    // Below function Executes on click of login button.
    function validate(){
        var password = document.getElementById("passid").value;
        if ( password == "thisisthepassword"){
            window.location = "loggedin.html"; // Redirecting to other page.
            return false;
        }
    }

    <form id="code" method="post">
    <div class="form-group"><input class="form-control" type="password" name="passid" id="passid""></div>
    <div class="form-group">
    <button class="btn btn-primary btn-block" type="button" value="Login" id="submit" onclick="validate()" style="border: none;">Login</button></div>
    </form>

现在我希望这个脚本在输入代码后按下回车键时也能运行，但我发现的示例似乎都不能与我已有的示例结合使用

Answer 1

我猜，您可以更改按钮类型以提交，并使用 表单元素上的 onsubmit="validate()" 事件，而不是您在按钮上使用的 onclick 事件

Answer 2

参见下面的 sn-p，我添加了一个事件侦听器，当按下 enter 时会触发按钮点击。这仍将运行与单击按钮时相同的验证。

function validate() {
  var password = document.getElementById("passid").value;
  if (password == "thisisthepassword") {
    window.location = "loggedin.html"; // Redirecting to other page.
    return false;
  }
}

//This code will trigger a button click when "enter" is pressed.
var input = document.getElementById("passid");
input.addEventListener("keyup", function(event) {
  // keyCode 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Prevent default action
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("submit").click();
  }
});

<form id="code" method="post">
  <div class="form-group">
    <input class="form-control" type="password" name="passid" id="passid" "></div>
<div class="form-group ">
<button class="btn btn-primary btn-block " type="button " value="Login " id="submit " onclick="validate() " style="border: none; ">Login</button></div>
</form>