如何在HTML中实现表单必填项校验-html教程-PHP中文网

required属性是最简必填校验方案，原生支持、无需js，仅对input/select/textarea生效，空字符串或未选中即报错，但带空格字符串可能被误判，需配合trim及placeholder优化体验。

如何在html中实现表单必填项校验

用 `required` 属性最简实现必填校验

浏览器原生支持的 required 是最轻量、兼容性最好的方案，适用于大多数单字段校验场景。它会在表单提交时触发浏览器默认提示（如“请填写此字段”），无需 JS 就能阻断提交。

required 只对 <input>、<select></select>、<textarea></textarea> 有效，对自定义组件无效
空字符串、null、未选中的 <select></select>（含 <option value=""></option>）均被判定为“未填写”
注意：带空格的字符串（如 " "）在部分浏览器中仍会通过校验，需配合 JS 进一步 trim
移动端 Safari 对 required 的提示样式较弱，建议搭配 placeholder 提示用户

用 `checkValidity()` 和 `reportValidity()` 控制校验时机

原生 required 只在 submit 事件触发，若需在失去焦点（blur）或按键（input）时提前反馈，就得调用表单控件的方法。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

element.checkValidity() 返回布尔值，不显示提示；适合做逻辑判断
element.reportValidity() 返回布尔值，同时触发浏览器默认气泡提示；适合手动触发校验反馈
对 <input type="email"> 等带类型校验的字段，checkValidity() 也会一并检查格式
注意：调用 reportValidity() 前必须确保元素已渲染且未被 display: none 隐藏，否则返回 false 且无提示

document.getElementById('username').addEventListener('blur', function() {
  if (!this.checkValidity()) {
    this.reportValidity(); // 显示原生提示
  }
});

用 `setCustomValidity()` 替换默认错误消息

浏览器原生提示语不可定制，中文项目常需更明确的文案，这时要用 setCustomValidity() 覆盖默认校验状态。

传入非空字符串（如 "用户名至少 3 个字符"）表示校验失败；传入空字符串 "" 表示校验通过
必须在每次输入后重置，否则旧错误会持续阻塞提交：先 setCustomValidity("")，再按条件重新设错
调用 setCustomValidity() 后，checkValidity() 结果即受其控制，不再看 required
注意：不能只靠 setCustomValidity() 实现必填逻辑——它不自动检测空值，得自己写判断

const input = document.getElementById('password');
input.addEventListener('input', function() {
  this.setCustomValidity(""); // 先清空
  if (this.value.length 

<h3>服务端校验不可省略，前端只是体验层</h3>
<p>所有前端校验都可被绕过：禁用 JS、改 DOM、直接发请求。任何涉及数据写入、权限判断、金额计算的逻辑，必须在服务端重复验证。</p>