JavaScript 表单数据校验案例讲解

表单数据校验说难不难，说简单也不简单。会用只要十分钟，用好却需要一些经验积累。本文把这些经验浓缩成几个要点，帮你少走弯路。

表单数据校验为什么值得花时间学？

对于JavaScript开发者来说，表单数据校验是一项基本功。基本功这东西，平时看不到收益，关键时刻却能救你一命。

表单数据校验的重点都在这了

• 上线前对表单数据校验相关的功能做一轮完整测试，别只测正常流程。
• 记录表单数据校验使用过程中踩过的坑，形成自己的避坑手册。
• 表单数据校验的学习要理论结合实践，看懂和写对是两码事。

理解了底层逻辑，使用起来才能游刃有余。

表单数据校验实战代码

来看一个具体的例子——通用表单校验函数：

function validate(data, rules) {
  const errors = {};
  for (const [field, rule] of Object.entries(rules)) {
    const v = (data[field] ?? '').trim();
    if (rule.required && !v) errors[field] = rule.label + '不能为空';
    else if (rule.pattern && v && !rule.pattern.test(v)) errors[field] = rule.label + '格式不正确';
  }
  return errors;
}

const errors = validate(form, {
  phone: { label: '手机号', required: true, pattern: /^1[3-9]\d{9}$/ },
  email: { label: '邮箱', required: true, pattern: /^[\w.-]+@[\w.-]+\.\w+$/ }
});

常见问题与注意事项

• 修改配置后记得重启或重载服务，很多人调半天发现是配置没生效。
• 配置文件不要用记事本编辑，编码问题会让你怀疑人生。

小结

写到这里，关于表单数据校验的主要内容就齐了。如果你身边有正在学习JavaScript的朋友，不妨把这篇文章转给他。

---

遇见问题加 QQ23979811 协助处理