jQuery表单验证问题：仅检测单个空输入，无法同时校验两个字段

你遇到的问题核心是逻辑顺序和.each()的用法理解偏差，咱们一步步拆解问题并修复：

问题根源分析 #

你当前的代码逻辑是在.each()循环里，每遍历一个输入框就做判断：为空就弹提示，否则直接执行Ajax。这就导致只要第一个输入框（用户名）填了内容，代码会立刻进入else分支触发Ajax请求，根本没机会检查第二个密码字段！而且.each()里的return false只是终止当前循环，不会阻止后续的Ajax代码执行——这就是为什么只有用户名留空时才会正确提示的原因。

另外你尝试的if($(this).length === 0)逻辑本身就不对，每个选中的输入框元素的length都是1，这个判断完全起不到验证空值的作用。

修复思路：先全量验证，再执行Ajax #

正确的逻辑应该是：先遍历所有需要验证的字段，确认没有空值后，再发起Ajax请求。具体步骤如下：

1. 声明一个标记变量，记录是否存在空字段
2. 遍历需要验证的输入框（注意排除提交按钮，避免误判）
3. 遍历结束后根据标记决定是弹提示还是发请求

修正后的完整代码 #

HTML部分（给需要验证的字段加统一类，方便精准选择）

<div id="dialog_success" title="Success">
  <p></p>
</div>
<div id="dialog_error" title="Error">
  <p>If you see this text, check your jQuery.</p>
</div>
<div class="container">
  <h2 class="form-heading">Create New User</h2>
  <form id="insert_user_form" method="post" action="create_user.php" autocomplete="off">
    <div class="container">
      <label for="username">Username</label>
      <input id="username_input" type="text" placeholder="Enter Username" name="username" autofocus class="required">
      <label for="password">Password</label>
      <input type="password" placeholder="Enter Password" name="password" class="required">
      <button id="create_user_btn" type="submit">Submit</button>
    </div>
  </form>
</div>

jQuery部分

$('#insert_user_form').submit(function (e) {
  e.preventDefault();
  
  // 初始化标记：默认没有空字段
  var hasEmptyField = false;
  
  // 只遍历需要验证的输入框（用我们加的.required类）
  $('.required').each(function () {
    // 用trim()处理用户只输入空格的情况
    if ($.trim($(this).val()) === "") {
      hasEmptyField = true;
      // 发现空字段后终止循环，不用继续检查剩余字段
      return false;
    }
  });
  
  // 根据标记执行对应操作
  if (hasEmptyField) {
    $('#dialog_error').dialog("open");
    $('.ui-widget-overlay').css({'background': 'red', 'opacity': '0.7'});
    $('#dialog_error p').text("Please fill out all fields.");
  } else {
    // 所有字段都不为空，执行Ajax请求
    $.ajax({
      type: 'POST',
      url: 'create_user.php', // 补全请求地址
      data: $(this).serialize(), // 快速序列化表单所有数据
      success: function(response) {
        // 请求成功后的处理，比如弹出成功提示
        $('#dialog_success p').text("User created successfully!");
        $('#dialog_success').dialog("open");
      },
      error: function() {
        // 请求失败的处理
        $('#dialog_error p').text("Failed to create user.");
        $('#dialog_error').dialog("open");
      }
    });
  }
});

额外优化说明 #

• 用.required类标记需要验证的字段，比:input更精准，不会把提交按钮这类无需验证的元素包含进来
• $.trim()可以避免用户只输入空格就通过验证的情况
• .each()里的return false用于终止循环，减少不必要的性能消耗
• Ajax用serialize()可以快速获取表单所有数据，不用手动拼接参数

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