JavaScript入门者求助：二次方程计算器非法输入无法触发alert弹窗

问题根因 #

你的alert无法触发和未完成的计算分支没有任何关系，核心是两处代码逻辑错误：

1. 调用checkValidity()的对象错误
   checkValidity()是表单DOM元素自带的方法，你代码里先通过valueAsNumber把输入框的值转成了数字类型，数字变量没有这个方法，代码运行到这里会直接抛出类型错误中断执行，后续的弹窗逻辑完全不会运行。
2. a=0的场景被漏判
   你外层判断用了if (!form.checkValidity())，但你写的input原生校验规则里没有限制a不能为0，当输入a=0时原生表单校验会判定为合法，直接进入后续空的计算分支，根本不会走到你的错误提示逻辑里。

修正方案 #

修改JS代码如下即可正常触发alert：

function rootCal(form) {
  // 先获取输入框DOM元素
  var aInput = document.getElementById("a");
  var bInput = document.getElementById("b");
  var cInput = document.getElementById("c");
  // 再获取数值
  var a = aInput.valueAsNumber;
  var b = bInput.valueAsNumber;
  var c = cInput.valueAsNumber;
  // 用DOM元素调用校验方法
  var aOk = aInput.checkValidity();
  var bOk = bInput.checkValidity();
  var cOk = cInput.checkValidity();
  // 额外增加a非0的校验判断，只要有一个条件不满足就进错误处理
  var hasInvalid = !form.checkValidity() || a === 0;

  if (hasInvalid) {
    // 以下沿用你原来的判断逻辑即可
    if (((!aOk) || (a == 0)) && (bOk) && (cOk)) {
      alert(
        "localhost:8950 says:\n" +
        "a输入不合法，必须是-99到99之间的非零整数"
      );
    } else if ((aOk && a !== 0) && (!bOk) && (cOk)) {
      alert(
        "localhost:8950 says:\n" +
        "b输入不合法，必须是-99到99之间的整数"
      );
    } else if ((aOk && a !== 0) && (bOk) && (!cOk)) {
      alert(
        "localhost:8950 says:\n" +
        "c输入不合法，必须是-99到99之间的整数"
      );
    } else if (((!aOk) || (a == 0)) && (!bOk) && (cOk)) {
      alert(
        "localhost:8950 says:\n" +
        "a输入不合法，必须是-99到99之间的非零整数\n" +
        "b输入不合法，必须是-99到99之间的整数"
      );
    } else if (((!aOk) || (a == 0)) && (bOk) && (!cOk)) {
      alert(
        "localhost:8950 says:\n" +
        "a输入不合法，必须是-99到99之间的非零整数\n" +
        "c输入不合法，必须是-99到99之间的整数"
      );
    } else if ((!(aOk && a !== 0)) && (!bOk) && (!cOk)) {
      alert(
        "localhost:8950 says:\n" +
        "a输入不合法，必须是-99到99之间的非零整数\n" +
        "b输入不合法，必须是-99到99之间的整数\n" +
        "c输入不合法，必须是-99到99之间的整数"
      );
    }
  } else {
    // 后续在这里补全求根计算逻辑即可，空代码不影响前面的弹窗触发
    if ((b ** 2) < (4 * a * c)) {
      // 无实根逻辑
    } else if ((b ** 2) == (4 * a * c)) {
      // 重根逻辑
    } else {
      // 两个不同实根逻辑
    }
  }
}

调试技巧补充 #

后续开发遇到JS逻辑不生效的情况，先按F12打开浏览器开发者工具的控制台面板，运行代码后查看报错信息，绝大多数基础语法、类型错误都会直接给出问题位置和原因，能快速定位问题。

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