提问人：George Katsanos 提问时间：9/7/2023 最后编辑：George Katsanos 更新时间：9/7/2023 访问量：71
惰性计算：invalid 选择器
Lazy Evaluation of the :invalid selector
问：
通常，会立即评估 ：invalid 选择器：该元素将立即使用 ：invalid 设置样式，例如，如果页面加载后立即需要值：
input:invalid {
border: 10px solid red;
}<form>
<p> Go red only after I focused and blurred away </p>
<input required placeholder="you must type something" />
</form>是否有解决方法，以便仅在用户与表单交互后进行评估？（通常，在第一次对焦/模糊之后）。 我知道这是标准的浏览器实现行为，因此我们可能正在这里寻找解决方法。
最小的 JS 是可以的，尽管我不想做 JS 验证。
答：
1赞
LS_
9/7/2023
#1
一个可能的解决方案是组合多个伪类来实现结果，如此处所述。
下面是一个示例（改编自此 Codepen），仅当值无效（在本例中长度小于 3 个字符）时才显示红色边框。
:root {
--color-invalid: red;
--color-valid: green;
}
.error-message {
display: none;
}
/* Used for the demo to show that the input changes status (eg. passing from an invalid to a valid email address) */
input {
outline: none;
}
/* Invalid state */
input:not(:placeholder-shown):invalid {
border-color: var(--color-invalid);
}
/* Valid state */
input:not(:placeholder-shown):valid {
border-color: var(--color-valid);
}<form>
<input name="name" type="text" minlength="3" maxlength="20" required placeholder="test min/max length input" />
</form>评论
0赞
George Katsanos
9/7/2023
很酷！但是，如果您唯一的要求是在输入中填写任意数量的字符，则错误样式将永远不会出现，对吗？（还是我错过了什么？
0赞
George Katsanos
9/7/2023
当条件是特定的（例如，存在最小值/最大值）时，这也可能有效，但对于唯一要求只是“键入某些内容”的基本场景，这也可能有效。
0赞
LS_
9/7/2023
@GeorgeKatsanos 我已经更新了该示例，该示例现在使用文本类型的输入，一旦用户开始键入，错误就会出现，并在输入 3 个或更多字符后更改为有效状态。这是预期的行为吗？minlength
0赞
George Katsanos
9/7/2023
不可以，接受任意数量的字符。我认为这种解决方法适用于电子邮件或需要更具体规则的情况。
0赞
LS_
9/7/2023
@GeorgeKatsanos 好的，知道了！对不起，我不明白这个要求。在这种情况下，这不能作为解决方案。
0赞
Lajos Arpad
9/7/2023
#2
肯定。与其过早地设置属性，不如用某些东西（在本例中为 a）标记项目，并对要触发添加属性的事件进行编程（在本例中）：requiredrequiredclassrequiredblur
function myBlur() {
this.setAttribute("required", null);
}
function myFocus() {
this.removeAttribute("required");
}
for (let item of document.getElementsByClassName("required")) {
item.addEventListener("blur", myBlur);
item.addEventListener("focus", myFocus);
}input:invalid {
border: 10px solid red;
}<form>
<input class="required" placeholder="you must type something" />
</form>在上面的示例中，我将属性添加 on 并删除它 ，因此，如果用户在聚焦项目时删除内容，它不会对用户大喊大叫，但每当项目失去焦点而没有值时，它就会抱怨。requiredblurfocus
评论
0赞
epascarello
9/7/2023
当他们点击提交按钮时，他们从不与元素互动？
0赞
Lajos Arpad
9/8/2023
@epascarello在按钮验证结束时，还可以添加必需的属性。为了简洁起见，我在这里专注于最小值，但我们当然可以添加更多的处理程序和逻辑，具体取决于网站上的逻辑。在验证器内部，可以调用具有 inside 的类的项目来提交。setAttributerequiredform
评论