当前位置：首页 > 文章列表 > 文章 > 前端 > HTML表单验证：valid与invalid样式应用

HTML表单验证：valid与invalid样式应用

2025-09-05 11:31:51 0浏览收藏

HTML表单样式优化技巧：利用CSS的`:valid`和`:invalid`伪类，根据表单字段的验证状态（有效或无效）动态设置样式，实现即时视觉反馈。`:valid`伪类应用于内容符合验证规则的字段，而`:invalid`应用于不符合规则的字段。通过示例代码展示了如何为邮箱输入框设置有效时绿色边框、无效时红色边框的样式。强调了`:valid`和`:invalid`适用于具有验证规则的表单元素，并结合HTML5验证属性，简化验证逻辑，提升用户体验。掌握这些技巧，能有效改善表单的用户体验，让用户更直观地了解输入是否正确，从而提高表单的填写效率和准确性。

使用CSS的:valid和:invalid伪类可为表单元素设置有效和无效样式，结合HTML5验证属性实现即时视觉反馈，提升用户体验并简化验证逻辑。

HTML如何设置有效和无效样式？valid和invalid伪类的作用是什么？

HTML中设置有效和无效样式，主要通过CSS的:valid和:invalid这两个伪类来实现。它们允许开发者根据表单元素的内置验证状态，自动为元素应用不同的视觉样式，从而直观地向用户反馈其输入是否符合预设规则。:valid伪类匹配那些内容通过浏览器内置验证规则的表单元素，而:invalid则匹配那些内容不符合规则的元素。这极大地简化了表单验证的视觉反馈机制，让用户体验更流畅。

解决方案

