表单验证属性
HTML5 内置了一套零 JS 的验证机制，全部通过属性声明：required 必填、minlength/maxlength 长度范围、min/max/step 数值范围、pattern 正则匹配。提交时浏览器自动检查，不通过会阻止提交并在控件旁弹出提示气泡。
title 属性可以补充 pattern 的说明文字，部分浏览器会把它显示在错误提示里。验证状态还能配合 CSS 伪类 :valid、:invalid 做即时视觉反馈，比如非法输入时给输入框描红。
需要自定义错误文案时，用 JS 调用 setCustomValidity('提示文字')；临时想关掉原生验证（比如自己用 JS 接管）则在 form 上加 novalidate。
本节要点required/pattern/min/max 等属性实现免 JS 验证；:valid/:invalid 提供样式钩子；novalidate 关闭原生验证；前端验证只是体验优化，服务端必须再验证一次。
HTML
<form action="/api/register" method="post"> <!-- required 必填；pattern 限制 6~16 位字母数字 --> <input type="text" name="user" required pattern="[A-Za-z0-9]{6,16}" title="用户名须为 6~16 位字母或数字" placeholder="用户名"> <!-- 数值范围限制 --> <input type="number" name="age" required min="18" max="60"> <input type="email" name="mail" required> <button type="submit">注册</button> </form> <style> /* 非法输入时输入框描红 */ input:invalid { border-color: #e5534b; } input:valid { border-color: #3fb950; } </style>
