如何在jQuery邮箱验证中去除@mail.com前用户名的所有点？

嘿，这个需求其实很好实现，核心思路就是把邮箱拆成「用户名」和「@mail.com后缀」两部分，清理掉用户名里的所有点之后再重新拼接。我给你准备了两种常见场景的实现方案：

场景1：用户输入完成后（失去焦点时）处理 #

适合在用户输入完邮箱、离开输入框时自动完成清理，避免干扰输入过程：

// 给邮箱输入框绑定失去焦点事件
$('#emailInput').on('blur', function() {
  const originalEmail = $(this).val().trim();
  // 先判断是否为@mail.com结尾的邮箱，避免误处理其他域名邮箱
  if (originalEmail.endsWith('@mail.com')) {
    // 分割出@mail.com之前的用户名部分
    const usernamePart = originalEmail.split('@mail.com')[0];
    // 全局移除所有点（正则里的\.是转义点，g表示全局替换）
    const cleanedUsername = usernamePart.replace(/\./g, '');
    // 重新组合成清理后的邮箱
    const finalEmail = `${cleanedUsername}@mail.com`;
    // 更新输入框的值
    $(this).val(finalEmail);
  }
});

场景2：实时输入时自动清理 #

如果想要用户输入过程中就自动去掉点，提升交互体验，可以用input事件，还能处理光标位置避免跳走：

$('#emailInput').on('input', function() {
  let currentEmail = $(this).val();
  // 检查是否包含@mail.com（兼容用户还在输入后缀的情况）
  if (currentEmail.includes('@mail.com')) {
    // 分割用户名和后缀部分
    const [usernamePart, extraSuffix] = currentEmail.split('@mail.com');
    // 清理用户名里的所有点
    const cleanedUsername = usernamePart.replace(/\./g, '');
    // 重新拼接，保留用户可能误输入的多余字符
    const updatedEmail = `${cleanedUsername}@mail.com${extraSuffix || ''}`;
    // 更新输入框内容
    $(this).val(updatedEmail);
    
    // 调整光标位置，避免替换后光标乱跑
    const cursorPosition = cleanedUsername.length + '@mail.com'.length;
    this.setSelectionRange(cursorPosition, cursorPosition);
  }
});

关键代码说明 #

• endsWith('@mail.com')：确保只处理目标域名的邮箱，防止误操作其他邮箱地址
• replace(/\./g, '')：用正则表达式全局替换所有点符号，这里的\.是因为点在正则中代表任意字符，必须转义才能匹配实际的点
• 光标定位：setSelectionRange是原生JS方法，用来保持光标在用户输入的位置，避免替换后光标跳转到开头/结尾，提升体验

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