required 属性未生效主因是表单未用 包裹或按钮未设 type="submit"；type="email" 仅做基础格式校验，pattern 用正则实现自定义严格校验；字符串长度用 minlength/maxlength，数值范围用 min/max；错误提示可通过 setcustomvalidity() 和伪类优化。
required 属性为什么没生效？
常见现象是加了 required 却仍能提交空表单，多数因为表单没配 <form></form> 标签包裹，或用了 button 而非 type="submit"。浏览器只在原生表单提交时触发 required 校验。
- 必须把输入控件放在
<form></form>内部 -
<button></button>默认是type="button"，要显式写成<button type="submit"></button> -
required对<input type="hidden">、<input type="button">无效 - 移动端键盘可能不弹出“必填”提示，但提交时仍会拦截并高亮字段
type="email" 和 pattern 的区别在哪？
type="email" 是语义化+基础校验：仅检查是否含 @ 符号和域名格式（如 a@b.c 就算通过），不验证邮箱真实存在；pattern 是正则驱动，可自定义严格度，但需配合 title 提示用户格式要求。
-
<input type="email" required>自动触发浏览器邮箱格式提示 -
<input pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="请输入有效邮箱">更严谨，但 Safari 对pattern支持较晚（iOS 10.3+） - 两者可共存：
<input type="email" pattern=".+@.+\..+" required>，兼顾语义与控制力 - 注意：正则开头结尾不要加
/，HTML 中不写分隔符
minlength/maxlength 和 min/max 数值限制怎么用？
字符串长度用 minlength/maxlength，数字范围用 min/max，类型必须匹配——<input type="number"> 才认 min，<input type="text"> 只认 minlength。
-
<input type="text" minlength="5" maxlength="20">限制字符数（中文、英文、符号均计为 1） -
<input type="number" min="0" max="100" step="0.5">限制数值范围和步长，step="any"允许小数 - 若设了
min="10"但初始值为空，提交时不校验（空值绕过），需加required强制填写 -
maxlength在type="number"上无效，它只对文本类输入起作用
如何让错误提示更友好？
浏览器默认提示（如“请填写此字段”）无法定制文案，但可通过 :valid/:invalid 伪类 + setCustomValidity() 控制状态和提示内容。
- 用 CSS 区分状态：
input:invalid { border-color: #e74c3c; }，注意:invalid在未聚焦时也生效，可用:user-invalid（Chrome/Edge 109+）减少干扰 - JS 中调用
input.setCustomValidity("用户名已存在")可覆盖默认提示，传空字符串表示校验通过 - 别忘了监听
input或blur事件重置校验，否则用户改完后提示仍残留 - 移动端慎用
alert()提示，会打断操作流；优先用内联文字或图标反馈
原生属性够用，但别指望它们覆盖所有业务规则——手机号归属地、密码强度组合、实时用户名查重，这些得靠 JS 补充。先用好 required、type、pattern 等，再叠加脚本，别一上来就写一堆验证逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
