HTML5 中原生表单校验怎么配合 valid 状态选择器写样式-H5教程-PHP中文网

HTML5原生表单校验通过:valid/:invalid伪类实时响应valid/invalid状态，需设置required、type="email"等校验属性才生效；初始空required字段默认:invalid，:not(:placeholder-shown)可避免未输入时误标错，配合:focus/:disabled和transition可提升体验。

html5 中原生表单校验怎么配合 valid 状态选择器写样式

HTML5 原生表单校验可以通过 :valid 和 :invalid 伪类选择器，结合元素的 valid / invalid 状态动态控制样式，无需 JavaScript 就能实现基础视觉反馈。

确保表单控件有校验约束

只有设置了校验属性（如 required、type="email"、minlength、pattern 等）的表单控件，浏览器才会触发原生校验逻辑，并影响 :valid / :invalid 的计算结果。

—— 必填项，空时为 :invalid
—— 格式错误时为 :invalid
—— 不匹配正则时为 :invalid

:valid 和 :invalid 的触发时机

这两个伪类在用户**输入后实时计算**（部分浏览器还支持“提交时才校验”，但样式仍基于当前 validity 状态）。注意：

初始为空的 required 输入框，默认是 :invalid（因为不满足必填）
用户未交互前，:valid 可能不生效；可配合 :user-invalid（Chrome/Edge 支持）做更精准控制
:invalid 会覆盖 :valid，两者互斥

写法示例：输入框状态样式

直接用伪类设置边框、背景或图标：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

input:valid {
  border-color: #28a745;
  background-color: #f8fff9;
}

input:invalid:not(:placeholder-shown) {
  border-color: #dc3545;
  background-color: #fff8f8;
}

input:invalid:not(:placeholder-shown) + .icon {
  background-image: url('error.svg');
}

其中 :not(:placeholder-shown) 是关键：避免用户还没输就显示红色（占位符还在时先不标错）。