基础 CSS 遵守被忽略的输入

在实际的开发中，我们常常需要让用户输入一些信息，在处理这些信息之前，我们需要对其进行验证。然而在浏览器中，用户可以通过各种方式绕过输入限制，因此我们的验证方法必须健壮性。

CSS 可以帮助我们增强输入限制的健壮性，许多开发者并不了解的是，CSS 还可以利用“被忽略的输入”来完善这个功能。

什么是“被忽略的输入”？

“被忽略的输入”是指浏览器默认忽略掉的某些输入类型，例如在 input 标签中使用 type="email"，虽然会在浏览器中显示出 email 输入框，但是并不会对输入的数据进行验证。同样的，虽然在浏览器中使用 input 标签的 type="number"，但是用户可以输入任意字符串。

如何使用“被忽略的输入”？

在 CSS 中我们可以使用 :valid 和 :invalid 伪类，这两个伪类可以对表单状态进行显示样式的修改。

在上述介绍了 type="email" 输入框的例子中，我们可以这样使用 CSS：

input[type="email"]:valid {
  border-color: green;
}
input[type="email"]:invalid {
  border-color: red;
}

这样当用户输入了一个合法的 email 地址时，输入框的边框颜色会变成绿色；当输入的 email 地址不合法时，输入框的边框颜色会变成红色。

同样的道理，我们可以增强 type="number" 输入框的验证：

input[type="number"]:valid {
  color: black;
}
input[type="number"]:invalid {
  color: red;
}

这样当用户输入一个合法的数字时，输入框内的数字颜色为黑色；当输入的数字不合法时，输入框内的数字颜色为红色。

总结

使用“被忽略的输入”可以在一定程度上增强表单验证的健壮性，可以有效减少一些不必要的 HTML 或 JavaScript 代码。同时我们也发现：为了让我们的 CSS 生效，我们需要使用这些伪类时要结合正确的 HTML 代码，在实际使用中要注意判断浏览器的兼容性。