[!info] related notes

• 所属：表单与媒体 MOC
• 前置：HTML 表单
• 相关：表单样式 · 可访问性基础

HTML 表单控件与校验

这个概念为什么出现

只靠“提交时 fetch + alert”会漏掉：

• 邮箱格式、数字范围、必填
• 移动端合适键盘（inputmode/type=email）
• 无 JS 时的第一道防线

HTML 控件类型 + 约束校验把常见规则下沉到平台。

[!abstract] 一句话理解 选对控件类型是交互与数据质量的一部分；required/min/max/pattern 等是浏览器内建校验，但不是业务规则引擎，更不能替代服务端。

最小可运行示例

场景：新建 SKU 基础信息

<form id="sku-form">
  <label for="sku">SKU 编码</label>
  <input
    id="sku"
    name="sku"
    required
    pattern="[A-Z0-9\-]{3,20}"
    title="3-20 位大写字母、数字或短横线"
    autocomplete="off"
  />

  <label for="qty">安全库存</label>
  <input id="qty" name="safetyStock" type="number" min="0" max="99999" required />

  <label for="email">通知邮箱</label>
  <input id="email" name="notifyEmail" type="email" required />

  <button type="submit">创建</button>
</form>
<script>
  const form = document.getElementById('sku-form')
  // 正常用户提交时，浏览器先校验；失败会阻止 submit 事件。
  form.addEventListener('submit', (event) => {
    event.preventDefault() // 教学演示不发请求；这里可接实际提交逻辑。
    console.log(Object.fromEntries(new FormData(form)))
  })
</script>

期望：空值/非法 SKU/非法邮箱时提交被原生校验拦住；有效时只在控制台显示数据，不创建真实 SKU。type=number 在支持的移动浏览器上更易输入数字。

结合场景关注点

1. pattern 是前端体验，可被绕过。
2. type=email 等校验规则因浏览器而细节差异。
3. 自定义 UI 时仍可用 setCustomValidity；错误修复后必须调用 setCustomValidity('') 清除，否则持续无效。\

核心模型

控件选型（压缩）

需求	优先
短文本	type=text
密码	password
邮箱/URL/电话	email/url/tel
数字	number 或文本+输入策略
选项	select/radio/checkbox
文件	file + form enctype
多行	textarea

约束校验要点

• 约束属性：required min max minlength maxlength pattern step
• pattern 匹配整个非空值；现代浏览器按 Unicode Sets（v 标志）解释，字符类中的字面短横线需写 \-。空值是否允许由 required 决定。
• checkValidity() 返回有效性并对无效控件触发 invalid；reportValidity() 还会尝试展示原生提示。\
• CSS 伪类：:valid :invalid :required（样式见 CSS 表单笔记）

边界

• inputmode 只提示键盘，不执行校验；type=tel 本身不验证电话号码格式。
• type=number 默认 step 为 1；非整数输入需明确 step，编号/邮编通常用 text。
• 跨字段（“结束日期 > 开始日期”）原生表达弱，需 JS。
• 关闭原生提示却不重建可访问错误 = 退步。
• novalidate 常用于完全自定义校验，但要自己负责完整性。

常见误区

[!warning] 常见误区：客户端校验通过 = 数据安全 攻击者可不经浏览器直接打 API。服务端校验强制。

工程实践

• 错误文本与控件 aria-describedby 关联。
• 失败时焦点落到第一个无效控件。
• 密码/隐私字段注意 autocomplete 值。

本节总结

控件类型与原生校验是平台赠品；把它们当作第一层，把业务规则与安全放在 JS/服务端上层。

自测题

1. 何时用 setCustomValidity？
2. 为什么 pattern 不能当安全策略？

参考答案

1. 原生约束表达不了或要统一文案/跨字段错误时。
2. 可被绕过；只改善输入体验与快速反馈。

延伸阅读

资料	类型	支撑内容
Constraint validation	MDN	API
pattern	MDN	Unicode Sets 与字符转义
input types	MDN	控件