本文介绍如何使用 jquery 对邮箱输入框进行实时格式校验，并在邮箱合法且不等于指定黑名单邮箱时自动启用提交按钮，解决因遗漏启用逻辑导致按钮始终禁用的问题。
本文介绍如何使用 jquery 对邮箱输入框进行实时格式校验，并在邮箱合法且不等于指定黑名单邮箱时自动启用提交按钮，解决因遗漏启用逻辑导致按钮始终禁用的问题。
在表单交互中，常需对用户输入的邮箱地址进行双重校验：一是验证其是否符合标准邮箱格式；二是排除特定禁止使用的邮箱（如测试账号、系统预留邮箱等）。同时，为提升用户体验，提交按钮应默认禁用，并仅在两项校验均通过时才启用。
原代码存在关键逻辑缺陷：只在非法邮箱或黑名单邮箱两种情况下设置 disabled = true，却从未显式将按钮设为启用状态（disabled = false），导致一旦触发任一禁用条件，按钮将永久保持禁用。
✅ 正确做法是采用“默认启用 → 条件禁用”或更推荐的“条件禁用 → 兜底启用”策略。以下是优化后的完整实现：
$(document).ready(function() {
// 预定义黑名单邮箱（注意：需解码 Cloudflare 邮箱保护后的实际值）
const blockedEmail = "test@example.com"; // 替换为真实邮箱，非 HTML 标签
$('.keyup-email').on('input', function() { // 推荐使用 'input' 而非 'keyup'，兼容粘贴、剪切等操作
const inputVal = $(this).val().trim();
// 基础邮箱正则（增强版，支持常见域名后缀）
const emailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
if (!emailReg.test(inputVal)) {
$(".edBtn").prop("disabled", true);
} else if (inputVal.toLowerCase() === blockedEmail.toLowerCase()) {
$(".edBtn").prop("disabled", true);
} else {
$(".edBtn").prop("disabled", false); // ✅ 关键修复：满足所有条件时启用按钮
}
});
});
? 重要注意事项：
- 避免直接比对 HTML 字符串：原代码中 inputVal == '[email@domain.com]' 是错误的——用户输入的是纯文本邮箱（如 test@example.com），而非渲染后的 标签。Cloudflare 的邮箱保护（data-cfemail）仅用于前端混淆显示，实际表单值应为明文邮箱。请确保 blockedEmail 使用原始字符串（如 "test@example.com"），而非 HTML 片段。
- 使用 input 事件替代 keyup：input 可捕获粘贴、拖入、自动填充等所有输入变更，鲁棒性更强。
- 增加 .trim()：防止空格干扰校验。
- 忽略大小写比较：邮箱域名部分不区分大小写，建议统一转小写再比对。
- 正则增强说明：所用正则参考 RFC 5322 简化版，覆盖主流邮箱格式（含 .co.uk、.info 等长后缀），比原正则更严谨（原正则不支持 + 号、缺少开头数字校验等）。
? 进阶建议：
- 可结合 blur 事件做最终校验并显示友好提示；
- 若需服务端校验同步，应在提交前发起轻量 API 检查（如防批量注册）；
- 对敏感场景，黑名单建议由后端下发，避免前端硬编码。
通过以上调整，按钮将严格遵循“仅当邮箱格式正确且非禁止邮箱时启用”的业务逻辑，显著提升表单可用性与健壮性。
