JavaScript 表单数据校验案例讲解（附代码示例）

不知道你有没有这种感觉：表单数据校验好像每次用都要现查文档。这说明理解还停留在表面。本文帮你把它真正内化成自己的东西。

关于表单数据校验，你可能只知道一半

表单数据校验是JavaScript生态里一个高频出现的知识点。网上关于它的资料不少，但要么太零散，要么太晦涩。本文尝试用尽量直白的方式把它讲清楚。

关于表单数据校验的关键知识

1. 掌握表单数据校验之后，顺便了解它的实现原理，理解层次会完全不同。
2. 表单数据校验的文档注释写清楚参数含义和返回值，降低别人（和未来的自己）的理解成本。
3. 记录表单数据校验使用过程中踩过的坑，形成自己的避坑手册。
4. 别在生产环境直接试表单数据校验的新写法，先在测试环境验证。

接下来用代码实际演示一下表单数据校验。

表单数据校验代码实战

通用表单校验函数：

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+$/ }
});

容易踩的坑

• 正则表达式写完要多测几个边界用例，贪心和转义最容易出错。
• 重要功能上线前，先写好回滚方案，再点开始按钮。
• 密码、密钥这类敏感信息不要硬编码在代码里，更不要提交到仓库。

小结

关于表单数据校验就写到这里。如果文中有讲得不清楚的地方，欢迎指出，我会及时补充完善。

---

遇见问题加 QQ23979811 协助处理