如何使用 js 检查 html 中的输入是否为空 - Javascript

在网站开发中，我们经常需要验证用户输入的表单数据是否为空。本文将介绍如何使用 JavaScript 检查 HTML 中的输入是否为空。

HTML 表单

首先，我们需要在 HTML 中创建表单，以便用户输入数据。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email">

  <button type="submit">提交</button>
</form>

在这个例子中，我们创建了一个简单的表单，包含两个输入框（姓名和电子邮件）以及一个提交按钮。

JavaScript 验证

接下来，我们需要创建一个 JavaScript 函数来验证输入框的值是否为空。

function validateForm() {
  var name = document.forms[0].name.value;
  var email = document.forms[0].email.value;

  if (name == "") {
    alert("请输入您的姓名！");
    return false;
  }

  if (email == "") {
    alert("请输入您的电子邮件！");
    return false;
  }

  return true;
}

这个函数首先获取表单中输入框的值，并将它们存储在变量 name 和 email 中。然后，它检查这些变量的值是否为空。如果是，就弹出警告框提示用户输入数据，并返回 false。如果输入框中有值，就返回 true。

HTML 表单绑定

最后，我们需要将验证函数绑定到 HTML 表单上，在用户提交表单时触发。

<form onsubmit="return validateForm()">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email">

  <button type="submit">提交</button>
</form>

在这个例子中，我们将 onsubmit 属性设置为 validateForm() 函数，并添加了一个 return，以便在验证函数返回 false 时，阻止表单提交。

结论

通过这个简单的例子，您学会了如何使用 JavaScript 检查 HTML 表单中的输入是否为空。在实际项目中，您可以根据业务需求进行扩展，比如增加更多的验证规则，或者使用框架来简化表单验证的过程。