如何通过单个JavaScript实现单表单多用户邮箱提交前校验

原代码失效原因 #

• 误用了localeCompare方法：它是字符串的调用方法，需要传入对比值作为参数，返回值为0时代表两个字符串完全相等，你直接把方法本身和邮箱地址做相等判断，逻辑完全不成立
• 判定逻辑颠倒：你需要实现的是「用户输入的邮箱不在允许列表中就阻止提交」，原修改后的代码判断逻辑完全相反
• 存在语法错误：if判断的条件外多写了一个右括号，也会导致代码直接报错无法运行

修正后的校验代码 #

直接替换你原来的check_email相关JS代码即可，HTML部分不需要做任何改动：

<script type="text/javascript">
function check_email() {
    // 预置允许提交的邮箱列表，后续新增许可邮箱直接在这个数组里添加即可
    const allowedEmails = ["badmansmo@gmail.com", "billysam@gmail.com"];
    // 读取用户输入的邮箱，自动去掉首尾空格，避免误输入空格导致校验失败
    const inputEmail = document.getElementById("email").value.trim();

    // 判断输入的邮箱不在许可列表中时，拦截提交
    if (!allowedEmails.includes(inputEmail)) {
        alert("注意！\n你填写的邮箱地址和账户绑定的邮箱不匹配，无法提交。");
        return false;
    }
    return true;
}
</script>

代码说明 #

• 所有允许通过校验的邮箱都统一维护在allowedEmails数组中，后续增删许可邮箱只需要修改这个数组的内容，不需要调整其他校验逻辑
• 使用Array.includes()方法做匹配，代码可读性和可维护性远高于写多段或条件判断
• 加入了空格自动过滤逻辑，降低普通用户误输入空白字符导致提交失败的概率

重要提示：前端JavaScript校验仅作为优化体验的防呆手段，无法防止恶意用户绕过前端代码直接提交请求，你必须在后端接收表单的逻辑里同步做相同的邮箱校验，避免非法提交进入系统。

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