结合后端接口实现HTML表单双重校验-html教程-PHP中文网

前端表单校验仅作体验优化，必须由后端兜底；前后端字段名需完全一致，用name属性精准映射错误提示；后端应返回400状态码及结构化errors对象，前端实时反馈并防重复提交。

结合后端接口实现html表单双重校验

前端用 `required` 和 `pattern` 只能拦住懒用户

浏览器原生表单校验（比如 required、minlength、pattern）在用户没改代码的前提下确实能弹提示，但绕过太容易：禁用 JS、删掉属性、直接发 POST 请求。它只适合做第一层“体验优化”，不是安全防线。

真正要拦住无效数据，必须依赖后端接口返回的明确校验结果。但光靠后端也不行——用户提交后等几秒才看到错误，体验差，还浪费一次请求。

前端校验建议只覆盖高频、确定性高的规则（如邮箱格式、手机号长度），用 addEventListener('input') 实时反馈，别等提交
后端返回的错误必须结构化，例如 { "errors": { "email": ["邮箱格式不正确"], "password": ["密码至少8位"] } }，而不是笼统的 "参数错误"
前后端字段名必须完全一致（包括大小写和下划线），否则前端找不到对应位置塞错误提示

用 `fetch` 提交后如何把后端错误映射到对应表单控件

关键不是“显示错误”，而是“让错误出现在对的地方”。后端返回的 errors 对象字段名，要能和表单里每个 <input name="email"> 的 name 属性精准匹配。

示例逻辑：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

const form = document.querySelector('form');
form.addEventListener('submit', async e => {
  e.preventDefault();
  const formData = new FormData(form);
  const res = await fetch('/api/register', {
    method: 'POST',
    body: formData
  });
  const data = await res.json();
<p>if (data.errors) {
// 清空旧错误
form.querySelectorAll('.error').forEach(el => el.remove());</p><pre class="brush:php;toolbar:false;">// 遍历后端返回的 errors，插入对应 input 下方
Object.entries(data.errors).forEach(([field, messages]) => {
  const input = form.querySelector(`[name="${field}"]`);
  if (input) {
    messages.forEach(msg => {
      const span = document.createElement('span');
      span.className = 'error';
      span.textContent = msg;
      input.parentNode.insertBefore(span, input.nextSibling);
    });
  }
});

} });