用户离开输入框时校验有效性并应用样式，能否仅用CSS伪类实现？

可以完全不使用JavaScript实现该需求，以下是两种纯CSS实现方案：

方案1：使用:user-invalid伪类（推荐） #

该伪类是CSS原生专门用于匹配用户已交互过且校验不通过的表单元素，完全符合你的需求：只有用户点击、输入或失焦过的输入框不满足校验规则时才会触发样式，未触碰的输入框不会显示错误样式。
无需修改原有HTML，仅需修改CSS代码如下：

input:user-invalid {
  background-color: red;
}
/* 如需兼容更低版本火狐，可补充前缀样式 */
input:-moz-ui-invalid {
  background-color: red;
}

兼容性说明：Chrome 88+、Firefox 88+、Safari 15.4+均原生支持该伪类，覆盖绝大多数现代端用户。

方案2：使用:placeholder-shown伪类（兼容性更好） #

如果需要兼容更低版本浏览器，可以通过占位符的显示状态判断用户是否操作过输入框，实现步骤如下：

1. 给需要校验的input元素添加placeholder属性（如果原有输入框已有占位符可直接复用，无需额外修改）：

<input type="text" name="name" id="name" required minlength="3" placeholder="请输入姓名" />

2. 编写CSS，仅当占位符隐藏（即用户已经输入/修改过内容）且校验不通过时显示错误样式：

/* 可选添加:not(:focus)，实现仅输入框失焦后才显示错误样式 */
input:not(:placeholder-shown):invalid {
  background-color: red;
}

兼容性说明：Chrome 57+、Firefox 51+、Safari 10.1+均支持该特性，兼容范围更广。

内容的提问来源于stack exchange，提问作者user17079768