表单中邮箱无@、手机号不足8位时隐藏按钮的实现问题

问题根因 #

• 原有代码仅对手机号输入框（类名.vti__input）做了输入监听，没有覆盖邮箱输入框的输入动作
• 校验条件只判断了手机号长度，缺少邮箱是否包含@字符的校验逻辑

修复后JS代码 #

// 同时监听邮箱、手机号两个输入框的输入行为
$('.vti__input, .input-text').on('keyup input', function() {
  // 提取两个输入框的有效值（自动去掉前后空格）
  const phoneValue = $('.vti__input').val().trim();
  const emailValue = $('.input-text').val().trim();

  // 分别校验两个输入框是否符合要求
  const phoneValid = phoneValue.length >= 8;
  const emailValid = emailValue.includes('@');

  // 两个条件同时满足才显示功能按钮，否则隐藏
  $('.widget-channels').toggle(phoneValid && emailValid);
}).trigger('input'); // 页面加载完成后自动执行一次校验，匹配初始状态

说明 #

• 同时绑定keyup和input事件，覆盖键盘输入、粘贴、浏览器自动填充等所有输入场景，不会出现校验遗漏
• 使用toggle()方法替代手动的show/hide，代码更简洁
• 新增trim()处理，可以避免用户误输入前后空格导致的校验异常

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