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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML中可以通过CSS的:valid和:invalid伪类来设置表单字段在验证状态下的样式。这两个伪类用于根据表单输入是否符合定义的验证规则来改变元素的外观。1. :valid 伪类当表单字段的内容符合指定的验证条件时，会触发:valid样式。例如，如果一个 <input type="email"> 字段输入了有效的电子邮件地址，就会应用:valid样式。2. :invalid 伪类当表单字段的内容不符合验证条件时，会触发:invalid样式。例如，如果一个 <input type="email"> 字段输入了无效的电子邮件地址，就会应用:invalid样式。示例代码：

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

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

解决方案

要为HTML表单元素设置有效和无效样式，核心在于利用CSS选择器结合:valid和:invalid伪类。这通常应用于<input>, <textarea>, 和 <select> 等表单控件。

举个例子，假设你有一个电子邮件输入框，并且希望在用户输入有效邮箱时边框变绿，无效时变红：

<form>
  <label for="email">邮箱:</label>
  &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required&gt;

  <label for="password">密码:</label>
  &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; minlength=&quot;6&quot;&gt;
</form>

然后，在你的CSS中，你可以这样定义样式：

/* 所有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; /* 针对密码有效时显示浅绿色背景 */
}

通过这样的设置，当用户在邮箱输入框中输入一个非邮箱格式的字符串时，边框会自动变为红色；输入有效邮箱后，则变为绿色。密码输入框也是类似，当长度小于6位时显示无效样式，达到6位或以上时显示有效样式。这感觉很棒，省去了很多手动判断和添加/移除类的麻烦。

何时应该使用:valid和:invalid伪类？

我个人觉得，:valid和:invalid伪类在提供即时用户反馈方面简直是神器。它们最适合用于那些依赖HTML5内置验证属性（如required, type="email", type="url", pattern, min, max, minlength, maxlength等）的表单元素。

使用场景：

• 即时视觉反馈： 这是最核心的价值。用户在输入过程中就能看到自己的输入是否符合要求，不需要等到提交表单才发现错误。比如，一个邮箱输入框，当用户输入“abc”时立即变红，输入“abc@example.com”时变绿，这用户体验直接就上去了。
• 简化客户端验证逻辑： 对于简单的、基于HTML属性的验证，你可以完全依赖CSS来处理视觉反馈，而无需编写JavaScript代码来监听输入事件并手动添加/移除类。这让代码更简洁，也减少了潜在的bug。
• 提升用户体验： 明确的视觉提示能减少用户的困惑和挫败感。用户可以快速修正错误，而不是提交后才看到一个通用的“表单有误”提示。
• 渐进增强： 即使JavaScript被禁用，这些基本的验证和视觉反馈依然能工作，因为它们是浏览器原生支持的。

一些思考： 说实话，我有时候会遇到一个小纠结，就是required字段在页面加载时，如果为空，它会立即被标记为:invalid。这可能导致一些用户觉得页面一上来就有“错误”。解决这个，你可以结合:not(:placeholder-shown)或者更复杂的CSS选择器，或者干脆接受这种行为，毕竟它确实是“无效”的。我通常倾向于让required字段一开始就显示无效状态，这反而能提醒用户这个字段是必填的。不过，对于那些不是required但有pattern限制的字段，我可能就不会让它在空的时候就显示无效，因为用户还没开始输入呢。

如何结合JavaScript进行更复杂的表单验证？

虽然:valid和:invalid伪类对于基于HTML5属性的验证非常强大，但它们也有局限性。很多时候，我们的表单验证逻辑远比“是不是邮箱”或“是不是数字”要复杂。例如，密码强度检查（必须包含大小写字母、数字和特殊字符）、确认密码是否与密码一致、用户名是否已被注册（需要后端请求）、或者某个字段的值依赖于另一个字段。

在这种情况下，JavaScript就成了不可或缺的工具。

JavaScript的角色：

