如何用jQuery验证逗号分隔的多个邮箱地址

没问题，我来帮你调整代码，实现对逗号分隔多邮箱的实时输入验证！核心思路是把输入内容拆分成单个邮箱，逐个验证后再判断整体是否合法。

修改后的JavaScript代码 #

$(function() {
    $('.validateEmails').on('input', function() {
        const inputVal = $(this).val().trim();
        let allValid = true;
        const errorElement = $('.emailError');
        
        // 处理空输入的情况
        if (!inputVal) {
            $(this).removeClass('invalid').addClass('valid');
            errorElement.text('').hide();
            return;
        }
        
        // 按逗号拆分邮箱，同时去除每个邮箱前后的空格，过滤空项
        const emails = inputVal.split(',').map(email => email.trim()).filter(email => email);
        
        // 遍历验证每个邮箱
        const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
        emails.forEach(email => {
            if (!emailRegex.test(email)) {
                allValid = false;
            }
        });
        
        // 实时反馈验证结果
        if (allValid) {
            console.log("所有邮箱格式正确");
            $(this).removeClass('invalid').addClass('valid');
            errorElement.text('').hide();
        } else {
            console.log("存在格式错误的邮箱");
            $(this).removeClass('valid').addClass('invalid');
            errorElement.text('请输入格式正确的邮箱，多个邮箱用逗号分隔').show();
        }
    });
});

对应的HTML调整 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Emails: </label>
<input type="text" class="validateEmails" name="emails" size="50">
<br>
<span class="emailError" style="color: red; display: none;"></span>
<br>
<span>
    <small>*Please add (,) comma for send multiple email </small>
</span>

<style>
    .valid { border: 1px solid green; }
    .invalid { border: 1px solid red; }
</style>

关键要点说明 #

• 输入清洗与拆分：用split(',')将输入内容拆分为单个邮箱数组，通过trim()去除每个邮箱前后的空格，再用filter()过滤掉空字符串（避免用户输入连续逗号导致的无效项）。
• 逐个验证逻辑：遍历每个邮箱，用正则表达式单独校验，只要有一个邮箱格式不合法，就标记整体为无效状态。
• 实时视觉反馈：给输入框添加valid/invalid类来切换边框颜色，同时用错误提示框显示具体问题，让用户能直观看到验证状态。
• 正则优化：把原正则中的\.[A-Z]{2,4}调整为\.[A-Z]{2,}，兼容更多现代顶级域名（比如.xyz、.online这类长度超过4的域名）。

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