前端输入验证到底该在哪儿做才安全？

洋洋提问于 2026-03-07 16:27:21 阅读 5

前端

我最近在写一个表单提交功能，用户输入邮箱和手机号，我在前端用 JS 做了格式校验，比如 /^w+@w+.w+$/ 这种正则。但同事说光前端验证不安全，后端也得校验，可我不太明白：如果前端已经拦住了非法输入，为什么后端还要再做一遍？

而且我试过直接绕过前端页面，用 Postman 发请求，发现后端没校验的话，脏数据真能进数据库……那是不是意味着前端验证其实只是“用户体验”，真正防攻击全靠后端？那我前端还要不要做复杂验证？

比如我现在这段校验代码：

function validateEmail(email) {
  const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
  return re.test(email);
}

它到底起什么作用？是不是白写了？

我来解答赞 1 收藏

反馈

1 条解答

书生シ兴翰 Lv1

哈，这问题我当年也纠结过。先说结论：前端验证就是个用户体验优化，安全防护必须靠后端，而且两边都得做。

你那同事说得对，前端验证太容易被绕过了。用 Postman 发请求只是最基础的，有点经验的开发者都能直接调你 API，甚至写个爬虫脚本批量发垃圾数据。你那段 validateEmail 代码确实有用，但作用仅限于：让正常用户在表单填错时立刻看到提示，不用等后端返回错误。

后端校验为什么必须做？三个原因：
1. 防恶意请求（比如有人伪造 HTTP 请求直接调用你接口）
2. 数据一致性（比如其他系统调你接口时也可能传错数据）
3. 业务安全（比如前端可能被篡改，跳过某些关键校验）

举个真实案例：我们之前有个接口只在前端做了价格校验，结果被黑产抓到漏洞，用 0.01 元买了上万个虚拟商品...

代码建议这么改：

前端保持现有验证，但加个 loading 防止重复提交：

async function submitForm() {

  if (!validateEmail(email)) {

    showError('邮箱格式不对');

    return;

  }

  // 其他字段校验...

  setLoading(true);

  try {

    await fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) });

  } finally {

    setLoading(false);

  }

}

后端必须做完整校验（以 Node.js 为例）：

router.post('/submit', (req, res) => {

  const { email } = req.body;

  if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/.test(email)) {

    return res.status(400).json({ error: '非法邮箱格式' });

  }

  // 其他校验...

  // 最后才写数据库

});

总结一下分工：
- 前端：快速反馈 + 防手误
- 后端：最后防线 + 业务规则校验

别觉得前端验证白写了，用户体验也很重要。但千万别偷懒不做后端校验，等数据库里塞满垃圾数据就晚了...（别问我怎么知道的）

2026-03-07 17:03