Javascript 无输入时的输入框验证

我想做一个简单的计算器。您输入一个数字，然后输入第二个数字，再按加号，然后得到提示并给出答案。如果在未触摸输入字段时单击加号，我需要显示警报（“无数据”）

函数num1（）{
nm=document.getElementById（'nsum1'）。值；
}
函数num2（）{
mn=document.getElementById（'nsum2'）。值；
}
函数plus（）{
总和=+nm++mn；
如果（nm==null | | mn==null）{
警报（“无数据”）；
}否则{
警报（总和）；
}
}

加

如果您没有接触输入字段并获得值，那么结果将是

“”

你需要像这样的条件

if (nm == "" || mn == "") {
alert('no data');
}

此外，您还应该在验证之后执行操作。您正在执行操作，然后进行验证

---

还修复了其他问题

function plus（）{
mn=document.getElementById（'nsum2'）。值；
nm=document.getElementById（'nsum1'）。值；
如果（nm==“”| mn==“”）{
警报（“无数据”）；
}否则{
总和=+nm++mn；
警报（总和）；
}
}

加

尝试通过Inspector跟踪它，可能会先记录nm和mn的值，然后再做其他事情，并相应地纠正您的情况（作为示例）

它很可能只是一片空白。因此，在这种情况下，您可以将您的条件修改为：

if (nm === '' || mn === '') {...}

---

希望它能有所帮助

我对您的代码做了一些修改，使其更加健壮。有关说明，请参见内联注释

声明变量 声明变量是很重要的，当您不确定时，您使用的所有变量都将在全局范围内结束。当你在谷歌上搜索这篇文章时，你会发现很多像这样的文章：

防止污染全球范围。在一个小型网站上，这可能不是什么大问题，但在处理大型项目或使用第三方代码时，这是必须的。上面的链接也在一定程度上解释了这一点

使用按钮如果您想让某些内容具有交互性，请使用用于该内容的HTML元素。应该使用

按钮

元素，它具有

span

所没有的各种辅助功能。例如，默认情况下，当使用

选项卡

键浏览您的网站时，它将接收焦点

使用描述性变量名

nm

和

mn

现在可能对您有意义，但6个月后它将是一个完全的谜。它还使代码更具可读性，因此更易于维护

在JS中附加事件监听器一般来说，通过HTML属性

onXXX=”“

分配事件监听器是个坏主意。当您想要更改某些内容时，它更容易出错，而且时间更为密集

//将代码包装在一个闭包中，以防止对全局范围的争论。
（功能（）{
//始终声明变量。这些变量的作用域不再局限于窗口对象，而不再局限于我们所处的函数。
变量
valueA=null，
valueB=null；
/**
*要检查输入的数字是否有效，需要进行两次检查。
*最好将这些放在他们自己的方法中，这样你就可以成为另一个了
*方法更具可读性。
*/
函数isNumber（值）{
如果(
//==空检查未定义和空
值==null||
值==''||
伊斯南（价值）
) {
返回false；
}
返回true；
}
函数onChangeHandler（事件）{
变量
//获取调度事件的元素。
target=event.target；
//检查目标是否具有我们分配给输入的类，当然，您不能忽略该事件。
如果（！target.classList.contains（'js-input'））{
回来
}
//根据目标的ID，将值分配给值的一个变量。
开关（target.id）{
案例“nsum1”：
valueA=parseFloat（target.value）；
打破
案例“nsum2”：
valueB=parseFloat（target.value）；
打破
}
}
函数onSumTriggerClicked（事件）{
//检查是否有数字可供使用
如果(
！isNumber（值A）||
！isNumber（值B）
) {
//如果没有，请提醒用户
警报（“无数据”）；
回来
}
总和=值A+值B；
警报（总和）；
}
函数init（）{
变量
//获取计算器元素。
calculator=document.getElementById（'calculator'），
//获取按钮以汇总值。
sumButton=document.getElementById（'sum-trigger'）；
//为更改事件添加事件侦听器。
calculator.addEventListener（'change'，onChangeHandler）；
//为单击事件添加事件侦听器。
sumButton.addEventListener（'click'，onSumTriggerClicked）；
}
//调用init方法。
init（）；
})();

加
请用作参考

我已经修正了你的密码

  if ( num1 === '' && num2 === '' ) {
    alert('no data');
  } else {
    alert( parseInt(num1) + parseInt(num2) );
  }

你可以做得容易得多


函数加号（num1，num2）{
警报（isNaN（num1）| isNaN（num2）-“无数据”：num1+num2）；
}
函数getNumber（id）{
返回parseFloat（document.getElementById（id）.value）；
}

加
如果您不接触输入字段，nm和mn将是未定义的。@Durga您确定吗？根据问题片段，
nm和mn
在您更改输入之前是未定义的。@Durga True。但问题是OP根本不需要更改处理程序。这是公认的答案，但显示了污染全局的变量的代码，我就是觉得不对劲。是的，这是OP的一个错误，但即使如此..你能详细说明一下
总是声明变量吗？我不这么做，但我想知道你为什么强烈建议这样做。@Keith，谢谢，愚蠢的打字错误。至于为什么总是声明变量，这是一个很好的介绍：。@DouwedeHaan我对JS和HTML做了一些进一步的更改，并更新了我的答案，解释了更改的内容。我认为声明变量
  if ( num1 === '' && num2 === '' ) {
    alert('no data');
  } else {
    alert( parseInt(num1) + parseInt(num2) );
  }