检查HTML输入元素是否为空或用户未输入任何值

Question

与这里的问题相关。我能否检查DOM中的元素是否具有值？我试图将其放入“if”语句中，但不确定我的方法是否正确。下面是代码:

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

应该这样吗？

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

编辑：我所说的“按值传递”，是指customx是一个文本输入框。如何检查该字段是否没有输入任何文本。

- zik

---

定义“值”。您指的是文本内容？子元素？还是value属性？ - Mr Lister

“value” 是什么意思？是指 <input type="text" value="myValue"> 还是 <span>myValue</span>？ - Jonas Høgh

嗨，抱歉我的问题应该更明确一些。我已经更新了我的问题。 - zik

Answer 1

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

通过利用 && 运算符的短路特性以及在布尔上下文中将 null 和空字符串都视为"假值"，我们可以将存在检查和值数据是否存在的检查结合起来，如下所示：

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

- Jonas Høgh

---

@simon 对我来说在 Chrome 上运行正常。请记住，在 DOMContentLoaded 事件触发之前，您无法访问文档对象的元素。https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event - Jonas Høgh

谢谢，让我结账。如果我有问题，我会告诉你的。 - simon

Answer 2

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

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

- Dreendle

Answer 3

空并不等同于“没有值”。

当输入无效时，HTMLInputElement.value 为 ''。如果 .value 不是 ''，那么它就不是空的。这是肯定的，但是有时候会出现 .value === '' 但并非为空的情况，因此我们需要测试。例如，在 Chrome 中，对于 number 输入类型，如果您输入 . 或 e，它将被放置在输入框中，但是 .value 不会从 '' 更改，因为它是无效的。

<input type=number>

我们可以向浏览器请求更多信息，幸运的是，ValidityState 得到了极好的支持。基本上，如果没有值，但浏览器说有错误输入，则它不是空的。

function isInputEmpty(input) {
  return !input.value && !input.validity.badInput;
}

编辑：感谢@osullic在规范中找到了这个：

控件的值是其内部状态。因此，它可能与用户当前的输入不匹配。

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#a-form-control's-value

- ShortFuse

---

这是一个有趣的回答，但如果您能提供一些参考链接就更好了。我想确保在标准浏览器中可以真正依赖 HTMLInputElement.value 除非输入的内容通过验证，否则不会改变。 - osullic

规范确实似乎与您所说的相符：https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#a-form-control's-value - osullic

@osullic 谢谢你提供的参考。我发现这个问题是因为我正在尝试使用Web组件实现HTMLInputElement，并且正在紧密遵循规范。有一种方法可以使用 :placeholder-shown 来进行检测，但是需要添加一个占位符（即使是空的），然后这会影响文本选择。badInput 似乎更兼容。 - ShortFuse

Answer 4

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

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

- MarShalL89PL

Answer 5

var myInput = document.getElementById("customx");
if (myInput.value.length > 0) {
  //do something;
}

(.length > 0 是另一种检查输入元素的方式)

- Dennis

---

感谢您的回答。我添加了一些上下文，以明确您的解决方案带来了什么；在未来，为了提高答案的质量，请添加一些上下文。请参阅如何回答获取一些提示。 - mlhDev

Answer 6

你的第一个基本上是正确的。但是，顺便说一下，这是不好的。它在DOM节点和字符串之间进行相等性检查：

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

DOM节点实际上是JavaScript对象的一种类型。因此，这种比较根本不起作用，因为它在两种明显不同的数据类型之间进行了相等性比较。

- Mike Thomsen

---

第一个也不正确。它检查的是元素是否存在，而不是它是否有值。 - Jonas Høgh

Answer 7

你想要：

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

value属性会给你一个字符串值，你需要将其与空字符串进行比较。

- Quentin

---

请记住，" "与""是不同的，但在屏幕上很难分辨。 - Quentin

请注意，如果该元素不存在，则会崩溃。 - Jonas Høgh