如何使用JQUERY批量检查数组中的输入框是否存在空值？

当然可以，jQuery的选择器和过滤方法能帮你快速批量检查输入框，不用逐个遍历判断。下面是具体实现方案：

基础实现示例 #

假设你有如下表单结构：

<form id="targetForm">
  <input type="text" placeholder="姓名" class="check-field">
  <input type="email" placeholder="邮箱" class="check-field">
  <input type="tel" placeholder="手机号" class="check-field">
  <button type="button" id="sendBtn">发送</button>
</form>

对应的jQuery代码：

$('#sendBtn').on('click', function() {
  // 筛选出所有去除空白后为空的输入框
  const emptyInputs = $('.check-field').filter(function() {
    return $.trim($(this).val()) === '';
  });

  if (emptyInputs.length > 0) {
    // 高亮未填写的输入框（需提前定义.error样式，比如红色边框）
    emptyInputs.addClass('error');
    // 提示用户
    alert('请填写所有必填字段！');
    // 自动聚焦到第一个未填写的输入框，提升用户体验
    emptyInputs.first().focus();
  } else {
    // 所有字段已填写，执行发送逻辑或提交表单
    console.log('所有字段已填写，开始发送');
    // $('#targetForm').submit();
  }
});

关键说明 #

• 用filter()方法批量筛选符合条件的输入框，jQuery内部完成遍历，无需手动循环每个元素。
• $.trim()用于排除用户仅输入空格的情况，如果不需要过滤空格，直接判断$(this).val() === ''即可。
• 如果只需检查表单里的必填项（带required属性的输入框），可以把选择器改成$('#targetForm input[required]')，精准定位需要检查的元素。
• 提示方式可以自定义，比如替换alert为页面内的错误提示文本，或者用弹窗组件，让交互更友好。

内容的提问来源于stack exchange，提问作者Maxyme Jarrier