HTML原生required属性只需在input、select或textarea标签中直接添加required即可生效，如<input required>；禁用时必须移除属性而非设required="false"；原生提示文案不可修改，需用setCustomValidity()配合JS自定义。
HTML 原生 required 属性怎么写才生效
直接在 <input>、<select> 或 <textarea> 标签里加 required 属性即可触发浏览器原生必填校验，不需要 JS 也能弹出提示。但要注意：它只对用户提交表单（比如点击 <button type="submit">）时生效，不会实时监听输入变化。
常见错误写法：required="false" 或 required="0" —— 这些都会被浏览器当作真值，依然启用校验。要禁用，得直接移除该属性，不能靠赋值“关掉”。
-
<input name="email" type="email" required>✅ 正确 -
<input name="phone" required="">✅ 空字符串也有效 -
<input name="age" required="required">✅ 兼容老写法，但没必要 -
<input name="note" required="false">❌ 依然会校验
表单提交失败时的提示文案能改吗
不能通过 HTML 属性直接修改，浏览器原生提示（如 Chrome 显示“请填写此字段”）由系统语言和 UA 决定，且无法用 CSS 或标准属性覆盖。想自定义文案，必须拦截默认提交行为，用 JS 手动校验并调用 setCustomValidity()。
关键点在于：一旦调用了 element.setCustomValidity("xxx")，哪怕传空字符串，也会覆盖原生提示；之后需手动清空才能恢复原生逻辑。
- 首次校验失败后，调用
input.setCustomValidity("手机号不能为空") - 用户输入内容后，必须再调用
input.setCustomValidity("")，否则即使填了内容，提交仍报错 - 不要在
input事件里反复调用setCustomValidity，容易干扰浏览器内部状态
required 和 JS 校验混用时的坑
当同时用 required 和 JS 的 checkValidity() 或 reportValidity() 时，容易误判“为什么明明填了还报错”。典型原因是：某些控件（如 <select>）的默认选项值为空字符串，但 required 会把它当成未填写。
例如：<select required><option value="">请选择</option><option value="1">是</option></select> —— 用户没切换选项，就始终不通过校验。
- 解决办法：给默认
<option>加disabled和hidden，并设selected，如：<option value="" disabled hidden selected>请选择</option> -
reportValidity()会触发 UI 提示，checkValidity()只返回布尔值，不提示 - 对
type="number"输入框，空值、非数字、NaN都算无效，但用户删光内容后，value是空字符串而非undefined
移动端 Safari 对 required 的兼容细节
iOS 15.4+ 基本支持完整行为，但旧版 Safari（尤其 iOS 12–14）存在两个实际问题：一是点击提交后不聚焦到首个错误字段；二是 textarea 的 required 校验可能忽略纯空白字符（如全空格、换行）。
如果目标用户含较多老 iOS 设备，建议额外做一次 JS 清理和判断：
if (el.value.trim() === "") {
el.setCustomValidity("此项不能为空");
} else {
el.setCustomValidity("");
}
别依赖 required 单独扛住所有场景，尤其涉及空格、富文本粘贴、或带 placeholder 的输入框 —— 浏览器对“空”的定义并不统一。
