04. 表单校验：必填、邮箱、手机号与错误提示

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

`novalidate` 可以关闭浏览器默认提示，方便自定义校验 UI。
`FormData` 适合快速读取表单字段。
校验函数单独写，后续可以复用到多个表单。

四、练习建议

给每个输入框旁边增加单独错误提示。
增加电话号码和地区选择的校验。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/04-forms-validation.js，下面同步展示，方便学习和复制。

// 页面 04：表单校验与提交拦截
const form = document.querySelector('#p4-form');
const formOutput = document.querySelector('#p4-output');

function getFormData(formElement) {
  const data = new FormData(formElement);
  return Object.fromEntries(data.entries());
}

function validate(data) {
  const errors = {};

  if (!data.name.trim()) {
    errors.name = '请输入姓名';
  }

  if (!/^\S+@\S+\.\S+$/.test(data.email)) {
    errors.email = '请输入正确的邮箱地址';
  }

  if (!data.type) {
    errors.type = '请选择项目类型';
  }

  if (data.message.trim().length < 10) {
    errors.message = '留言至少需要 10 个字符';
  }

  return errors;
}

function renderErrors(errors) {
  const keys = Object.keys(errors);
  if (keys.length === 0) {
    formOutput.textContent = '表单校验通过，可以继续提交到后台或发送邮件。';
    return;
  }

  formOutput.textContent = keys.map((key) => `- ${errors[key]}`).join('\n');
}

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const data = getFormData(form);
  const errors = validate(data);
  renderErrors(errors);
});

form.addEventListener('reset', () => {
  setTimeout(() => formOutput.textContent = '', 0);
});