17. 实战：注册表单实时校验

校验分两道：blur 失焦即时校验（填完一项提示一项，体验好）+ submit 提交时统一把关（最后检查，不过就 preventDefault 拦住）。正则 ^\d{11}$ 是"必须正好 11 位数字"的入门写法。

17.1 实战（填完失焦、点注册试试）

失焦一项看一项提示；点注册统一把关。

17.2 核心代码拆解

① blur 失焦即时校验

填完一项、光标移开就检查这一项，红字报错、绿字通过。

let username = document.getElementById('username'); // 抓到用户名输入框
username.addEventListener('blur', function () { // 光标一离开就校验
  let val = this.value.trim();   // 先把首尾空格去掉
  if (val === '') tips[0].innerText = '不能为空'; // 空的，红字提示
  else if (val.length < 2 || val.length > 6) tips[0].innerText = '长度2-6位'; // 太长太短都不行
  else tips[0].innerText = '';  // 通过就清掉提示
});

② 正则校验手机号

let reg = /^\d{11}$/;  // ^开头 \d数字 {11}11个 $结尾 → 必须正好11位数字
phone.addEventListener('blur', function () { // 手机号框一失焦就校验
  if (!reg.test(this.value.trim())) tips[1].innerText = '必须11位数字'; // 不符合就提示
  else tips[1].innerText = ''; // 符合就清提示
});

③ submit 统一把关

regForm.addEventListener('submit', function (e) { // 点注册按钮时跑
  e.preventDefault();   // 先拦住默认提交，别让页面刷新
  // 再整体走一遍规则，有一项不过就提示
});

如果你忘了 trim()，用户不小心敲了空格会被误判。因为 value 里首尾的空格也是字符，判断前要先 trim 去掉；另外提示文字用 innerText 写，别用 innerHTML（安全）。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：注册/登录/改资料表单的实时校验与提交把关。

② 常见坑：忘记 trim 导致空格误判；点提交页面刷新白屏。

③ 怎么解决：失焦单项校验、submit 统一拦并 preventDefault；正则校验手机号。

一句话记住：blur 单项即时提示、submit 统一把关并 preventDefault；先 trim 再判断，正则 ^\d{11}$ 校验 11 位手机号。