纯JavaScript实现表单框下方显示邮箱验证错误提示问题

问题根源分析 #

你的代码存在以下核心问题导致错误提示无法正常显示：

• 变量作用域错误：singlet、emailpatt、k等关键变量定义在pr()函数内部，checkkey()和checkemail()函数无法访问这些局部变量。
• 事件重复绑定：每次点击Submit按钮都会执行pr()，重复给输入框绑定keyup和mousemove事件，导致逻辑混乱。
• 输入值更新逻辑错误：checkkey()里的singlet += singlet会把输入值重复叠加，而非获取最新的输入内容。
• 正则表达式错误：正则里的.未转义，会匹配任意字符，无法正确校验邮箱格式。
• 字符串语法错误：warnE的字符串包含未转义的换行，导致JS语法报错。
• 提示函数逻辑冗余：warnBox本来就存在于DOM中，无需重复插入，且warningTimeout的作用域存在问题。

修复后的完整代码 #

HTML部分

<div>
   <label>Press the key</label>
</div>
<input type="text" id="kp">
<span id="pr"></span> 
<span id="words"></span> <br />
<span id="err"></span>
<button type="button" onClick="pr();">Submit</button>

JavaScript部分

// 全局声明共享变量，解决作用域问题
let k;
let singlet;
const emailpatt = /^[a-z0-9]+([_a-z0-9.-]+)*[a-z0-9]+@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/i;
let warnT;
const warnE = "Email should be in abc@xyz.com format.";
const warnBox = document.getElementById("err");

function pr() {
    k = document.getElementById("kp");
    singlet = k.value;
    
    // 先移除旧事件再绑定，避免重复触发
    k.removeEventListener("keyup", checkkey);
    k.addEventListener("keyup", checkkey, false);
    
    document.getElementById("words").innerHTML = "<br />" + singlet + " <br />";
    
    k.removeEventListener("mousemove", checkemail);
    k.addEventListener("mousemove", checkemail, false);
}

function checkkey(event) {
    // 获取输入框最新值
    singlet = k.value;
    document.getElementById("pr").innerHTML = singlet;
}   
    
function checkemail() {
    // 非空且格式错误时显示提示
    if (singlet && !emailpatt.test(singlet)) {
        displayWarning(warnE, warnBox);
    } else {
        // 格式正确或为空时清空提示
        warnBox.innerHTML = "";
        clearTimeout(warnT);
    }
}

function displayWarning(msg, warningBox) {
    warningBox.innerHTML = msg;
    // 清除之前的定时器，避免重复计时
    clearTimeout(warnT);
    warnT = setTimeout(() => {
        warningBox.innerHTML = "";
    }, 6000);
 }

关键修复说明 #

1. 作用域优化：将跨函数访问的变量提升到全局，确保checkkey和checkemail能正常获取输入值、正则规则等数据。
2. 事件绑定修正：每次绑定事件前先移除旧监听，防止重复绑定导致逻辑混乱。
3. 输入值更新：checkkey直接获取输入框最新值，替换错误的叠加逻辑。
4. 正则修正：将.转义为\.，确保只匹配邮箱中的点号，添加i标志忽略大小写，提升兼容性。
5. 字符串修复：修正warnE的换行问题，改为合法的单行字符串。
6. 提示逻辑简化：去掉冗余的DOM插入操作，直接操作已有warnBox的内容，优化定时器管理。

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