要为HTML表单元素设置有效和无效样式，核心在于利用CSS选择器结合:valid和:invalid伪类。这通常应用于, </code>, 和 <code><select></code> 等表单控件。</p><p>举个例子，假设你有一个电子邮件输入框，并且希望在用户输入有效邮箱时边框变绿，无效时变红：</p><pre class="brush:language-html;toolbar:false;"><form> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <label for="password">密码:</label> <input type="password" id="password" name="password" minlength="6"> </form></pre><p>然后，在你的CSS中，你可以这样定义样式：</p><pre class="brush:language-css;toolbar:false;">/* 所有input的默认样式 */ input { border: 1px solid #ccc; padding: 8px; margin-bottom: 10px; transition: border-color 0.3s ease; /* 添加过渡效果，让变化更平滑 */ } /* 当输入框内容有效时 */ input:valid { border-color: #4CAF50; /* 绿色 */ box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* 绿色阴影 */ } /* 当输入框内容无效时 */ input:invalid { border-color: #f44336; /* 红色 */ box-shadow: 0 0 5px rgba(244, 67, 54, 0.5); /* 红色阴影 */ } /* 特别注意：对于required字段，在用户未输入任何内容（或第一次加载）时，它可能被认为是invalid。如果你想避免这种情况，只在用户与字段交互后才显示invalid状态，可以结合:not(:placeholder-shown)或JavaScript。但通常，对于required字段，一开始就显示invalid是可接受的，因为它确实需要用户输入。 */ input:invalid:focus { /* 聚焦且无效时 */ outline: none; /* 移除默认焦点轮廓 */ border-color: #d32f2f; /* 更深的红色 */ } /* 也可以为特定的input类型设置样式 */ input[type="email"]:invalid { background-color: #ffebee; /* 针对邮箱无效时显示浅红色背景 */ } input[type="password"]:valid { background-color: #e8f5e9; /* 针对密码有效时显示浅绿色背景 */ }</pre><p>通过这样的设置，当用户在邮箱输入框中输入一个非邮箱格式的字符串时，边框会自动变为红色；输入有效邮箱后，则变为绿色。密码输入框也是类似，当长度小于6位时显示无效样式，达到6位或以上时显示有效样式。这感觉很棒，省去了很多手动判断和添加/移除类的麻烦。</p><h3>何时应该使用:valid和:invalid伪类？</h3><p>我个人觉得，<code>:valid</code>和<code>:invalid</code>伪类在提供即时用户反馈方面简直是神器。它们最适合用于那些依赖HTML5内置验证属性（如<code>required</code>, <code>type="email"</code>, <code>type="url"</code>, <code>pattern</code>, <code>min</code>, <code>max</code>, <code>minlength</code>, <code>maxlength</code>等）的表单元素。</p><p><strong>使用场景：</strong></p><ul><li><strong>即时视觉反馈：</strong> 这是最核心的价值。用户在输入过程中就能看到自己的输入是否符合要求，不需要等到提交表单才发现错误。比如，一个邮箱输入框，当用户输入“abc”时立即变红，输入“abc@example.com”时变绿，这用户体验直接就上去了。</li><li><strong>简化客户端验证逻辑：</strong> 对于简单的、基于HTML属性的验证，你可以完全依赖CSS来处理视觉反馈，而无需编写JavaScript代码来监听输入事件并手动添加/移除类。这让代码更简洁，也减少了潜在的bug。</li><li><strong>提升用户体验：</strong> 明确的视觉提示能减少用户的困惑和挫败感。用户可以快速修正错误，而不是提交后才看到一个通用的“表单有误”提示。</li><li><strong>渐进增强：</strong> 即使JavaScript被禁用，这些基本的验证和视觉反馈依然能工作，因为它们是浏览器原生支持的。</li></ul><p><strong>一些思考：</strong> 说实话，我有时候会遇到一个小纠结，就是<code>required</code>字段在页面加载时，如果为空，它会立即被标记为<code>:invalid</code>。这可能导致一些用户觉得页面一上来就有“错误”。解决这个，你可以结合<code>:not(:placeholder-shown)</code>或者更复杂的CSS选择器，或者干脆接受这种行为，毕竟它确实是“无效”的。我通常倾向于让<code>required</code>字段一开始就显示无效状态，这反而能提醒用户这个字段是必填的。不过，对于那些不是<code>required</code>但有<code>pattern</code>限制的字段，我可能就不会让它在空的时候就显示无效，因为用户还没开始输入呢。</p><h3>如何结合JavaScript进行更复杂的表单验证？</h3><p>虽然<code>:valid</code>和<code>:invalid</code>伪类对于基于HTML5属性的验证非常强大，但它们也有局限性。很多时候，我们的表单验证逻辑远比“是不是邮箱”或“是不是数字”要复杂。例如，密码强度检查（必须包含大小写字母、数字和特殊字符）、确认密码是否与密码一致、用户名是否已被注册（需要后端请求）、或者某个字段的值依赖于另一个字段。</p><p>在这种情况下，JavaScript就成了不可或缺的工具。</p><p><strong>JavaScript的角色：</strong></p><ul><li><strong>自定义验证规则：</strong> 这是JS最擅长的。你可以编写任何复杂的逻辑来验证用户输入。</li><li><strong>异步验证：</strong> 例如，检查用户名是否已存在，这需要向服务器发送请求，CSS无法做到。</li><li><strong>跨字段验证：</strong> 比如“确认密码”字段必须和“密码”字段的值相同。</li><li><strong>动态错误消息：</strong> JS可以根据具体的错误类型，显示更详细、更友好的错误提示信息，而不仅仅是改变边框颜色。</li></ul><p><strong>结合方式：</strong></p><ol><li><p><strong>使用<code>setCustomValidity()</code>：</strong> 这是HTML5表单验证API的一部分。当你的JavaScript验证失败时，你可以通过<code>inputElement.setCustomValidity('你的错误消息')</code>来将该元素标记为无效，并设置一个自定义的错误消息。当元素被标记为无效时，<code>:invalid</code>伪类就会被触发。如果验证通过，记得调用<code>inputElement.setCustomValidity('')</code>来清除错误，让元素恢复<code>:valid</code>状态。</p><pre class="brush:language-javascript;toolbar:false;">const passwordInput = document.getElementById('password'); const confirmPasswordInput = document.getElementById('confirmPassword'); function validatePassword() { if (passwordInput.value !== confirmPasswordInput.value) { confirmPasswordInput.setCustomValidity('两次输入的密码不一致！'); } else { confirmPasswordInput.setCustomValidity(''); // 清除错误，使其有效 } } passwordInput.addEventListener('input', validatePassword); confirmPasswordInput.addEventListener('input', validatePassword);</pre><p>这样，即使密码不匹配，<code>:invalid</code>样式也会生效，同时浏览器会显示你设置的自定义错误消息。</p></li><li><p><strong>手动添加/移除CSS类：</strong> 对于那些不适合使用<code>setCustomValidity()</code>的场景（或者你更喜欢完全控制），你可以在JavaScript中根据验证结果，手动为元素添加或移除<code>.is-valid</code>或<code>.is-invalid</code>这样的CSS类。</p><pre class="brush:language-javascript;toolbar:false;">/* CSS */ .my-input.is-invalid { border-color: #f44336; } .my-input.is-valid { border-color: #4CAF50; } /* JavaScript */ const usernameInput = document.getElementById('username'); usernameInput.addEventListener('blur', async () => { // 失去焦点时验证 const username = usernameInput.value; if (username.length < 3) { usernameInput.classList.add('is-invalid'); usernameInput.classList.remove('is-valid'); // 显示错误消息... } else { // 模拟异步检查用户名是否已存在 const isTaken = await checkUsernameExists(username); if (isTaken) { usernameInput.classList.add('is-invalid'); usernameInput.classList.remove('is-valid'); // 显示“用户名已存在”错误 } else { usernameInput.classList.add('is-valid'); usernameInput.classList.remove('is-invalid'); // 清除错误消息 } } }); async function checkUsernameExists(username) { // 假设这是一个API调用 return new Promise(resolve => setTimeout(() => { resolve(username === 'admin'); // 假设'admin'已被占用 }, 500)); }</pre><p>这种方式给予你最大的灵活性，但代码量会比纯CSS或<code>setCustomValidity</code>多一些。我通常会倾向于先用HTML5和<code>:valid/:invalid</code>解决能解决的，剩下的再交给JS。</p></li></ol><h3>除了:valid和:invalid，还有哪些与表单状态相关的CSS伪类？</h3><p>除了<code>:valid</code>和<code>:invalid</code>，CSS还提供了许多其他有用的伪类，它们可以帮助我们根据表单元素的不同状态来应用样式，从而创建更细致、更响应式的用户界面。了解并善用它们，能让你的表单看起来更专业，用户交互也更顺畅。</p><ul><li><p><strong><code>:required</code> 和 <code>:optional</code>：</strong></p><ul><li><code>:required</code>：匹配带有<code>required</code>属性的表单元素。这对于视觉上区分必填字段非常有用，比如给它们添加一个星号或者不同的背景色。</li><li><code>:optional</code>：匹配不带<code>required</code>属性的表单元素。这可以用来强调哪些字段是可选的。</li><li><strong>用途：</strong> 我经常用<code>:required</code>给必填项加个醒目的边框或背景，这样用户一眼就知道哪些是必须填的。</li></ul></li><li><p><strong><code>:focus</code>：</strong></p><ul><li>当元素获得焦点时匹配。这是最常用的伪类之一，用于在用户与输入框交互时提供视觉反馈，比如改变边框颜色、添加阴影或放大字体。</li><li><strong>用途：</strong> 几乎所有可交互的表单元素都应该有<code>:focus</code>样式，这是一种基本的无障碍性要求，也能显著提升用户体验。</li></ul></li><li><p><strong><code>:disabled</code>：</strong></p><ul><li>匹配被禁用（带有<code>disabled</code>属性）的表单元素。这些元素通常是不可编辑或不可点击的。</li><li><strong>用途：</strong> 禁用状态的元素通常会变灰，以明确告诉用户它们当前无法操作。</li></ul></li><li><p><strong><code>:read-only</code>：</strong></p><ul><li>匹配只读（带有<code>readonly</code>属性）的表单元素。这些元素可以被用户查看，但不能被修改。</li><li><strong>用途：</strong> 和<code>:disabled</code>类似，但通常会比禁用状态的元素看起来更“可读”，因为它们的值可能仍然重要。</li></ul></li><li><p><strong><code>:placeholder-shown</code>：</strong></p><ul><li>当输入框显示其<code>placeholder</code>文本时匹配。</li><li><strong>用途：</strong> 可以在用户开始输入之前，对占位符文本或输入框本身进行特殊样式处理。比如，我有时会用它来隐藏或改变<code>label</code>的位置，实现一些Material Design风格的输入框效果。</li></ul></li><li><p><strong><code>:checked</code>：</strong></p><ul><li>匹配被选中（如<code>radio</code>按钮或<code>checkbox</code>）的元素。</li><li><strong>用途：</strong> 用于自定义单选框和复选框的样式，因为它们的默认样式往往不那么美观，而且跨浏览器一致性差。</li></ul></li><li><p><strong><code>:in-range</code> 和 <code>:out-of-range</code>：</strong></p><ul><li>适用于有<code>min</code>和<code>max</code>属性的数值或日期输入框。</li><li><code>:in-range</code>：当值在指定范围内时匹配。</li><li><code>:out-of-range</code>：当值超出指定范围时匹配。</li><li><strong>用途：</strong> 和<code>:valid</code>/:invalid`类似，但更专注于数值范围的验证反馈。</li></ul></li></ul><p>这些伪类共同构成了一个强大的CSS工具集，让我们能够以纯CSS的方式，对表单元素的各种状态进行精细化控制。我个人觉得，掌握这些伪类是构建高质量Web表单的基础。它们让前端开发者的生活变得简单，也让最终用户在填写表单时感觉更顺畅、更直观。</p><p>理论要掌握，实操不能落！以上关于《HTML表单验证：valid与invalid样式应用》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/307065.html" title="美团退款会原路退回吗？资金回账规则详解" class="img_box"> <img src="/uploads/20250905/175704309268ba59940a421.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="美团退款会原路退回吗？资金回账规则详解">美团退款会原路退回吗？资金回账规则详解 </a> <dl> <dt class="lineOverflow"><a href="/article/307065.html" title="美团退款会原路退回吗？资金回账规则详解" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">美团退款会原路退回吗？资金回账规则详解</dd> </dl> </div> <div class="cateItem"> <a href="/article/307067.html" title="Golang错误管理结构解析" class="img_box"> <img src="/uploads/20250905/175704316268ba59dabacd4.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Golang错误管理结构解析"> </a> <dl> <dt class="lineOverflow"><a href="/article/307067.html" class="aBlack" title="Golang错误管理结构解析">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">Golang错误管理结构解析</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/619691.html" class="img_box" title="CSS数字显示统一技巧，OpenType特性应用方法"> <img src="/uploads/20260601/17802914206a1d175ca6b74.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS数字显示统一技巧，OpenType特性应用方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619691.html" class="aBlack" target="_blank" title="CSS数字显示统一技巧，OpenType特性应用方法">CSS数字显示统一技巧，OpenType特性应用方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>209浏览</span> <span class="collectBtn user_collection" data-id="619691" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619689.html" class="img_box" title="PerformanceAPI全生命周期预警指南"> <img src="/uploads/20260601/17802913226a1d16faa9805.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="PerformanceAPI全生命周期预警指南"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619689.html" class="aBlack" target="_blank" title="PerformanceAPI全生命周期预警指南">PerformanceAPI全生命周期预警指南</a> </dt> <dd class="cont2"> <span><i class="view"></i>147浏览</span> <span class="collectBtn user_collection" data-id="619689" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619683.html" class="img_box" title="一个按钮控制多个状态的实现方式"> <img src="/uploads/20260601/17802911266a1d16367332e.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="一个按钮控制多个状态的实现方式"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619683.html" class="aBlack" target="_blank" title="一个按钮控制多个状态的实现方式">一个按钮控制多个状态的实现方式</a> </dt> <dd class="cont2"> <span><i class="view"></i>360浏览</span> <span class="collectBtn user_collection" data-id="619683" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619679.html" class="img_box" title="CSSGrid子元素排序技巧分享"> <img src="/uploads/20260601/17802910156a1d15c7e530b.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSSGrid子元素排序技巧分享"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619679.html" class="aBlack" target="_blank" title="CSSGrid子元素排序技巧分享">CSSGrid子元素排序技巧分享</a> </dt> <dd class="cont2"> <span><i class="view"></i>155浏览</span> <span class="collectBtn user_collection" data-id="619679" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619677.html" class="img_box" title="FIMO支持透明度设置吗？"> <img src="/uploads/20260601/17802909496a1d158569b8e.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="FIMO支持透明度设置吗？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619677.html" class="aBlack" target="_blank" title="FIMO支持透明度设置吗？">FIMO支持透明度设置吗？</a> </dt> <dd class="cont2"> <span><i class="view"></i>393浏览</span> <span class="collectBtn user_collection" data-id="619677" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619653.html" class="img_box" title="Web组件开发：CustomElements实战教程"> <img src="/uploads/20260601/17802898596a1d11436d93f.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Web组件开发：CustomElements实战教程"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619653.html" class="aBlack" target="_blank" title="Web组件开发：CustomElements实战教程">Web组件开发：CustomElements实战教程</a> </dt> <dd class="cont2"> <span><i class="view"></i>243浏览</span> <span class="collectBtn user_collection" data-id="619653" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619650.html" class="img_box" title="CSS无限循环背景动画技巧"> <img src="/uploads/20260601/17802897036a1d10a7bcfb8.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS无限循环背景动画技巧"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619650.html" class="aBlack" target="_blank" title="CSS无限循环背景动画技巧">CSS无限循环背景动画技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>116浏览</span> <span class="collectBtn user_collection" data-id="619650" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619644.html" class="img_box" title="CSS文字大小动画不自然怎么优化？"> <img src="/uploads/20260601/17802894386a1d0f9e5c88c.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS文字大小动画不自然怎么优化？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="动画">动画</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619644.html" class="aBlack" target="_blank" title="CSS文字大小动画不自然怎么优化？">CSS文字大小动画不自然怎么优化？</a> </dt> <dd class="cont2"> <span><i class="view"></i>126浏览</span> <span class="collectBtn user_collection" data-id="619644" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619634.html" class="img_box" title="清除浮动空白间距的实用技巧"> <img src="/uploads/20260601/17802890356a1d0e0bc8117.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="清除浮动空白间距的实用技巧"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619634.html" class="aBlack" target="_blank" title="清除浮动空白间距的实用技巧">清除浮动空白间距的实用技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>430浏览</span> <span class="collectBtn user_collection" data-id="619634" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619632.html" class="img_box" title="JavaScript前端安全核心问题有哪些？"> <img src="/uploads/20260601/17802889596a1d0dbf97f68.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript前端安全核心问题有哪些？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619632.html" class="aBlack" target="_blank" title="JavaScript前端安全核心问题有哪些？">JavaScript前端安全核心问题有哪些？</a> </dt> <dd class="cont2"> <span><i class="view"></i>109浏览</span> <span class="collectBtn user_collection" data-id="619632" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619631.html" class="img_box" title="自定义图片提交按钮，INPUTTYPE设为IMAGE"> <img src="/uploads/20260601/17802888896a1d0d793af4e.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="自定义图片提交按钮，INPUTTYPE设为IMAGE"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="javascript:;" class="aLightGray" title="html">html</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619631.html" class="aBlack" target="_blank" title="自定义图片提交按钮，INPUTTYPE设为IMAGE">自定义图片提交按钮，INPUTTYPE设为IMAGE</a> </dt> <dd class="cont2"> <span><i class="view"></i>179浏览</span> <span class="collectBtn user_collection" data-id="619631" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619622.html" class="img_box" title="CSS文字压到图片上怎么解决？z-index调整方法"> <img src="/uploads/20260601/17802885336a1d0c151a9a2.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS文字压到图片上怎么解决？z-index调整方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619622.html" class="aBlack" target="_blank" title="CSS文字压到图片上怎么解决？z-index调整方法">CSS文字压到图片上怎么解决？z-index调整方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>126浏览</span> <span class="collectBtn user_collection" data-id="619622" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight">  <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13100.html" target="_blank" title="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" class="img_box"> <img src="/uploads/20251027/176155320368ff2b3345c06.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13100.html" class="aBlack" target="_blank" title="ChatExcel酷表">ChatExcel酷表</a></dt> <dd class="cont1 lineTwoOverflow"> ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。 </dd> <dd class="cont2">5908次使用</dd> </dl> </li> <li> <a href="/ai/13099.html" target="_blank" title="Any绘本：开源免费AI绘本创作工具深度解析" class="img_box"> <img src="/uploads/20251023/176120760368f9e5333da5f.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Any绘本：开源免费AI绘本创作工具深度解析" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13099.html" class="aBlack" target="_blank" title="Any绘本">Any绘本</a></dt> <dd class="cont1 lineTwoOverflow"> 探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。 </dd> <dd class="cont2">6338次使用</dd> </dl> </li> <li> <a href="/ai/13098.html" target="_blank" title="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" class="img_box"> <img src="/uploads/20251021/176103600268f746e238bb8.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13098.html" class="aBlack" target="_blank" title="可赞AI">可赞AI</a></dt> <dd class="cont1 lineTwoOverflow"> 可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。 </dd> <dd class="cont2">6145次使用</dd> </dl> </li> <li> <a href="/ai/13097.html" target="_blank" title="星月写作：AI网文创作神器，助力爆款小说速成" class="img_box"> <img src="/uploads/20251014/176043000368ee07b3159d6.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="星月写作：AI网文创作神器，助力爆款小说速成" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13097.html" class="aBlack" target="_blank" title="星月写作">星月写作</a></dt> <dd class="cont1 lineTwoOverflow"> 星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。 </dd> <dd class="cont2">8120次使用</dd> </dl> </li> <li> <a href="/ai/13096.html" target="_blank" title="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" class="img_box"> <img src="/uploads/20251014/176040000268ed9282edf80.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13096.html" class="aBlack" target="_blank" title="MagicLight">MagicLight</a></dt> <dd class="cont1 lineTwoOverflow"> MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。 </dd> <dd class="cont2">6657次使用</dd> </dl> </li> </ul> </div>  <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/72840.html" class="aBlack" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></dt> <dd> <span class="left">2023-11-03</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/76259.html" class="aBlack" title="使用微信小程序实现图片轮播特效">使用微信小程序实现图片轮播特效</a></dt> <dd> <span class="left">2023-11-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/83771.html" class="aBlack" title="解析sessionStorage的存储能力与限制">解析sessionStorage的存储能力与限制</a></dt> <dd> <span class="left">2024-01-11</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/85057.html" class="aBlack" title="探索冒泡活动对于团队合作的推动力">探索冒泡活动对于团队合作的推动力</a></dt> <dd> <span class="left">2024-01-13</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div>  <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div>  <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>  </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//17golang.com/article/307066.html"/> <input type="hidden" name="__token__" value="a0ead5587f27b400bcbc8ab310fc3496" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//17golang.com/article/307066.html"/> <input type="hidden" name="__token__" value="a0ead5587f27b400bcbc8ab310fc3496" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> </body> </html>