• 自定义验证规则： 这是JS最擅长的。你可以编写任何复杂的逻辑来验证用户输入。
• 异步验证： 例如，检查用户名是否已存在，这需要向服务器发送请求，CSS无法做到。
• 跨字段验证： 比如“确认密码”字段必须和“密码”字段的值相同。
• 动态错误消息： JS可以根据具体的错误类型，显示更详细、更友好的错误提示信息，而不仅仅是改变边框颜色。

结合方式：

1. 使用setCustomValidity()： 这是HTML5表单验证API的一部分。当你的JavaScript验证失败时，你可以通过inputElement.setCustomValidity('你的错误消息')来将该元素标记为无效，并设置一个自定义的错误消息。当元素被标记为无效时，:invalid伪类就会被触发。如果验证通过，记得调用inputElement.setCustomValidity('')来清除错误，让元素恢复:valid状态。

   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);

   这样，即使密码不匹配，:invalid样式也会生效，同时浏览器会显示你设置的自定义错误消息。

2. 手动添加/移除CSS类： 对于那些不适合使用setCustomValidity()的场景（或者你更喜欢完全控制），你可以在JavaScript中根据验证结果，手动为元素添加或移除.is-valid或.is-invalid这样的CSS类。

   /* 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));
   }

   这种方式给予你最大的灵活性，但代码量会比纯CSS或setCustomValidity多一些。我通常会倾向于先用HTML5和:valid/:invalid解决能解决的，剩下的再交给JS。

除了:valid和:invalid，还有哪些与表单状态相关的CSS伪类？

除了:valid和:invalid，CSS还提供了许多其他有用的伪类，它们可以帮助我们根据表单元素的不同状态来应用样式，从而创建更细致、更响应式的用户界面。了解并善用它们，能让你的表单看起来更专业，用户交互也更顺畅。

• :required 和 :optional：

  • :required：匹配带有required属性的表单元素。这对于视觉上区分必填字段非常有用，比如给它们添加一个星号或者不同的背景色。
  • :optional：匹配不带required属性的表单元素。这可以用来强调哪些字段是可选的。
  • 用途： 我经常用:required给必填项加个醒目的边框或背景，这样用户一眼就知道哪些是必须填的。

• :focus：

  • 当元素获得焦点时匹配。这是最常用的伪类之一，用于在用户与输入框交互时提供视觉反馈，比如改变边框颜色、添加阴影或放大字体。
  • 用途： 几乎所有可交互的表单元素都应该有:focus样式，这是一种基本的无障碍性要求，也能显著提升用户体验。

• :disabled：

  • 匹配被禁用（带有disabled属性）的表单元素。这些元素通常是不可编辑或不可点击的。
  • 用途： 禁用状态的元素通常会变灰，以明确告诉用户它们当前无法操作。

• :read-only：

  • 匹配只读（带有readonly属性）的表单元素。这些元素可以被用户查看，但不能被修改。
  • 用途： 和:disabled类似，但通常会比禁用状态的元素看起来更“可读”，因为它们的值可能仍然重要。

• :placeholder-shown：

  • 当输入框显示其placeholder文本时匹配。
  • 用途： 可以在用户开始输入之前，对占位符文本或输入框本身进行特殊样式处理。比如，我有时会用它来隐藏或改变label的位置，实现一些Material Design风格的输入框效果。

• :checked：

  • 匹配被选中（如radio按钮或checkbox）的元素。
  • 用途： 用于自定义单选框和复选框的样式，因为它们的默认样式往往不那么美观，而且跨浏览器一致性差。

• :in-range 和 :out-of-range：

  • 适用于有min和max属性的数值或日期输入框。
  • :in-range：当值在指定范围内时匹配。
  • :out-of-range：当值超出指定范围时匹配。
  • 用途： 和:valid/:invalid`类似，但更专注于数值范围的验证反馈。

这些伪类共同构成了一个强大的CSS工具集，让我们能够以纯CSS的方式，对表单元素的各种状态进行精细化控制。我个人觉得，掌握这些伪类是构建高质量Web表单的基础。它们让前端开发者的生活变得简单，也让最终用户在填写表单时感觉更顺畅、更直观。

终于介绍完啦！小伙伴们，这篇关于《表单验证技巧：valid与invalid样式应用》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！