required属性直接写required即可生效，仅对input、select、textarea有效；select需首项value为空，pattern须与required共存才联动校验，正则勿加^$，HTML中反斜杠需双写。
required 属性怎么写才生效
直接加 required 就行，不用赋值、不写 required="true" 或 required=""——浏览器只认这个属性是否存在。
它只对 input、select、textarea 有效，对 button、label 这类元素加了也无效。
-
input类型中，type="hidden"、type="button"、type="submit"等不支持required -
select必须有至少一个<option value="">或空value的首项，否则即使没选也会被当作“已填” - 移动端 Safari 和部分 Android 浏览器对
required的聚焦行为不一致，别依赖它自动滚动到错误字段
pattern 配合 required 做格式校验时的坑
required 只管“空不空”，pattern 才管“对不对”。但两者必须同时存在才能联动：先过空值，再跑正则。
常见错误是写了 pattern 却漏了 required，结果用户填个空格或任意字符串就过了校验。
立即学习“前端免费学习笔记（深入）”；
- 正则里不要写
^和$，浏览器会自动锚定全字符串匹配 - HTML 属性中反斜杠要双写，比如
pattern="[0-9]{11}"正确，pattern="\d{11}"会失效 -
title属性可配合pattern提示用户，例如title="请输入11位手机号"，否则失败时提示语极不友好
表单提交前手动触发校验的两种方式
用户没点提交按钮，但你希望提前检查（比如 tab 切换时或离开字段时），就得调 JS API。
checkValidity() 返回 true/false，不弹提示；reportValidity() 会高亮、聚焦、弹气泡——效果等同用户点了 submit。
- 动态改过
value后立即调reportValidity()，可能因内部状态未更新而误判，得先触发input或change事件 - 监听
invalid事件可捕获校验失败，但注意：它只在浏览器主动校验时触发（如 submit 或 reportValidity），不是每次输入都发 - 别在
submit事件里用event.preventDefault()挡住原生校验，除非你真打算自己全包——否则等于废掉required
为什么填了内容还被当成“空”
浏览器判定“空”的逻辑很具体：input 是 value.trim() === ""，select 是 selectedIndex === 0 且第一个 option 的 value 为空或不存在。
这意味着：" "、全角空格、制表符、换行符，只要 trim() 后为空，就算没填。
- 用户粘贴内容时容易带不可见字符，可加
onblur="this.value = this.value.trim();"预处理 -
type="email"加了required，填"abc"能过（非空），但提交时会被 type 校验拦住——这是两层校验，别混淆 - 服务端永远要重做校验，因为前端任何校验都可被绕过，
required只是体验优化
select 的首项必须显式设空 value，以及 pattern 的转义写法。这两处出错，整个必填逻辑就形同虚设。 
