我不确定您是否可以直接使用JS编辑伪元素CSS规则，而不使用insertrule/addrule触摸样式表，但我可能会在Blur上切换类名。

演示

/* css */
input:invalid {
   box-shadow: none;
}
input.blurred:invalid {
   box-shadow: 0 0 5px 1px red;
}

// js
const inputs = document.querySelectorAll('input')

for(let input of inputs){
    input.addEventListener('focus', ()=>{
        input.classList.remove('blurred')
    })
    input.addEventListener('blur', ()=>{
        input.classList.add('blurred')
    })
}

您应该先听输入的焦点事件，然后再听模糊事件。在模糊事件之后，您应该将“touch”这样的类应用于输入，您必须将其用作CSS中的选择器。

null

var inputs = document.getElementsByTagName("input");

function blurred(event) {
    event.target.classList.add("touched");
  event.target.removeEventListener("blur", blurred);
}

function focused(event) {
  event.target.removeEventListener("focus", focused);
  event.target.addEventListener("blur", blurred);
}

function registerTouch(input) {
    input.addEventListener("focus", focused);
}

for (const input of inputs) {
    registerTouch(input);
}

input.touched:invalid
{
  box-shadow: 0 0 5px 1px red;
}

<form id="registration-form">
  <input type="text" id="name" required>
  <button type="submit">Submit</button>
</form>