能，但仅在表单提交时触发原生校验，非实时拦截；required拦空值（含空格字符串视为非空），type="email"仅校验基础格式（如含@和点），均不防篡改且不可替代后端验证。
input 的 required 和 type 属性真能拦住空值和格式错误？
能，但只在表单提交触发原生校验时生效，不是实时拦截。用户点提交按钮后，浏览器会检查 required 字段是否为空、type="email" 是否含 @ 符号、type="number" 是否为有效数字——不符合就弹出提示，且阻止 submit 事件。注意：这些校验不依赖 JavaScript，但也不会在用户敲字中途触发。
常见误区是以为加了 type="email" 就能防住所有非法邮箱，其实它只做基础格式判断（比如 a@b 会被通过），不验证域名是否存在或是否真实可投递。
-
required对空格字符串（" "）视为非空，不会报错；需配合pattern或 JS 做 trim 后校验 -
type="number"允许输入e、+、-等符号（如1e2是合法数字），但用户输1.2.3会被拒绝 - 移动端软键盘会因
type值自动切换（type="tel"弹数字键盘），这是额外收益，不是校验逻辑本身
用 pattern 写正则时为什么总不生效？
因为 pattern 只对 type="text"、"search"、"tel"、"url"、"email"、"password" 生效，对 type="number" 或 "date" 完全忽略。而且正则默认是**全文匹配**，你得自己加上 ^ 和 $，否则 pattern="\d+" 会让 "abc123def" 也通过。
示例：限制 6–12 位字母数字组合：
<input type="text" pattern="^[a-zA-Z0-9]{6,12}$" title="只能输入6-12位字母或数字">
-
title属性不是可选的——它是校验失败时显示的提示文案，没写就只显示浏览器默认英文提示 - 正则中不要用
\s，HTML pattern 不支持 Unicode 空白符，空格需显式写成[ ] - 移动端 Safari 对
pattern支持较弱，某些版本会跳过校验，关键字段仍建议用 JS 补充
如何让约束提示更友好，而不是弹原生丑弹窗？
浏览器原生提示无法样式化，但可以通过监听 invalid 事件 + setCustomValidity() 替换默认消息，再结合 CSS 的 :invalid 伪类控制外观。
关键操作顺序不能错：先调 setCustomValidity("") 清除旧错误，再设新消息，否则后续校验会卡死：
const input = document.querySelector('input[required]');
input.addEventListener('input', () => {
if (input.value.trim() === '') {
input.setCustomValidity('用户名不能为空');
} else if (input.value.length
- 只监听
input事件不够——用户粘贴内容可能绕过，得同时监听paste -
:invalid:not(:placeholder-shown)可以区分“未填”和“填了但错”，避免 placeholder 显示时就标红 - 调用
reportValidity()可主动触发校验（比如按钮点击时），但它会弹原生提示，想完全自定义就得禁用默认行为：form.addEventListener('submit', e => { e.preventDefault(); })
哪些约束属性在实际项目里容易被高估？
min/max 对 type="date" 有效，但对 type="number" 在部分安卓 WebView 中失效；step 在 type="number" 下若设为 any，Safari 会直接忽略整个约束。最麻烦的是 maxlength：它限制的是 DOM value 长度，但中文输入法组合过程中的中间态（如拼音）可能临时超长，导致光标错乱或输入中断。
-
minlength是 HTML5 新增属性，IE 完全不支持，连 polyfill 都难做，别指望它兜底 - 所有 HTML 约束都可被绕过——禁用 JS、改 DOM、curl 提交……它们只是第一道轻量防线，后端校验不可省
- 如果表单需要动态开关约束（比如根据复选框状态启用某字段），用
disabled比删required更可靠，因为 disabled 字段不参与校验且不提交
真正要稳，就得接受一个事实：HTML 约束是锦上添花，不是安全带。它省不了 JS 校验，但能让 80% 的手误在点击前就被挡住——前提是别把它当万能锁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
