HTML必填项required怎么加_HTML前端验证结构方法-html教程-PHP中文网

required 属性仅对原生可提交的表单控件生效，如 text、email、select、textarea 等；加在非控件元素或错误类型上无效，且仅校验是否为空值，不处理空格、格式等，服务端必须重复校验。

html必填项required怎么加_html前端验证结构方法

required 属性加对了，浏览器才会在提交时拦住空值；加错位置、选错元素类型，或者指望它校验空格或格式，都会失效。

它只认原生可提交的表单控件，不是所有带“输入感”的标签都能用：

<input type="text">、<input type="email">、<input type="number">、<input type="checkbox">、<input type="radio">、<input type="file"> —— ✅ 支持
<select></select> 和 <textarea></textarea> —— ✅ 支持
<input type="hidden">、<input type="range">、<input type="color">、<div contenteditable="true"> —— ❌ 浏览器直接忽略 <li> <code><label required></label> 或 <form required></form> —— ❌ 属性不作用于容器或非控件

特别注意：<select></select> 必须至少有一个 <option value=""></option>（且不能带 selected），否则用户一打开就“已选中”，required 形同虚设。

它是布尔属性，语义是“存在即生效”，不是开关变量：

✅ 正确写法：<input type="text" required>（最简、推荐）
✅ 也可接受：<input type="text" required=""> 或 <input type="text" required="required">
❌ 常见错误：<input type="text" required="true">（虽部分浏览器兼容，但不符合规范，不建议）

另外，别在框架组件上硬塞——比如 <antdinput required></antdinput>，除非组件明确透传 required 到底层 <input>，否则等于没写。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

required 只在原生表单提交流程中激活，以下情况会绕过它：

用 button type="button" + form.submit() 调用 —— ❌ 不触发校验（submit() 方法本身不触发约束验证）
用 event.preventDefault() 阻止了 submit 事件，又没手动调用 form.reportValidity() —— ❌ 看不到提示
表单里混入 <input type="button"> 或自定义提交逻辑（如 axios 发请求）—— ❌ 完全不走浏览器校验链
iOS Safari ≤15.4 中 <input type="file" required> —— ❌ 校验不触发，需 JS 补充判断

验证是否真起效：直接点 <button type="submit"></button> 或在文本框按回车，这是唯一可靠触发路径。

它只做一件事：检查值是否为空字符串（""）、未选中、或未选择。其余全是“睁一只眼”：

<input type="text" required> 填 " "（空格）、"\t\n" —— ✅ 通过（value.trim() === "" 但 value === " "）
<input type="email" required> 填 "@" 或 "test@.com" —— ✅ 通过（格式校验归 type="email" 自己管，required 不插手）
<input type="number" required> 填 "0" —— ✅ 通过；清空后值为 "" —— ❌ 拦截
<input type="checkbox" required> 同时写了 checked —— ✅ 默认满足，失去必填意义