使用javascript验证登录凭据的HTML表单？

Question

我编写了下面的代码来制作一个简单的表单，通过javascript验证表单输入。这里的用户名和密码都写在JS代码中，但即使在表单上提供正确的凭据，它仍会显示else循环的警报消息。请帮忙？

var user = document.getElementById('username')
var pass = document.getElementById('password')

function user1() {
  if (user == "admin" && pass == "root") {
    window.open("javascript_trial.html")
    alert('correct username')
  } else {
    alert('incorrect username or password')
  }
}

<form>
  <input type="text" name="username" Placeholder="enter username"><br>
  <input type="password" name="password" Placeholder="enter password"><br>
  <button onclick="user1()">Submit</button>
</form>

Answer 1

这里有一些错误：

• 您需要获得输入的values
• 您希望在单击按钮时获取这些值。您的代码仅在页面加载时抓取它们。将变量赋值移动到函数中
• 您没有给出元素ID属性

function user1() {
  var user = document.getElementById('username').value
  var pass = document.getElementById('password').value
  if (user == "admin" && pass == "root") {
    window.open("javascript_trial.html")
    alert('correct username')
  } else {
    alert('incorrect username or password')
  }
}

<form>
  <input type="text" name="username" id="username" Placeholder="enter username"><br>
  <input type="password" name="password" id="password" Placeholder="enter password"><br>
  <button onclick="user1()">Submit</button>
</form>

另请注意，按钮的默认类型是submit，它将提交您的表单并在单击时显示警报后重新加载页面，因此您可能希望将其更改为type="button"以防止这种情况发生。