← 返回目录

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

实战：注册表单实时校验。输入时就检查格式对不对，不对就提示。

核心三步：
① input 事件——实时触发校验
② 正则验证——手机号/邮箱/密码规则
③ 显示错误提示——在输入框下面红字提示

坑：实时校验别太烦（输入完才校验）、错误提示要清晰、提交时再全部校验一遍。

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

用户名（2-6位）：
手机号（11位数字）：
失焦一项看一项红 / 绿徽章； 点注册统一把关。 下面同步代码与结论。

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 = '';
});

② 正则校验手机号

// ^开头 \d数字 {11}11个 $结尾 → 必须正好11位数字
let reg = /^\d{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 位手机号。

本页重点

API作用参数返回值代码示例
字符串.trim()去掉首尾空格无字符串let v = inp.value.trim();
正则.test()校验是否符合格式被校验字符串true/false/^\d{11}$/.test(v);
addEventListener('blur')失焦即时校验函数无inp.addEventListener('blur', fn);
e.preventDefault()拦默认提交无无e.preventDefault();