html表单中用required属性可实现字段必填，它原生支持、无需js，但仅在type="submit"或回车提交时触发校验；对checkbox/radio有效，不适用于hidden；默认不trim空格，且不能替代后端验证。
HTML表单中怎么让字段必填
用 required 属性就行，加在 <input>、<select></select> 或 <textarea></textarea> 标签里，浏览器会自动阻止提交空值，并给出基础提示。
它不依赖 JavaScript，原生支持，但只在表单提交时触发校验——用户没点提交按钮，就不会弹错。
-
required是布尔属性，写成required或required="required"都行，推荐前者更简洁 - 对
<input type="checkbox">和<input type="radio">也有效，但行为不同：复选框必须勾选，单选组至少一个被选中 - 不适用于
<input type="hidden">，浏览器会忽略它的required - 如果字段有默认值（比如
value="default"），即使用户删掉内容，只要没再输入，提交时仍可能被判定为“空”而报错
为什么加了 required 还能提交成功
常见原因是表单里混用了 type="button" 或 JavaScript 手动调用 form.submit() —— 这类操作绕过浏览器原生校验。
原生 required 只拦截 type="submit" 按钮触发的提交，以及回车提交（在可聚焦的文本类控件中）。
立即学习“前端免费学习笔记（深入）”；
- 检查按钮是不是写成了
<button type="button"></button>，应改为<button type="submit"></button> - 如果用 JS 提交，得先调用
form.checkValidity()判断，返回false就别执行submit() - 某些框架（如 React）里直接操作 DOM 提交，也可能跳过校验，需手动补
reportValidity()
required 和后端验证是什么关系
required 纯属前端体验优化，完全不可信。用户禁用 JS、改 HTML、用 curl 绕过表单，都能发空值过去。
后端必须独立校验，不能因为前端写了 required 就省略字段非空判断。
- 前后端校验逻辑最好一致，比如都把空格字符串当作无效值（
required默认不 trim，" "会被认为已填写） - 后端收到空字符串、
null、缺失字段，都应统一返回明确错误，而不是 500 或静默失败 - 不要依赖
required做业务约束，比如“手机号必填且格式合法”，格式校验还得靠pattern或 JS
兼容性和视觉反馈要注意什么
所有现代浏览器都支持 required，IE10+ 也行，但老版本 Android WebView 有 bug：点击带 required 的 <input> 后，键盘弹出但焦点没真正落在输入框上。
浏览器默认提示是英文或系统语言，无法自定义文案；出错样式也有限（比如 Chrome 会给 :invalid 加红框，但不显示文字提示）。
- 用
:invalid:not(:placeholder-shown)可以区分“真无效”和“刚加载还没输”的状态，避免初始红框干扰 - 想控制提示文字，得用
setCustomValidity()配合 JS，但会覆盖原生required提示，要自己管理全部校验逻辑 - 移动端 Safari 对
required的 focus 行为较保守，有时需要轻点两次才触发校验提示
