Web前端开发技术

Appearance

实训：js 动态校验 ​

控件与数据校验（第 4 周）里的校验是声明式的：把规则写成 required、pattern、min 等属性，交给浏览器执行。本实训改用 JavaScript 动态校验：规则写在脚本里，由代码在提交时检查——能做声明式做不到的事，比如多个字段之间的关联校验。

两版对照（同一个注册表单）正是本实训的教学点：声明式简单但表达力有限；动态校验把控制权交给代码，代价是必须自己接管事件——而这正是第 8 周"事件驱动"的先声。

任务 ​

基于 xampp 站点（沿用表单实训的环境），实现一个注册表单的 JS 校验：

  • 用户名必填，且不少于 3 个字符
  • 密码不少于 6 位
  • 两次输入的密码必须一致（多字段关联——声明式校验做不到）
  • 任何一项不通过：阻止提交、就地提示错误
  • 全部通过：放行提交，交给后端（回显脚手架即可）

第 1 步：表单骨架（不写任何校验属性） ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

注意两点：故意不加 required/pattern——本实训的规则全部由 JS 负责；msg 是显示错误信息的容器。

第 2 步：拦截提交事件 ​

新建 check.js：

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
Open on CodeSandboxOpen Sandbox

运行：输入不一致的密码提交，观察红色提示且页面未跳转；全部通过后提交到 save.php（可先用 表单实训的回显脚本充当后端）。

第 3 步：理解"拦截"了什么 ​

onsubmit 处理函数 return false 时，浏览器不发这个请求——表单提交是一个事件，脚本有机会在事件默认行为发生之前介入。用 devtools 的 Network 面板验证：校验失败时根本没有产生请求。

这件事的意义超出校验本身：

  • 此前几周，页面的行为都是浏览器内建的（点链接跳转、提交表单发请求）——声明式、命令式各安其位
  • 从 onsubmit 开始，我们接管了浏览器内建行为的决策权：什么时候放行、什么时候拦下，由代码说了算
  • "注册回调、等待事件发生、决定是否放行"——这正是第 8 周事件驱动编程模型的入口

第 4 步（选做）：即时校验 ​

把校验从"提交时"提前到"输入时"：给 pwd2 绑定 oninput，边输入边比对一致性，一致时把提示换成绿色 ✓。体会"事件"不止 submit 一种——blur、input、change 都是可介入的时机。

小结 ​

声明式校验（第 4 周）JS 动态校验（本实训）
规则写在HTML 属性脚本代码
执行者浏览器内建自己的代码
表达力单字段规则多字段关联、任意逻辑
控制权浏览器事件回调（先声）
  • 客户端校验只是体验优化，绕过脚本即可穿透——真正的校验必须在服务端再做一次（第 4 周后端职责）