使用setCustomValidity实现邮箱校验 自动补全gmail后缀.com的问题

原有代码问题梳理 #

• 变量引用错误：代码中x、email均未定义，运行时会直接抛出语法错误
• 匹配逻辑错误：使用charAt判断字符串后缀不可能匹配到多字符的@gmail字符串
• 正则规则不符合需求：原有正则强制要求邮箱后缀为3位顶级域名，和gmail域名自动补全的逻辑冲突

调整后完整代码 #

// 邮箱校验函数
function validateEmail() {
    const emailInput = document.getElementById("email");
    const mail = emailInput.value.trim();
    // 空值校验
    if (!mail) {
        console.log("Email is missing");
        emailInput.setCustomValidity("请填写邮箱地址");
        return false;
    }
    // 基础邮箱格式校验（必须包含且仅包含一个@）
    const emailParts = mail.split('@');
    if (emailParts.length !== 2 || !emailParts[0] || !emailParts[1]) {
        emailInput.setCustomValidity("请输入合法的邮箱地址");
        return false;
    }
    const domain = emailParts[1];
    // 仅对域名包含gmail的邮箱做后缀补全
    if (domain.includes('gmail') && !domain.endsWith('.com')) {
        emailInput.value = `${mail}.com`;
    }
    // 校验通过，清空自定义错误
    emailInput.setCustomValidity("");
    return true;
}

实现逻辑说明 #

1. 优先处理必填校验，邮箱为空时直接抛出提示阻止提交
2. 先判断邮箱基础格式是否合法，避免格式完全错误的内容进入后续逻辑
3. 拆分邮箱的域名部分，仅当域名包含gmail时判断后缀：如果不是.com结尾自动补全，补全结果直接回写到输入框中，用户可见
4. 校验通过后清空自定义错误提示，允许表单正常提交

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