为何我编写的HTML表单JS异常处理逻辑无法正常捕获错误？

你遇到的点击提交按钮无异常提示的问题，本质是多段代码错误叠加导致JS执行中断，和浏览器调试设置、表单结构没有关系，具体问题点如下：

• DOM变量取值时机错误
  你在全局代码执行阶段，直接把输入框的value值存到了变量里：

  var fname = document.getElementById("firstname").value;
  

  这行代码会在页面刚加载、用户还未输入任何内容时执行，存到变量里的永远是加载时的空值，后续用户的输入完全不会同步到这个变量。更关键的是，你后续在校验函数中给这个变量加.value属性读取、修改style样式——本质是在字符串类型的值上访问DOM属性，这行代码执行时会直接抛出JS类型错误，中断整个校验流程。
• 引用不存在的DOM元素
  你在verifyFname、verifyEmail的finally块中，写了numErrorDiv.style.display = "block"的代码，但整个HTML页面根本不存在ID为numErrorDiv的元素，这行代码执行时会直接抛出未定义变量错误，所有后续的错误提示渲染、表单判断逻辑都会被中断，根本跑不到展示提示的步骤。
• 校验判断逻辑写反
  你原来的名输入框校验条件if(!(isNaN(fname.value)) || (fname.value === ""))，翻译过来是“如果输入内容不是数字，或者输入为空，就判定为非法”——用户输入正常的字母名字时，因为内容不是数字，反而会被判定为错误，逻辑完全和需求相反。
• 校验状态未同步到全局表单校验标识
  你在校验函数内部修改了fnameComplete、lnameComplete、emailComplete三个独立状态，但在validateForm中从未把这些状态的结果赋值给总标识formValidity，哪怕所有输入都不合法，总校验状态也永远是初始的true。
• 提示内容错配
  姓（lastname）输入框的校验错误提示，被写成了“请输入您的名”，和对应输入框的功能不匹配。

修正后的核心逻辑参考 #

把全局变量改为存储DOM元素本身，不提前缓存value值：

"use strict";
// 存储DOM元素引用，使用时再实时读取输入值
var fnameEl = document.getElementById("firstname");
var lnameEl = document.getElementById("lastname");
var emailEl = document.getElementById("emailaddress");
var errorDiv = document.getElementById("errorText");
var formValidity = true;

function verifyFname() {
  var validity = true;    
  var messageText = "";
  try {
    // 实时读取输入值，去除首尾空格
    const inputVal = fnameEl.value.trim();
    // 正确的校验逻辑：空值、纯数字均判定为非法
    if (inputVal === "" || !isNaN(inputVal)) {
      fnameEl.style.background = "rgb(255,233,233)";
      throw "请输入您的名（不能为纯数字或空值）";
    }
    // 输入合法时清除之前的错误背景
    fnameEl.style.background = "";
  }
  catch(message) {
    validity = false;
    messageText = message;
  }
  finally {
    errorDiv.style.display = "block";
    errorDiv.innerHTML = messageText;
    // 将校验结果返回给外层汇总
    return validity;
  }
}

// verifyLname、verifyEmail的修改逻辑与verifyFname一致，仅需修改对应DOM引用、校验规则、错误提示文案
// 汇总所有校验结果后再决定是否提交表单
function validateForm(e) {
  e.preventDefault ? e.preventDefault() : (e.returnValue = false);
  formValidity = true;
  // 只要任意校验项不通过，就将总校验状态设为false
  if(!verifyFname()) formValidity = false;
  if(!verifyLname()) formValidity = false;
  if(!verifyEmail()) formValidity = false;
  
  if(formValidity) {
    document.getElementsByTagName("form")[0].submit();
  }
}

调整后重新运行，点击提交时就能正常触发对应的错误提示了。

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