jQuery表单验证问题：手机号与下拉选框为空无错误提示

一、先说说你当前代码的潜在问题 #

你贴的代码只处理了contact_name字段的input事件，但手机号和下拉框这俩控件有自己的特性，大概率是你没处理对：

1. 手机号字段：你可能只绑定了input事件，但如果用户直接点提交按钮、根本没碰手机号输入框，input事件压根不会触发，自然不会验证空值。另外，就算绑定了事件，也可能是空值判断的逻辑写反了——比如你只在有值的时候加了valid类，但没在空值的时候加invalid类、显示错误提示。
2. 下拉选择框：下拉框的值变化是通过选择选项触发的，input事件对它完全无效！得用change事件才行。而且如果你的默认选项是空值（比如<option value="">请选择</option>），你得在change事件里判断用户是不是选了有效选项，不能只靠输入事件。

另外，你只给了名字字段的代码，没看到手机号和下拉框的验证逻辑，很大可能是这俩字段要么没绑定事件，要么事件绑定错了，要么空值判断的条件不对。

二、你的实现方式的核心问题 #

你现在只做了单个字段输入时的即时验证，但缺了最关键的表单提交时的全局验证！用户完全可以跳过输入步骤直接提交，这时候你的即时验证根本没机会触发，手机号和下拉框的空值错误自然不会显示。

三、给你修正后的完整示例代码 #

我写了一个包含名字、手机号、下拉框的完整验证示例，还加了表单提交时的全局校验，你可以参考：

$(document).ready(function() {
  // 写个通用验证函数，避免重复代码
  function checkFieldValidity(field, validateRule) {
    const inputValue = field.val().trim();
    const isPass = validateRule(inputValue);
    
    if (isPass) {
      field.removeClass("invalid").addClass("valid");
      // 假设错误提示是字段的兄弟元素，这里隐藏它
      field.siblings(".error-tip").hide();
    } else {
      field.removeClass("valid").addClass("invalid");
      field.siblings(".error-tip").show();
    }
    return isPass;
  }

  // 姓名验证：非空即可
  $('#contact_name').on('input', function() {
    checkFieldValidity($(this), (val) => val.length > 0);
  });

  // 手机号验证：非空+符合手机号格式
  $('#contact_phone').on('input', function() {
    checkFieldValidity($(this), (val) => {
      if (!val) return false;
      // 简单的11位手机号正则
      const phonePattern = /^1[3-9]\d{9}$/;
      return phonePattern.test(val);
    });
  });

  // 下拉框验证：必须选非空选项
  $('#contact_select').on('change', function() {
    checkFieldValidity($(this), (val) => val !== "");
  });

  // 表单提交时的全局验证，这步不能少！
  $('#contact_form').on('submit', function(e) {
    let isFormOK = true;
    
    // 手动触发所有字段的验证，确保没有遗漏
    isFormOK &= checkFieldValidity($('#contact_name'), (val) => val.length > 0);
    isFormOK &= checkFieldValidity($('#contact_phone'), (val) => {
      if (!val) return false;
      const phonePattern = /^1[3-9]\d{9}$/;
      return phonePattern.test(val);
    });
    isFormOK &= checkFieldValidity($('#contact_select'), (val) => val !== "");

    if (!isFormOK) {
      e.preventDefault(); // 阻止表单提交
      alert('还有必填字段没填对哦～');
    }
  });
});

对应的HTML大概是这样（要配合错误提示元素）：

<form id="contact_form">
  <div>
    <label>姓名：</label>
    <input type="text" id="contact_name">
    <span class="error-tip" style="display:none; color:red;">请输入姓名</span>
  </div>
  <div>
    <label>手机号：</label>
    <input type="tel" id="contact_phone">
    <span class="error-tip" style="display:none; color:red;">请输入有效的11位手机号</span>
  </div>
  <div>
    <label>选择项：</label>
    <select id="contact_select">
      <option value="">请选择</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
    </select>
    <span class="error-tip" style="display:none; color:red;">请选择一个选项</span>
  </div>
  <button type="submit">提交</button>
</form>

四、其他靠谱的实现方法 #

除了自己写jQuery，还有几种更省心的方式：

1. HTML5原生表单验证：不用写太多JS，靠required、pattern属性就能搞定基础验证，还能自定义提示语：

   <input type="tel" id="contact_phone" required pattern="^1[3-9]\d{9}$" title="请输入有效的11位手机号">
   <select id="contact_select" required>
     <option value="">请选择</option>
     ...
   </select>
   

   优点是零JS代码，简单快捷；缺点是不同浏览器的提示样式不一样，不好统一定制。

2. 用成熟的jQuery验证插件：比如jQuery Validation Plugin，它能帮你处理各种复杂场景，比如自定义验证规则、批量验证、错误提示样式定制，不用自己重复造轮子：
   示例（需要先引入插件）：

   $(document).ready(function() {
     $('#contact_form').validate({
       rules: {
         contact_name: { required: true },
         contact_phone: { required: true, pattern: /^1[3-9]\d{9}$/ },
         contact_select: { required: true }
       },
       messages: {
         contact_name: "请输入你的姓名",
         contact_phone: "请输入有效的手机号",
         contact_select: "请选择一个选项"
       }
     });
   });
   

   优点是功能强大，适配各种表单控件；缺点是需要额外引入插件文件。

3. 原生JS实现：如果不想依赖jQuery，用原生JS的addEventListener、checkValidity()这些API也能轻松实现，现在原生JS处理表单已经很顺手了。

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