如何通过css:valid与:invalid校验表单输入

苏承栈
2026-10-29 • 👁 0人浏览过
使用CSS的:valid和:invalid伪类可基于HTML5验证属性实现表单实时校验样式反馈，通过结合required、type、pattern等属性，配合:not(:placeholder-shown)避免初始标红，提升用户体验。使用 CSS 的 :valid 和 :invalid 伪类，可以在不写 JavaScript 的情况下对表单输入进行基本的实时校验，并通过样式反馈给用户。这种方式依赖于 HTML5 的表单验证属性（如
required
、
type
、
pattern
等），结合 CSS 实现视觉提示。 1. 基本语法与作用 :valid 匹配当前输入内容符合校验规则的表单元素。 :invalid 匹配当前输入不符合规则的元素。这些伪类适用于
、
</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><select></code></div>
等表单控件，前提是它们设置了约束条件。
示例：
立即学习
“
前端免费学习笔记（深入）
”；
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input:valid {
  border-color: green;
  outline: 2px solid #b0e0b0;
}

input:invalid {
  border-color: red;
  outline: 2px solid #fbb;
}</code></div>
2. 结合 HTML 校验属性使用
要让
:valid/:invalid
生效，必须在 HTML 中设置有效的约束。常见的包括：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">required</code></div>
：字段不能为空
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">type="email"</code></div>
：必须为合法
邮箱
格式
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">type="url"</code></div>
：必须为合法 URL
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">min</code></div>
/
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">max</code></div>
：数值或日期范围
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">pattern</code></div>
：自定义
正则表达式
匹配
HTML 示例：
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><form>
  <label>邮箱：<input type="email" required></label>
  <label>年龄：<input type="number" min="18" max="120"></label>
  <label>密码：<input type="text" pattern=".{6,}" required></label>
</form></code></div>
对应 CSS：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input:invalid {
  background-color: #fff0f0;
  border: 1px solid #ff4d4d;
}

input:valid {
  background-color: #f0fff0;
  border: 1px solid #4caf50;
}</code></div>
3. 避免页面加载时立即标红
如果用户还没开始输入，所有必填字段默认是
:invalid
，会立刻显示错误样式，影响体验。
可以通过以下方式延迟提示：
只在用户离开输入框后（失去焦点）才应用样式
利用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:user-invalid</code></div>
（实验性，支持有限）
结合
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:focus</code></div>
控制样式触发时机
推荐做法：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">/* 只有当用户输入过且无效时才标红 */
input:invalid:not(:placeholder-shown) {
  border-color: red;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.1);
}

/* 或者：失去焦点后再显示错误 */
input:focus:invalid {
  /* 可选：聚焦时也提示 */
}

