jQuery动态添加邮箱验证消息重复两次，条件判断失效求助

我看了你的代码，出现重复添加错误提示的情况，大概率是这两个原因之一：

• focusout事件被重复绑定：比如你的脚本被多次执行（比如放在了会重复渲染的组件里，或者脚本标签被加载了两次），导致同一个输入框的focusout事件绑定了多遍，每次触发都会执行一次添加逻辑。
• next(".validation")的判断局限性：next()只会查找紧邻的下一个兄弟元素，如果输入框后面还有其他元素（比如隐藏的input、span等），那即使已经存在.validation提示框，next(".validation")也会返回空，导致重复添加。

接下来给你两种实用的修正方案：

方案一：确保事件只绑定一次 + 更可靠的元素查找 #

先用off解绑之前的focusout事件，再绑定新的，避免重复绑定；同时改用siblings查找同级的提示框，解决next的局限性：

// 先解绑再绑定，防止重复绑定事件
$('.refEmail').off('focusout').on('focusout', function() { 
    var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    if ($(this).val() !== "" && !$(this).val().match(reg)) { 
        // 查找所有同级的.validation，判断是否已存在
        if ($(this).siblings(".validation").length === 0) { 
            $(this).after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter valid email</div>"); 
        } 
    } else { 
        // 移除所有同级的.validation，确保清理干净
        $(this).siblings(".validation").remove(); 
    } 
}); 

方案二：提前创建提示框，用显示/隐藏代替反复增删 #

这种方式更高效，避免频繁DOM操作，也从根源上解决重复添加的问题：

// 页面加载时给每个refEmail输入框后面添加隐藏的提示框
$('.refEmail').each(function() {
    $(this).after("<div class='validation' style='color:red;margin-bottom: 20px;display:none;'>Please enter valid email</div>");
});

// 绑定focusout事件，只控制提示框的显示/隐藏
$('.refEmail').on('focusout', function() { 
    var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    var $tip = $(this).next(".validation");
    if ($(this).val() !== "" && !$(this).val().match(reg)) { 
        $tip.show();
    } else { 
        $tip.hide();
    } 
}); 

另外也检查一下你的jQuery脚本是否被重复引入了，比如页面里是否多次加载了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>，这也可能导致事件重复绑定哦。

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