你在网站上填过那种还没点提交就跳出红字提示的表单吗？比如邮箱格式不对、手机号少了一位，甚至密码太简单都会当场提醒。这些都不是后台返回的错误，而是前端在提交前做的验证，也就是常说的‘表单提交前验证流程’。
为什么要在提交前做验证
很多人觉得：反正后台也会校验，前端验不验证无所谓。但实际情况是，如果跳过前端验证，用户每次出错都要等页面刷新或接口返回，体验很差。比如你填了十项信息，提交后才发现邮箱写错了，得重新填一遍——这谁受得了？
前端验证的核心作用就是快速拦截明显错误，减少无效请求，减轻服务器压力，同时让用户操作更流畅。尤其在网络慢的时候，提前拦住低级错误特别重要。
常见的验证场景有哪些
比如注册页面，通常要检查用户名是否为空、邮箱是否符合格式、密码长度是否达标、两次输入的密码是否一致。再比如订单表单，要确认电话号码是11位数字、收货地址不能太短、邮政编码是不是6位纯数字。
这些规则都可以在用户点击‘提交’按钮的瞬间执行，不需要发请求到服务器。
怎么写一个基本的验证流程
用 JavaScript 监听表单的提交事件，然后逐项检查字段。只要有一项不符合要求，就阻止表单提交，并给出提示。
document.getElementById('myForm').addEventListener('submit', function(e) {
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
if (!email.includes('@')) {
alert('请输入正确的邮箱格式');
e.preventDefault(); // 阻止提交
return;
}
if (phone.length !== 11 || !/\d{11}/.test(phone)) {
alert('手机号必须是11位数字');
e.preventDefault();
return;
}
});上面这段代码绑定了表单的 submit 事件，对邮箱和手机号做了基础判断。一旦发现问题，弹窗提醒并调用 e.preventDefault() 来中断提交流程。
提升体验的小技巧
光靠提交时验证还不够。聪明的做法是在用户输入过程中就实时反馈。比如邮箱框失去焦点（blur）时立刻检查格式，手机号输入非数字字符时直接过滤掉。
还可以用 CSS 标记出错字段，比如边框变红、旁边加个感叹号图标，让用户一眼看出哪里有问题。
更重要的是，提示语要具体。别只说“输入有误”，而要说“邮箱缺少 @ 符号”或者“密码至少需要8位”。越明确，用户改起来越快。
别忘了配合后台验证
前端验证只是为了提升体验，不能替代后台校验。恶意用户可以绕过浏览器直接发请求，所以服务器端必须重新检查每一项数据。前后端双重把关，才是稳妥做法。
实际开发中，建议把验证逻辑抽成独立函数，方便复用和测试。也可以引入现成的验证库，比如 jQuery Validate 或者更现代的 Yup、Zod，节省重复造轮子的时间。