使用JavaScript编写表单验证逻辑时无法触发alert校验提示

你的代码存在三处核心问题导致校验逻辑未按预期执行：

• 提交按钮type属性错误：当前使用的type="button"不会触发表单的onsubmit事件，绑定的校验函数根本不会被调用，需要改为type="submit"。
• DOM元素取值不匹配：密码输入框的name属性值为pass，但JS代码中通过document.login.password取值，无法找到对应元素，会直接抛出JS错误中断逻辑。
• 原校验逻辑遗漏密码为空的判断分支，不符合空输入弹出提示的设计需求。

修正后完整可运行代码 #

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" id="email" placeholder="BCBS outlook email">
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" id="pass">
    <br>
    <input type="submit" value="submit">
  </form>

  <script>
    function validateform() {
      // 匹配表单元素的name属性取值，同时去除输入内容前后的空格
      const email = document.login.email.value.trim();
      const password = document.login.pass.value.trim();

      if (!email) {
        alert("邮箱不能为空");
        return false;
      }
      if (!password) {
        alert("密码不能为空");
        return false;
      }
      if (password.length < 6) {
        alert("密码长度至少为6位");
        return false;
      }
      // 所有校验通过返回true，允许表单提交
      return true;
    }
  </script>
</body>
</html>

修改点说明：

• 新增trim()处理输入内容前后的空格，避免用户输入全空格绕过非空校验
• 移除了input上无效的自定义text属性，替换为原生合法的placeholder属性实现输入提示
• 拆分判断分支为独立if块，逻辑更清晰，后续新增校验规则更方便

内容的提问来源于stack exchange，提问作者Gaurav Chandrashekar