本文讲解如何使用 jquery 对邮箱输入框进行实时格式校验，并禁止用户输入特定黑名单邮箱（如 admin@example.com），同时动态启用/禁用提交按钮。
本文讲解如何使用 jquery 对邮箱输入框进行实时格式校验，并禁止用户输入特定黑名单邮箱（如 admin@example.com），同时动态启用/禁用提交按钮。
在表单交互中，常需确保用户输入合法且符合业务约束——例如邮箱格式正确，且不能是系统保留账号（如管理员邮箱）。本教程将完整实现：✅ 实时正则校验邮箱格式；✅ 排除指定黑名单邮箱；✅ 按条件动态启用/禁用提交按钮。
关键问题分析
原始代码仅在不满足条件时设置 disabled = true，却从未恢复启用状态，导致按钮一旦禁用便永远无法激活。解决方案是补充 else 分支，明确指示“当输入合法且非黑名单邮箱时，启用按钮”。
修复后的完整代码
$(document).ready(function() {
// 定义黑名单邮箱（注意：此处应为纯文本，非 HTML 渲染内容）
const blockedEmail = 'admin@example.com';
$('.keyup-email').on('input', function() {
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 结构（精简修正版）
<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" placeholder="请输入邮箱"><button type="button" id="m1p" class="edBtn" disabled>提交</button>
⚠️ 注意事项：
- 勿直接比对 HTML 字符串：原代码中试图匹配 这类 Cloudflare 邮箱保护生成的 HTML 片段，实际用户输入的是纯文本邮箱（如 admin@example.com），应以明文比对；
- 推荐使用 input 事件：替代 keyup，可捕获粘贴、自动填充、剪切等所有输入方式；
- 增加 .trim()：防止空格干扰校验；
- 忽略大小写比较：邮箱地址本身不区分大小写，统一转小写再比对更严谨；
- 初始禁用按钮：HTML 中添加 disabled 属性，确保未输入时按钮不可点击。
通过以上实现，按钮仅在输入为有效邮箱且不等于黑名单邮箱时才可点击，兼顾安全性与用户体验。
