检查 HTML 输入元素是否为空或用户没有输入值答案

【问题标题】：Check if an HTML input element is empty or has no value entered by user检查 HTML 输入元素是否为空或用户没有输入值
【发布时间】：2012-02-06 20:56:49
【问题描述】：

此处与this 问题相关。我可以检查 DOM 中的元素是否有值吗？我正在尝试将其放入“if”语句中，但不确定我的方法是否正确。如下：

if (document.getElementById('customx')){
    //do something
}

或者应该是：

if (document.getElementById('customx') == ""){
    //do something
}

编辑：我的意思是，customx 是一个文本输入框。如何检查此字段是否没有输入文本。

【问题讨论】：

【解决方案1】：

getElementById 方法返回一个 Element 对象，您可以使用该对象与元素进行交互。如果未找到该元素，则返回 null。在输入元素的情况下，对象的value 属性包含 value 属性中的字符串。

通过使用&& 运算符短路的事实，以及null 和空字符串在布尔上下文中都被认为是“假”的，我们可以将元素存在和值数据存在的检查组合为如下：

var myInput = document.getElementById("customx");
if (myInput && myInput.value) {
  alert("My input has a value!");
}

【讨论】：

@simon 对我来说在 Chrome 上运行良好。请记住，在 DOMContentLoaded 事件触发 developer.mozilla.org/en-US/docs/Web/API/Window/… 之前，您无法访问文档对象的元素
谢谢你让我看看，我有问题会告诉你

【解决方案2】：

如果在 DOM 中找不到该元素，getElementById 将返回 false。

var el = document.getElementById("customx");
if (el !== null && el.value === "")
{
  //The element was found and the value is empty.
}

【讨论】：

【解决方案3】：

var input = document.getElementById("customx");

if (input && input.value) {
    alert(1);
}
else {
    alert (0);
}

【讨论】：

【解决方案4】：

你的第一个基本上是对的。仅供参考，这很糟糕。它在 DOM 节点和字符串之间进行相等性检查：

if (document.getElementById('customx') == ""){

DOM 节点实际上是它们自己的 JavaScript 对象类型。因此，这种比较根本不会起作用，因为它是对两种截然不同的数据类型进行相等比较。

【讨论】：

【解决方案5】：

你想要：

if (document.getElementById('customx').value === ""){
    //do something
}

value 属性将为您提供一个字符串值，您需要将其与空字符串进行比较。

【讨论】：