利用 required、pattern、inputmode 和约束校验 API，无需任何外部库即可构建健壮的表单。
在 Kodokon 中打开本课浏览器自带一套完整的校验引擎，很多团队却习惯性地用 JavaScript 重新实现它。构建模块有：required（必填字段）、能校验格式的类型（email、url、date）、minlength/maxlength、用于数值的 min/max/step，以及接受正则表达式的 pattern。关键细节：pattern 是隐式锚定的——整个值都必须匹配，就好像正则被包裹在 ^ 和 $ 之间一样。再用标准化的值给字段加上 autocomplete（postal-code、email、tel）：这既是用户体验，也是无障碍。
<label for="zip">Postal code</label>
<input id="zip" name="zip" type="text"
required pattern="[0-9]{5}"
inputmode="numeric"
autocomplete="postal-code">inputmode 属性常常被误解：它什么都不校验。它只是告诉移动系统显示哪种虚拟键盘（numeric、tel、email、decimal、search）。这就是为什么 type="text" + inputmode="numeric" + pattern 的组合是数字编码的推荐做法：你获得了正确的键盘，却不必继承 type="number" 的种种行为。
input:user-invalid {
border: 2px solid #b3261e;
}
input:user-valid {
border: 2px solid #1b5e20;
}在 CSS 这一侧，优先选用 :user-invalid 而非 :invalid：后者在页面加载时就立即应用，会把用户还没碰过的字段涂成红色。在 JavaScript 这一侧，约束校验 API 补全了整套工具：checkValidity() 触发检查，validity 对象暴露确切的原因（patternMismatch、valueMissing、tooShort），而 setCustomValidity() 让你用自己的消息替换浏览器的通用提示。
const zip = document.querySelector("#zip");
zip.addEventListener("input", () => {
if (zip.validity.patternMismatch) {
zip.setCustomValidity("Enter 5 digits.");
} else {
zip.setCustomValidity("");
}
});