标签式邮箱输入框校验方案咨询（input type=email无效）

首先先修正你HTML代码里的两个小问题：

• 输入框的id属性有两个值（report_notification_emails txtEmail），单个元素只能有一个ID，建议改成report_notification_emails
• 标签和错误提示的id都是lblError，ID重复会导致JS获取元素异常，把标签的ID改成lblEmailLabel

修正后的HTML片段：

<div class="form-group row" id="add_user_email_form_group">
    <label for="add_user_email" id="lblEmailLabel" class="col-md-4 col-form-label text-md-right font-weight-bold">{{ __('Phishing PDF Report Email Address') }}</label>

    <div class="col-md-6 add_user_email">
        <input type="text" class="form-control tags_input" id="report_notification_emails" value="" name="report_notification_emails" multiple onkeyup="mailValidation();" />
        <span id="lblError" style="color: red"></span>
        <sub><strong>Up to 3 total email addresses</strong></sub> 
    </div>

    @error('report_notification_emails')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

接下来实现前端校验逻辑，以下是完整的JavaScript代码：

function mailValidation() {
    const input = document.getElementById('report_notification_emails');
    const errorElement = document.getElementById('lblError');
    // 按逗号分割邮箱、去首尾空格、过滤空内容
    const emails = input.value.split(',').map(email => email.trim()).filter(email => email);
    let errors = [];

    // 检查数量限制
    if (emails.length > 3) {
        errors.push('最多只能输入3个邮箱地址');
    }

    // 通用邮箱格式校验正则
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    emails.forEach((email, index) => {
        if (!emailRegex.test(email)) {
            errors.push(`第${index+1}个邮箱格式不正确`);
        }
    });

    // 显示错误信息并同步样式
    if (errors.length > 0) {
        errorElement.textContent = errors.join('；');
        input.classList.add('is-invalid');
    } else {
        errorElement.textContent = '';
        input.classList.remove('is-invalid');
    }
}

// 表单提交时二次校验，防止用户绕过前端校验
document.querySelector('form').addEventListener('submit', function(e) {
    const input = document.getElementById('report_notification_emails');
    const emails = input.value.split(',').map(email => email.trim()).filter(email => email);
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    let isValid = true;
    const errorElement = document.getElementById('lblError');
    let errors = [];

    if (emails.length > 3) {
        errors.push('最多只能输入3个邮箱地址');
        isValid = false;
    }

    emails.forEach((email, index) => {
        if (!emailRegex.test(email)) {
            errors.push(`第${index+1}个邮箱格式不正确`);
            isValid = false;
        }
    });

    if (!isValid) {
        e.preventDefault();
        errorElement.textContent = errors.join('；');
        input.classList.add('is-invalid');
    }
});

关键说明： #

• 分割规则：默认用逗号分割邮箱标签，如果你的标签输入插件用回车、空格等其他分隔符，修改split(',')里的分隔符即可
• 正则适配：采用通用邮箱校验规则，能覆盖绝大多数合法邮箱场景
• 双重校验：实时输入校验（keyup事件）+ 表单提交校验，避免非法内容提交
• 样式统一：校验不通过时添加is-invalid类，和Laravel原生错误提示样式匹配

后端校验补充（Laravel场景） #

前端校验仅做辅助，必须在后端做最终校验。在表单请求类里添加规则：

public function rules()
{
    return [
        // 如果后端直接接收字符串
        'report_notification_emails' => 'required|string',
        // 如果需要转成数组校验，可先在控制器处理后用以下规则
        // 'report_notification_emails' => 'array|max:3',
        // 'report_notification_emails.*' => 'email'
    ];
}

若需将字符串转数组处理，可在控制器中添加：

$emails = explode(',', $request->report_notification_emails);
$emails = array_map('trim', $emails);
$emails = array_filter($emails);
// 对$emails执行后续校验逻辑

内容的提问来源于stack exchange，提问作者Jayasri S.V