required是布尔属性，写上即生效，需置于form内并用type="submit"按钮触发；select需设disabled hidden selected的空选项；date/number等类型校验逻辑各异；可用title、css、reportvalidity()和setcustomvalidity()优化提示。
直接在 <input>、<select></select> 或 <textarea></textarea> 标签上加上 required 属性即可开启原生必填验证，不需要 JavaScript，但必须满足几个关键前提才能真正生效。
required 属性怎么写才正确
它是一个布尔属性，写上即生效，不需赋值：
-
<input name="name" required>✅ -
<input name="email" type="email" required>✅ -
<select name="city" required><option value="">请选择</option></select>✅（但要注意默认项设置） -
<input required="false">❌ 浏览器仍视为启用校验 -
<input required="0">❌ 同样无效，会触发校验
为什么加了 required 却没拦住空提交
常见失效原因不是属性写错，而是触发条件不满足：
- 表单没用
<form></form>包裹，或包裹层级错误 - 提交按钮是
<button></button>但没写type="submit"（普通type="button"不触发校验） - 在
submit事件中调用了event.preventDefault()，又没手动执行form.checkValidity() - 用 JavaScript 调用了
form.submit()—— 这个方法完全绕过原生验证，应改用form.requestSubmit() - 表单写了
novalidate属性，等于主动关掉所有原生校验
select 和 date 等特殊控件的注意事项
不同控件对 required 的响应逻辑略有差异：
-
select：首个
<option value=""></option>必须加disabled selected hidden，否则用户未切换就始终报错。推荐写法：<option value="" disabled hidden selected>请选择</option> -
type="date"：只检查
input.value是否为空字符串，不校验日期是否真实存在（如 2024-02-30 可能被浏览器清空，也可能保留但提交失败） -
type="number"：空输入、非数字、NaN 都算无效；删光内容后
value是空字符串，会触发required校验 -
type="hidden"、type="button" 等不支持
required，加了也无效
让提示更实用的小技巧
原生提示文案无法直接修改，但可通过组合方式提升体验：
- 加
title="此项为必填"，部分浏览器在校验失败时会优先显示该文字 - CSS 控制视觉反馈：
input:invalid:not(:placeholder-shown)可避免页面一加载就全变红 - 失焦时想立刻提示：监听
blur事件，调用input.reportValidity() - 自定义文案唯一可靠方式：用
setCustomValidity("错误信息")，但记得用户输入后必须调setCustomValidity("")清空，否则后续提交永远失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
