JavaScript登录页if/else失效 required属性异常 无法实现空输入提示

遇到的具体问题 #

• 业务目标：在原有账号密码匹配跳转的校验逻辑基础上，新增独立的空输入场景提示，将“未输入内容”和“输入内容错误”两类提示做区分
• 踩坑记录1：给<input>标签添加required属性后，整套自定义的登录校验逻辑完全失效
• 踩坑记录2：自行新增的空输入判断逻辑完全不生效，达不到预期的提示效果

问题根因说明 #

1. 代码执行顺序逻辑错位
   你把空输入的判断分支写在了账号密码匹配校验的后方，而原有匹配逻辑里，只要不满足“账号密码完全正确”的条件，就会直接弹出错误提示、执行return跳出函数，后续的空输入判断代码完全没有机会执行。
2. 空输入判断条件覆盖不全
   你写的空判断逻辑是“账号和密码同时为空才弹窗”，实际业务场景中只要任意一个输入框为空白，都应该触发空输入提示，当前的判断条件无法覆盖“只填了账号没填密码”“只填了密码没填账号”这类常见漏填场景。
3. required属性触发拦截冲突
   HTML原生表单校验会在自定义校验逻辑执行前就拦截表单提交，如果你没有适配原生校验的拦截流程，就会出现自定义逻辑完全不运行的情况。这类场景下手写判断的可控性远高于依赖原生required属性。

修复后的完整可运行代码 #

function auth(event) {
  event.preventDefault();
  // 过滤输入值的首尾冗余空格
  const username = document.getElementById("username").value.trim();
  const password = document.getElementById("password").value.trim();

  // 优先执行空输入判断，给出独立提示
  if (username === "" || password === "") {
    alert("请输入完整的账号和密码信息");
    return;
  }

  // 再执行账号密码匹配校验
  if (username === "admin@gmail.com" && password === "user") {
    window.location.replace("http://www.rex14.ml/");
  } else {
    alert("请输入有效的账号和密码信息");
    return;
  }
}

优化细节说明 #

• 调整判断优先级，先校验空输入场景，再校验内容匹配度，从根源上避免分支堵死后续逻辑不执行的问题
• 空输入判断逻辑调整，改为“任意一个输入框为空即触发提示”，覆盖所有漏填场景
• 增加.trim()处理，过滤用户输入时误带的首尾空格，减少不必要的误判
• 无需依赖HTML原生required属性，规避原生校验和自定义逻辑的冲突问题

内容的提问来源于stack exchange，提问作者Kumail Rizvi