input:out-of-range {
  border-color: orange;
}</code></div>
4. 扩展样式提升用户体验
除了边框颜色，还可以添加图标、提示文字或动画增强反馈。
例如添加小图标：
```
css
input:valid {
  background-image: url('check.
svg
');
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 30px;
}
input:invalid {
background-image: url('warning.svg');
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 30px;
}
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">
<p>注意：若已设置 <code>background</code>，需调整以免覆盖。</p>

基本上就这些。合理使用 <strong>:valid</strong> 和 <strong>:invalid</strong> 能快速实现基础表单反馈，适合简单场景。复杂逻辑仍建议配合 JavaScript 使用。</code></div>
                            </div>

                            <!-- 文章导航 -->
                            <nav class="jxgpc-article-nav" aria-label="文章导航">

    
                                <a href="http://www.jxgpc.com/pc/32950.html" class="jxgpc-article-nav-link jxgpc-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="jxgpc-article-nav-label">上一篇</div>
                                        <div class="jxgpc-article-nav-title">HTML响应式能替代移动适配吗_HTML响应式适配移动适配策略【手册】</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.jxgpc.com/pc/32957.html" class="jxgpc-article-nav-link jxgpc-article-nav-next">
                                    <div>
                                        <div class="jxgpc-article-nav-label">下一篇</div>
                                        <div class="jxgpc-article-nav-title">如何通过css justify-content实现主轴对齐</div>
                                    </div>
                                    <span>›</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="jxgpc-content-section" style="margin-top: 20px;">
                        <h2 class="jxgpc-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="jxgpc-article-list">

    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32950.html" class="jxgpc-article-link">HTML响应式能替代移动适配吗_HTML响应式适配移动适配策略【手册】</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32946.html" class="jxgpc-article-link">css想让特定文本首字放大怎么办_使用::first-letter伪元素设置样式</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32914.html" class="jxgpc-article-link">html5怎么高效自学_html5边学基础标签边做小项目练手高效入门【自学】</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32912.html" class="jxgpc-article-link">如何实现JavaScript中的依赖注入以提升代码可维护性？</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32890.html" class="jxgpc-article-link">Vue transition实现点赞动画效果的示例</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32886.html" class="jxgpc-article-link">jQuery中trigger()方法用法实例</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32853.html" class="jxgpc-article-link">CSS3绘制三角形实例介绍</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32841.html" class="jxgpc-article-link">Unicode字符显示差异：字体如何决定显示效果？</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32957.html" class="jxgpc-article-link">如何通过css justify-content实现主轴对齐</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/32958.html" class="jxgpc-article-link">关于JavaScript如何实现图片连播以及联级菜单的实例</a>
                                <div class="jxgpc-article-meta">2026-10-29</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="jxgpc-sidebar jxgpc-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">推荐阅读</h3>
        <div class="jxgpc-recommend-grid">

    
            <a href="http://www.jxgpc.com/pc/32958.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="关于JavaScript如何实现图片连播以及联级菜单的实例">
                </div>
                <div class="jxgpc-recommend-title">关于JavaScript如何实现图片连播以及联级菜单的实例</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/32957.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="如何通过css justify-content实现主轴对齐">
                </div>
                <div class="jxgpc-recommend-title">如何通过css justify-content实现主轴对齐</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/32955.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="如何通过css:valid与:invalid校验表单输入">
                </div>
                <div class="jxgpc-recommend-title">如何通过css:valid与:invalid校验表单输入</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/32950.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="HTML响应式能替代移动适配吗_HTML响应式适配移动适配策略【手册】">
                </div>
                <div class="jxgpc-recommend-title">HTML响应式能替代移动适配吗_HTML响应式适配移动适配策略【手册】</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">最新文章</h3>
        <ul class="jxgpc-article-list">

    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/32958.html" class="jxgpc-article-link">关于JavaScript如何实现图片连播以及联级菜单的实例</a>
                <div class="jxgpc-article-meta">2026-10-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/32957.html" class="jxgpc-article-link">如何通过css justify-content实现主轴对齐</a>
                <div class="jxgpc-article-meta">2026-10-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/32955.html" class="jxgpc-article-link">如何通过css:valid与:invalid校验表单输入</a>
                <div class="jxgpc-article-meta">2026-10-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/32950.html" class="jxgpc-article-link">HTML响应式能替代移动适配吗_HTML响应式适配移动适配策略【手册】</a>
                <div class="jxgpc-article-meta">2026-10-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/32946.html" class="jxgpc-article-link">css想让特定文本首字放大怎么办_使用::first-letter伪元素设置样式</a>
                <div class="jxgpc-article-meta">2026-10-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/32914.html" class="jxgpc-article-link">html5怎么高效自学_html5边学基础标签边做小项目练手高效入门【自学】</a>
                <div class="jxgpc-article-meta">2026-10-29</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">热门标签</h3>
        <div class="jxgpc-article-tag-list">

    
            <a href="http://www.jxgpc.com/tag/2559" class="jxgpc-article-tag-item">正则表达式</a>
    
            <a href="http://www.jxgpc.com/tag/2387" class="jxgpc-article-tag-item">html5</a>
    
            <a href="http://www.jxgpc.com/tag/2071" class="jxgpc-article-tag-item">svg</a>
    
            <a href="http://www.jxgpc.com/tag/1863" class="jxgpc-article-tag-item">java</a>
    
            <a href="http://www.jxgpc.com/tag/1820" class="jxgpc-article-tag-item">邮箱</a>
    
            <a href="http://www.jxgpc.com/tag/1699" class="jxgpc-article-tag-item">Javascript</a>
    
            <a href="http://www.jxgpc.com/tag/1681" class="jxgpc-article-tag-item">css</a>
    
            <a href="http://www.jxgpc.com/tag/1656" class="jxgpc-article-tag-item">red</a>
    
            <a href="http://www.jxgpc.com/tag/1596" class="jxgpc-article-tag-item">html</a>
    
            <a href="http://www.jxgpc.com/tag/1590" class="jxgpc-article-tag-item">ai</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="jxgpc-footer">
        <div class="jxgpc-container">
            <div class="jxgpc-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.jxgpc.com/22.html" class="jxgpc-footer-link">免责声明</a>
                
                <a href="http://www.jxgpc.com/23.html" class="jxgpc-footer-link">关于我们</a>
                
                <a href="http://www.jxgpc.com/24.html" class="jxgpc-footer-link">联系我们</a>
                
                <a href="http://www.jxgpc.com/25.html" class="jxgpc-footer-link">投诉删除</a>
                
                <a href="http://www.jxgpc.com/26.html" class="jxgpc-footer-link">投稿须知</a>
                
                
            </div>
            <div class="jxgpc-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 极星编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063994号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="jxgpc-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

    <!-- 公共脚本 -->
    <script src="http://www.jxgpc.com/static/v3/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>