如何使用Javascript阻止填写已占用邮箱的表单自动提交

你代码的问题主要有以下几点：

• 函数名不匹配：你定义的校验函数名为check，但表单onsubmit事件里调用的是不存在的check_usercheck1()
• 语法错误：alert行末尾多了一个多余的右括号，会直接导致JS运行报错
• 输入框结构错误：input邮箱输入框放在了form标签外部，提交表单时无法通过form对象获取到输入值
• 参数传递缺失：check函数要求传入form对象，但调用时没有传递对应参数

修正后可直接运行的代码 #

JS代码

// 校验邮箱是否被占用
function checkUsedEmail(form) {
    // 已被占用的邮箱列表，后续新增可直接在数组里加
    const usedEmails = ["sttf@gmail.com", "dandy@gmail.com"]
    const inputEmail = form.email.value.trim()
    if (usedEmails.includes(inputEmail)) {
        alert("你填写的邮箱地址已被其他用户使用")
        return false
    }
    return true
}

HTML代码

<form action='' method='POST' onsubmit="return checkUsedEmail(this)">
  <input name='email' id="usercheck1" placeholder='请输入邮箱' required type='email'/>
  <!-- 提交按钮可根据你的需求调整 -->
  <button type="submit">提交表单</button>
</form>

注意：该方案仅适用于前端临时校验，正式使用时一定要在服务端再加一层重复校验，避免用户绕过前端规则直接提交数据

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