使用.match()做客户端邮箱格式验证：正确输入时错误消息无法隐藏

问题原因 #

你的正则表达式存在语法错误，导致所有邮箱都会被判定为无效，因此正确邮箱输入时错误提示也无法隐藏：

• 正则中的 . （点号加空格）是错误写法，点号在正则中是特殊字符，需要用 \. 转义才能匹配实际的点
• 域名部分的正则逻辑错误，([a-zA-Z0-9])+. 应改为 ([a-zA-Z0-9]+)\.，加号需要放在括号内表示匹配多个字符，同时转义点号

修正后的代码 #

修复正则后的完整JavaScript代码 #

const signupform = document.getElementById("signupform");
const errorMsgInvalidEmail = document.getElementById("error-msg-invalid-email");

signupform.addEventListener('submit', (e) => {
    e.preventDefault();
    checkInputs();
});

function checkInputs () {
    const email = document.getElementById("email").value.trim();
    // 修复后的邮箱验证正则
    const regx = /^[a-zA-Z0-9._]+@[a-zA-Z0-9]+\.[a-z]+(\.[a-z]+)?$/;

    if(regx.test(email)) {
        errorMsgInvalidEmail.style.display = "none";
    } else {
        errorMsgInvalidEmail.style.display = "block";
    }
};

额外优化建议 #

1. 给错误提示添加初始样式，避免页面加载时默认显示：

.error-msg {
    display: none;
    color: red;
}

2. 可以在输入框失去焦点时触发验证，提升用户体验：

document.getElementById("email").addEventListener('blur', checkInputs);

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