输入框邮箱验证与指定邮箱排除问题：按钮无法正常启用

需求是实现输入框的邮箱验证，需排除指定邮箱test@test.com——仅当输入的邮箱格式合规且不是该指定邮箱时，提交按钮才启用，否则保持禁用状态。但实际测试时，输入合规的非指定邮箱后，按钮依然处于禁用状态。

原代码的核心问题 #

1. 缺失启用按钮的逻辑：代码只处理了「禁用按钮」的场景（邮箱格式不合规、输入的是指定邮箱），完全没写「符合条件时启用按钮」的逻辑。按钮一旦被禁用，就再也无法恢复启用状态。
2. 正则表达式不严谨：邮箱正则末尾缺少$锚定符，导致部分匹配的字符串（比如abc@def.co123这种不符合规范的格式）也会被判定为合规，无法严格校验完整的邮箱格式。

修复后的完整代码 #

JavaScript 代码

$(document).ready(function(){
  $('.keyup-email').keyup(function() {
    var inputVal = $(this).val().trim(); // 去除首尾空格，避免空格干扰验证结果
    // 修正正则，添加$确保匹配完整的邮箱字符串，保留原需求的下划线排除规则
    var emailReg = /^(?!.*_)\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})$/;
    
    // 只要满足「邮箱不合规」或「是指定邮箱」任一条件，就禁用按钮
    if(!emailReg.test(inputVal) || inputVal === 'test@test.com') {
      $(".edBtn").prop("disabled", true);
    } else {
      // 符合所有要求时，启用按钮
      $(".edBtn").prop("disabled", false);
    }
  });
});

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="keyup-email text-input" name="7" value="">
<div class="row">
  <button type="button" id="m1p" class="edBtn" disabled>submit</button>
</div>

关键改动说明 #

• 新增else分支：明确处理「邮箱合规且非指定邮箱」的场景，将按钮的disabled属性设为false，让按钮能正常启用。
• 完善正则表达式：添加$锚定字符串结尾，确保只有完全符合格式的邮箱才能通过验证。
• 输入值去空格：用trim()处理输入内容，避免用户误输入的首尾空格导致验证失误。
• 初始禁用按钮：HTML中默认给按钮加上disabled属性，符合页面加载时的初始状态需求。

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