如何用JavaScript检测文本框是否填写，未填写时弹出提示？

我来帮你搞定这个文本框必填验证的需求～其实思路很简单：先拿到文本框的内容，判断它是不是空的（连空格都算未填写哦），如果没填就弹提示，还能顺便优化下用户体验，比如让光标自动定位到未填的框里。

给你一套完整的可运行代码示例：

HTML部分 #

<form id="myForm">
  <label for="requiredInput">必填项：</label>
  <input type="text" id="requiredInput" name="requiredInput">
  <button type="submit">提交</button>
</form>

JavaScript部分 #

function checkInput() {
  // 获取目标文本框元素
  const inputEl = document.getElementById('requiredInput');
  // 去除内容两端的空格，避免用户只输入空格的情况
  const inputContent = inputEl.value.trim();

  if (!inputContent) {
    // 弹出提示告知用户必须填写
    alert('该内容为必填项，请填写后再提交！');
    // 让文本框自动获得焦点，方便用户直接输入
    inputEl.focus();
    // 如果是表单提交场景，返回false阻止默认提交行为
    return false;
  }
  // 验证通过，允许后续操作
  return true;
}

// 给表单绑定提交事件，触发验证
document.getElementById('myForm').addEventListener('submit', function(e) {
  if (!checkInput()) {
    e.preventDefault();
  }
});

额外说明 #

如果你的验证不是通过表单提交触发，而是普通按钮点击，直接给按钮绑定点击事件就行：

document.getElementById('submitBtn').addEventListener('click', checkInput);

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