required属性仅在表单submit事件中触发校验，须包裹于内、使用type="submit"按钮，且仅对原生控件生效；空值判定依赖validity.valuemissing而非value===" "。
required 属性就能解决，但必须用对位置和触发方式，否则形同虚设。
required 只在 submit 事件中生效
它不是实时监听空值，而是在表单提交时才检查：value === ""、selectedIndex === 0（<select></select>）、或未勾选（<input type="checkbox/radio">）等情况。
- 必须把输入框包在
<form></form>标签内，否则浏览器不识别为表单控件 - 提交按钮得是
<button type="submit"></button>或<input type="submit">；用type="button"或 JS 调form.submit()会跳过所有校验 -
form.requestSubmit()是替代form.submit()的正确方法，能触发原生验证
required 对不同 input type 的空值判断差异
看似简单，但各类型“空”的定义不一样，容易误判：
-
type="text"、"email"、"password"：只认纯空字符串（""），" "（含空格）算非空，required不报错 -
type="number"：允许尾部空格，"123 "仍通过；但完全没输（value === ""）才触发valueMissing -
type="date"：未选择任何日期时才报错；选了"9999-99-99"这种非法值，required不拦，validity.badInput才为true -
<select required></select>：第一个<option></option>必须带disabled selected且value=""，否则默认选中即绕过校验
怎么准确判断“是否为空”而不被干扰
别依赖 element.value === ""，要用 element.validity.valueMissing —— 这才是浏览器内部判定“必填未填”的唯一可靠依据。
- 它不受粘贴、JS 赋值、空格等干扰，只响应原生约束逻辑
- 配合
checkValidity()可主动触发判断：if (!input.checkValidity() && input.validity.valueMissing) - 监听
input或blur时，每次都要先调input.setCustomValidity("")清空旧状态，再根据逻辑决定是否设错
为什么加了 required 却没反应？常见漏点
最常被忽略的是结构和事件链断裂：
-
<form></form>标签缺失或写成<form></form>自闭合（HTML 不合法，部分浏览器不解析） - 用了
event.preventDefault()却没手动调form.checkValidity()，导致验证逻辑被静默吞掉 - 自定义组件（如封装的
<my-input></my-input>）没透传required到原生<input>，浏览器根本看不到约束 - 移动端 WebView（尤其低端安卓）可能禁用原生气泡，但
validity状态仍可用，需自己渲染提示
真正麻烦的不是加 required，而是它只管“有没有”，不管“有没有意义”——比如邮箱字段填了 user@localhost，required 和 type="email" 都放行。需要格式严谨，就得上 pattern 或 JS 校验，而且得记得清空 setCustomValidity 的残留状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
