formsubmit.co表单错误校验仅本地生效 线上站点无法正常运行

1. 表单提交事件逻辑缺失阻止默认行为的判断：你当前代码中e.preventDefault()被注释，即便校验触发了错误提示，表单仍会直接执行默认提交动作，导致页面立刻刷新，用户看不到错误提示。本地Live Server环境加载速度快，可能偶发出现校验提示先渲染再刷新的情况，线上环境网络/渲染时序差异就会直接表现为功能失效。
2. 存在JS绑定时序风险：如果你的JS代码放在<head>标签内，或者没有等待DOM加载完成就执行元素获取逻辑，线上环境DOM渲染慢于JS执行时，document.getElementById("form")会返回空值，提交事件绑定失败，表单直接走原生提交逻辑，也不会有控制台报错。

第一步：调整表单提交事件逻辑 #

补全校验判断，校验不通过时阻止默认提交，校验全部通过后再手动触发表单提交：

const form = document.getElementById("form");
const cusName = document.getElementById("customername");
const cusEmail = document.getElementById("customeremail");
const cusOrder = document.getElementById("customerorder");

// 展示错误提示
const showError = (input, msg) => {
   input.classList.add("border", "border-red-600");
   let small = input.nextElementSibling;
   small.classList.remove("invisible");
   small.classList.add("block");
   small.innerText = msg;
};

// 校验邮箱格式
const checkEmail = (email) => {
   const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return re.test(String(email).toLowerCase());
};

form.addEventListener("submit", (e) => {
   // 先阻止默认提交行为
   e.preventDefault();
   let isValid = true;

   if (cusName.value.trim() === "") {
      showError(cusName, "请填写您的姓名");
      isValid = false;
   }
   if (cusEmail.value.trim() === "") {
      showError(cusEmail, "请填写您的邮箱");
      isValid = false;
   } else if (!checkEmail(cusEmail.value.trim())) {
      showError(cusEmail, "请输入有效的邮箱地址");
      isValid = false;
   }
   if (cusOrder.value.trim() === "") {
      showError(cusOrder, "请填写您的订单信息，包含商品名称和数量");
      isValid = false;
   }

   // 校验全部通过才提交表单
   if (isValid) {
      form.submit();
   }
});

// 输入框聚焦时移除错误样式
form.addEventListener('focus',(e)=>{
   if (e.target.classList.contains('border')) {
      e.target.classList.remove('border');
      const small = e.target.nextElementSibling;
      small.classList.add("invisible");
      small.classList.remove("block");
   }
},true)

第二步：确保JS执行时序正确 #

将你的JS代码放在<body>标签的末尾（所有DOM元素之后），或者包裹在DOM加载完成的监听回调中，避免元素未渲染就执行JS逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 把上面所有的JS代码放在此处
});

可选优化 #

你代码中已经给输入框加了required属性，原生浏览器自带的校验会优先于自定义校验触发，如果要统一使用自定义的错误提示样式，可以给form标签加novalidate属性，关闭浏览器自带校验：

<form target="_blank" action="https://formsubmit.co/123@youremail.com" id="form" class="flex flex-col" method="POST" novalidate>

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