JS+Bottle邮箱失焦校验 换未注册邮箱仍无法提交表单

故障现象 #

实现逻辑为通过HTML onfocusout 事件触发邮箱校验，请求提交至Python Bottle后端处理：邮箱已存在于数据库则返回对应标识，不存在则返回空值。当前出现异常：

• 输入已存在的邮箱后失焦，可正常展示「邮箱已存在」的提示
• 更换为未注册的邮箱后失焦，提示暂时消失，点击提交按钮时「邮箱已存在」的提示会再次出现，无法进入后续页面

异常效果：
邮箱已存在于数据库时提示正常

输入不存在的邮箱时仍弹出提示、无法提交

故障原因 #

核心问题是前端自定义校验逻辑不完整：
setCustomValidity() 方法设置的错误信息会持久保存在表单元素上，不会自动清除。原有代码仅在邮箱存在时设置了错误提示，邮箱校验通过时没有主动清空自定义校验状态，导致之前存储的「邮箱已存在」错误信息一直残留，表单提交时浏览器内置校验会直接拦截，弹出残留的错误提示。
另外代码存在两处次要问题：

• 方法名拼写错误：checktValidity() 正确写法为 checkValidity()
• 后端返回的user_exists为字符串格式的"true"/"false"，判断时容易出现类型匹配错误

修复代码 #

前端JS逻辑修复 #

const checkIfUserExists = () => {
  const registrationForm = document.forms['form']
  const emailFormElement = registrationForm['email']
  const email = emailFormElement.value.trim()

  // 邮箱为空时直接清空校验状态，不发请求
  if (!email) {
    emailFormElement.setCustomValidity("")
    return
  }

  axios.post('/validate_email', {
    email: email
  })
  .then((response) => {
    if (response.data.user_exists === true || response.data.user_exists === "true") {
      emailFormElement.setCustomValidity("This email address already exists")
    } else {
      // 关键：邮箱不存在时主动清空自定义错误信息
      emailFormElement.setCustomValidity("")
    }
    // 修正拼写错误，触发校验状态更新
    emailFormElement.checkValidity()
  })
  .catch((error) => {
    console.log(error)
    // 请求异常时清空校验，避免误拦截提交
    emailFormElement.setCustomValidity("")
  })
}

后端Bottle路由优化（可选，规范返回格式） #

@route('/validate_email', method=['POST'])
def validate_email():
  email_adress = request.json['email']
  email = emailextraction(email_adress)
  print(email)
  if email:
    return {"user_exists": True}
  else:
    return {"user_exists": False}

优化建议 #

• 可给失焦校验加300ms左右的防抖，避免用户快速操作时频繁发起无效请求
• 表单正式提交时建议再做一次邮箱存在性校验，避免前端校验被绕过

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