为何JavaScript表单验证代码中输入正确凭据仍执行if块而非else块？

嘿，我来帮你把这个问题掰扯明白——你的代码里犯了几个新手很容易踩的基础坑，咱们一个个拆解，保证你下次不会再忘：

先看你代码里的3个关键错误： #

• 获取DOM元素时没加引号：你写的document.getElementById(username)里，username是输入框的ID，必须用引号括起来当成字符串传入！不然JS会把它当成一个未定义的变量，最后a和b全是null，不管你输入什么，null != "admin"和null != 1234都是true，自然永远走if分支。
• 直接拿DOM元素和内容比：就算你正确获取到了输入框，a和b是DOM元素对象，不是用户输入的内容！要拿到输入框里的文本，必须用.value属性，比如a.value才是用户输入的用户名。
• 类型不匹配：输入框的value永远是字符串类型，你拿它和数字1234比较，虽然JS会做隐式转换，但这种写法很容易出问题，最好直接和字符串"1234"比较。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
Username: <br>
<input type="text" name="" id="username">
<br>
Password: <br>
<input type="text" id="password">
<br>
<button onclick="validate();">Submit</button>
<script>
// verification
function validate(){
  // 1. 用引号获取正确的DOM元素，再取出输入值
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  
  // 2. 用字符串和输入值比较，逻辑保持正确（只要用户名或密码不对就提示）
  if(username !== "admin" || password !== "1234"){
    alert("Incorrect username or password.\nRetry Please!");
    // 刷新页面用reload比window.open更合理
    location.reload();
  } else{
    alert(`Welcome ${username}`);
    // 跳转页面用location.href更标准
    location.href = "new.html";
  }
}
</script>
</body>
</html>

几个要刻在脑子里的知识点： #

1. getElementById的参数必须是字符串：ID是HTML里定义的字符串标识，不传引号的话JS会把它当成变量，十有八九找不到元素返回null。
2. DOM元素对象≠输入内容：输入框、文本域这类表单元素，要拿用户输入的内容必须用.value，这是前端表单操作的基础中的基础！
3. 输入框的value永远是字符串：哪怕你输入的是数字，它也是字符串类型，比较的时候一定要注意类型匹配，避免隐式转换带来的意外bug。

内容的提问来源于stack exchange，提问作者Mayuresh Rawal