如何使用jQuery阻止空值或非邮编格式的表单提交？

嘿，刚上手jQuery的话，做这个邮编验证其实没那么复杂～我来帮你一步步实现你要的功能：确保输入框有值、符合邮编格式，不符合就阻止提交还能给输入框加错误样式。

首先先补全你没写完的表单HTML（给你加了提交按钮，让结构更完整）：

<form action="url" class="form-inline" method="post" accept-charset="utf-8">
  <label for="zipcode">Zipcode</label>
  <input type="text" id="zipcode" name="zipcode" class="form-control">
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

接下来是核心的jQuery验证代码，我写得尽量直白，适合新手理解：

// 等页面所有元素加载完成再执行代码，避免找不到输入框
$(function() {
  // 监听表单的提交事件
  $('.form-inline').on('submit', function(event) {
    // 获取邮编输入框元素和它的值（去掉前后多余空格）
    const zipInput = $('#zipcode');
    const zipValue = zipInput.val().trim();
    
    // 这里用的是美国邮编的正则规则（支持5位数字，或者5-4的扩展格式）
    // 如果是中国邮编可以改成 /^\d{6}$/，完全可以根据你的需求调整
    const zipRegex = /^\d{5}(-\d{4})?$/;

    // 验证逻辑：没输入内容 或者 不符合邮编格式
    if (!zipValue || !zipRegex.test(zipValue)) {
      // 阻止表单默认的提交跳转行为
      event.preventDefault();
      // 给输入框添加错误类，同时移除可能存在的成功类
      zipInput.addClass('is-invalid').removeClass('is-valid');
    } else {
      // 验证通过，移除错误类，可选添加成功类提示
      zipInput.addClass('is-valid').removeClass('is-invalid');
    }
  });

  // 额外加个小细节：用户输入时自动移除错误样式，提升交互体验
  $('#zipcode').on('input', function() {
    $(this).removeClass('is-invalid');
  });
});

如果你没用到Bootstrap框架，可以自己写错误类的CSS样式，比如：

.is-invalid {
  border: 2px solid #dc3545; /* 红色边框提示错误 */
  background-color: rgba(220, 53, 69, 0.05); /* 淡红色背景增强视觉提示 */
}

.is-valid {
  border: 2px solid #198754; /* 绿色边框提示验证通过 */
}

最后给你捋几个关键知识点：

• $(function(){}) 是$(document).ready()的简写，确保页面元素加载完成后再执行JS，避免出现找不到元素的问题
• event.preventDefault() 是实现阻止提交的核心，能拦截表单默认的跳转提交行为
• trim() 用来过滤用户不小心输入的前后空格，避免空格导致的验证误判
• 正则表达式可以完全根据你需要的邮编格式自定义，比如只需要纯6位数字就改成/^\d{6}$/

这样就能完美实现你要的所有需求啦～

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