使用提交类型但 IF 语句不起作用答案

【问题标题】：Using submit type but IF statement does not work使用提交类型但 IF 语句不起作用
【发布时间】：2022-10-03 02:12:15
【问题描述】：

我正在尝试为我创建的网站制作一个非常简单的登录页面，但提交按钮有问题。如果我在 HTML 中使用 \"button\" 类型，我的提交按钮可以正常工作，但是 Enter 键不起作用。我发现如果我使用“提交”类型，则 Enter 按钮和鼠标单击将起作用……按钮现在越过我的 IF 语句，直接进入我的 Else 语句。任何帮助，将不胜感激。

HTML 表单：

<form>
  <label for=\"pswd\">ENTER PASSWORD</label>
  <br>
  <input class=\"box\" type=\"password\" id=\"pswd\">
  <br>
  <input class=\"confirm\" type=\"submit\" value=\"SUBMIT\" onclick=\"checkPswd();\" />
</form>

JS代码：

function checkPswd() {
  var confirmPassword = \"08012020\";
  var password = document.getElementById(\"pswd\").value;
  if (password == confirmPassword) {
    window.location = \"index.html\";
  } else {
    alert(\"Password is incorrect, Please try again.\")
  }
}

再次，提前谢谢你...

如果在获得值后添加console.log(\'the pswd value is \', password\'); 语句，它会显示什么？
我应该在哪里添加这个？ @E.Maggini
您可以在表单提交后立即添加它。您只需要检查它是否接收到该字段的任何值。
它只是刷新页面，就像它正常做的那样，而不是去 index.html

标签： javascript html css

【解决方案1】：

关键是调用你的函数后返回false，所以页面重定向不是由输入提交触发的：

function checkPswd() {
  let confirmPassword = "08012020";
  let password = document.getElementById("pswd").value;
  
  if (password === confirmPassword) {
    alert("CORRECT!");
  } else{
    alert("Password is incorrect, Please try again.")
  }
}

<form>
  <label for="pswd">ENTER PASSWORD</label>
  <br>
  <input class="box" type="password" id="pswd">
  <br>
  <input class="confirm" type="submit" value="SUBMIT" onclick="checkPswd(); return false;" />
</form>

我想补充一点，执行客户端密码检查非常不安全，因为很容易检查源代码，所以如果您希望在真实网站中使用它，我建议您考虑另一种方法！

【讨论】：