如何用自定义类替代伪类实现Vanilla JS表单验证并优化实时反馈

问题背景 #

我想用原生JS配合CSS精准控制表单验证状态的展示时机，因此选择给表单元素添加自定义类，而非使用input:invalid/input:valid伪类设置样式。目前除了类的赋值存在bug，setCustomValidity和reportValidity功能都能正常运行。我需要实现对错误输入的实时响应，不能用change事件，同时要避免用户刚输入1个字符就将输入框标红——原代码添加超时后有问题，去掉超时后功能正常但不符合需求。

原代码如下：

const firstName = document.querySelector("#first-name");
firstName.addEventListener("input", (e) => {
    firstName.setCustomValidity("");
    var val = firstName.validity.valid;
    firstName.classList.remove("valid");
    firstName.classList.remove("invalid");
    if (val == false) {
        if (firstName.validity.tooShort) {
            firstName.setCustomValidity("First name must be 2 letters or longer.");
            setTimeout(() => {
                firstName.reportValidity();
                firstName.classList.add("invalid"); }, 900); }
        else if (firstName.validity.patternMismatch) {
            firstName.setCustomValidity("First name can only contain letters");
            setTimeout(() => {
                firstName.reportValidity();
                firstName.classList.add("invalid"); }, 900); } }
    else if (val==true) {
        firstName.classList.add("valid");
        firstName.setCustomValidity(""); } })

解决方案 #

核心思路是区分用户首次输入的临时状态与确认输入的错误状态，同时优化类的赋值逻辑：

1. 添加输入状态标记 #

给输入框新增has-input类，标记用户已开始输入。仅当用户输入过内容后，才触发验证样式：

// 在input事件中先判断输入内容，添加/移除输入标记
if (firstName.value.trim() !== '') {
  firstName.classList.add('has-input');
} else {
  firstName.classList.remove('has-input', 'valid', 'invalid');
  firstName.setCustomValidity('');
  return;
}

2. 用防抖优化验证时机 #

通过防抖函数延迟验证触发，避免用户输入过程中频繁触发错误提示；同时绑定blur事件，确保用户离开输入框时必做验证：

// 防抖函数：用户停止输入后延迟执行验证
function debounce(func, delay = 500) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 封装验证逻辑
const validateFirstName = debounce(() => {
  firstName.setCustomValidity('');
  const isValid = firstName.validity.valid;

  firstName.classList.remove('valid', 'invalid');
  if (!isValid) {
    // 根据错误类型设置提示文本
    if (firstName.validity.tooShort) {
      firstName.setCustomValidity('First name must be 2 letters or longer.');
    } else if (firstName.validity.patternMismatch) {
      firstName.setCustomValidity('First name can only contain letters');
    }
    firstName.reportValidity();
    firstName.classList.add('invalid');
  } else {
    firstName.classList.add('valid');
  }
});

// 绑定事件
firstName.addEventListener('input', (e) => {
  if (firstName.value.trim() === '') {
    firstName.classList.remove('has-input', 'valid', 'invalid');
    firstName.setCustomValidity('');
    return;
  }
  firstName.classList.add('has-input');
  validateFirstName();
});

firstName.addEventListener('blur', validateFirstName);

3. CSS配合控制样式生效时机 #

仅当输入框带有has-input标记，同时拥有valid/invalid类时，才展示对应样式：

/* 示例样式，可根据需求调整 */
input.has-input.valid {
  border-color: #2ecc71;
}
input.has-input.invalid {
  border-color: #e74c3c;
}

逻辑说明 #

• 空输入时清除所有状态类，避免初始状态或清空输入后错误样式残留
• 防抖函数让验证在用户停止输入500ms后触发，既保证实时响应，又不会在用户刚输入1个字符时立刻标红
• 失去焦点时强制验证，确保用户离开输入框时必检查状态
• 类的赋值统一在防抖函数中处理，避免异步超时导致的类操作冲突

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