React表单验证：客户端与服务器端哪个更安全？如何选择？

两端同时校验才是兼顾效率与安全的最优解，下面逐个分析三种方案的利弊：

仅客户端校验：体验好，但完全不安全 #

客户端校验（比如React里用正则实时校验邮箱格式）确实能给用户即时反馈，输入错了马上提示，不用等提交请求，体验拉满。但问题是，客户端代码完全暴露——任何人都能通过浏览器开发者工具修改校验逻辑、甚至直接跳过校验发起请求。比如有人删掉邮箱校验的正则，或者用接口工具直接发格式错误的邮箱到登录接口，服务器如果没设防，就会接收非法数据，甚至可能被利用发起攻击。

拿React登录表单举例，你可能写了这类客户端校验逻辑：

const [emailError, setEmailError] = useState('');

const validateEmail = (email) => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!regex.test(email)) {
    setEmailError('请输入正确的邮箱格式');
    return false;
  }
  setEmailError('');
  return true;
};

const handleSubmit = (e) => {
  e.preventDefault();
  if (!validateEmail(email)) return;
  // 发起登录请求
};

但只要打开开发者控制台，手动调用handleSubmit或者直接用接口工具发请求，就能轻松绕过这个校验。所以仅靠客户端校验等于没设防。

仅服务器端校验：安全，但体验糟糕 #

服务器端校验是安全的底线——不管客户端怎么操作，服务器都对数据做校验，能彻底挡住非法请求。但用户体验太差：用户输入错误格式的邮箱后，要等网络请求往返才能收到错误提示，尤其是网络慢的时候，用户可能以为没提交成功，反复点击，既浪费时间又影响体验。

比如用户输了test@这种不完整的邮箱，提交后要等2秒才收到“邮箱格式错误”的提示，这种体验很容易让用户烦躁。

两端同时校验：体验与安全兼得 #

正确的做法是客户端做前置校验，服务器端做兜底校验：

1. 客户端层面：在用户输入过程中或提交前，实时校验邮箱格式，给用户即时反馈，过滤掉明显的错误，减少无效的服务器请求。
2. 服务器端层面：不管客户端有没有做校验，都必须对收到的邮箱格式再做一次完全相同的校验，确保任何绕过客户端的请求都被拦截。

还是拿React登录表单举例：

• 客户端：保留上述validateEmail逻辑，在输入邮箱时实时校验，提交前再做一次检查。
• 服务器端（以Node.js为例）：

// 服务器端校验逻辑
const validateEmail = (email) => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
};

// 登录接口
app.post('/login', (req, res) => {
  const { email, password } = req.body;
  if (!validateEmail(email)) {
    return res.status(400).json({ error: '邮箱格式错误' });
  }
  // 后续登录逻辑
});

这样既保证了用户能快速得到反馈，又确保了服务器不会接收非法数据，是效率和安全的平衡方案。

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