如何使用 HTML5 原生属性实现表单必填校验与自定义错误提示-html教程-PHP中文网

如何使用 HTML5 原生属性实现表单必填校验与自定义错误提示

本文介绍如何利用 HTML5 required 属性和 :invalid 伪类，无需 JavaScript 即可实现输入框非空校验、邮箱格式验证，并在对应字段下方动态显示友好的错误提示信息。

本文介绍如何利用 html5 `required` 属性和 `:invalid` 伪类，无需 javascript 即可实现输入框非空校验、邮箱格式验证，并在对应字段下方动态显示友好的错误提示信息。

要实现在用户点击提交时，阻止表单默认提交行为、校验各字段是否为空及邮箱格式是否合法，并在每个输入框下方精准显示如“First name cannot be empty”等提示信息，最简洁、标准且可访问性友好的方案是采用 HTML5 原生表单验证机制，而非手动编写 JS 判断逻辑。

首先，修正原始代码中的关键问题：

if (fname.value = '') 是赋值操作（=）而非比较（===），会导致逻辑错误并清空值；
<input type="submit" onsubmit="formValidator()"> 的写法无效——onsubmit 事件应绑定在 <form></form> 元素上，而非 submit 按钮；
即使修复 JS，手动控制提交拦截需显式调用 event.preventDefault()，否则浏览器仍会刷新页面。

✅ 推荐方案：纯 HTML + CSS 实现声明式验证

步骤一：为每个必填字段添加 required 属性，并确保类型语义正确

步骤二：使用 CSS 配合 :invalid 和 :user-invalid 精准控制错误提示显示

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

.error {
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: 4px;
  min-height: 1.2em;
  display: none;
}

/* 当字段为空或格式错误，且用户已交互过时显示提示 */
input:invalid + .error,
input:user-invalid + .error {
  display: block;
}

/* 自定义各字段提示文案（通过伪元素） */
.error[data-field="first-name"]:before { content: "First name cannot be empty"; }
.error[data-field="last-name"]:before { content: "Last name cannot be empty"; }
.error[data-field="email"]:before { content: "Email cannot be empty or is invalid"; }
.error[data-field="password"]:before { content: "Password cannot be empty"; }

✅ 优势说明：

type="email" 自动校验邮箱格式（如 user@domain.com），无需正则；

required 触发原生必填校验，支持无障碍读屏；

:user-invalid（现代浏览器支持）比 :invalid 更精准——仅在用户编辑后失焦且校验失败时生效，避免初始加载即显示错误；

novalidate 属性可关闭默认红色气泡提示，让 UI 更统一；

完全无需 JavaScript，减少维护成本与潜在 Bug。