如何检测所有密码验证列表项是否都拥有valid类名

你的代码核心问题在于判断所有验证项是否通过的逻辑错误：document.querySelectorAll(".liList")返回的是一个NodeList（DOM元素集合），而非单个DOM元素，因此无法直接调用classList.contains()方法，导致隐藏列表的逻辑始终不生效。

快速修复方案 #

直接修改checkPassword函数中的验证判断部分，替换为遍历集合检查每个元素的类名：

const checkPassword = () => {
    // ... 原有验证逻辑保持不变 ...
  
    // 修复：检查所有li是否都拥有valid类
    const liList = document.querySelectorAll(".liList");
    const allValid = Array.from(liList).every(li => li.classList.contains("valid"));
    
    if (allValid) {
      console.log("所有验证条件已满足");
      setShowValidation(false);
    } else {
      setShowValidation(true);
    }
};

修复说明 #

• Array.from(liList)：将NodeList转换为可遍历的数组
• every()方法：检查数组中所有元素是否都满足li.classList.contains("valid")，只有全部满足时才返回true

更符合React最佳实践的优化方案 #

由于这是React组件，直接操作DOM（getElementById、classList）并非最优写法，建议用状态管理验证条件，避免DOM操作：

import { useState } from 'react';

const PasswordRegister = () => {
  const [showValidation, setShowValidation] = useState(false);
  const [password, setPassword] = useState('');
  // 用状态跟踪每个验证项的结果
  const [validationStatus, setValidationStatus] = useState({
    lower: false,
    upper: false,
    number: false,
    special: false,
    length: false
  });

  const validatePassword = () => {
    const value = password;
    const status = {
      lower: /(?=.*[a-z])/.test(value),
      upper: /(?=.*[A-Z])/.test(value),
      number: /(?=.*[0-9])/.test(value),
      special: /(?=.*[!@#$%^&*])/.test(value),
      length: /.{8,}/.test(value)
    };
    setValidationStatus(status);
    
    // 判断所有条件是否满足
    const allValid = Object.values(status).every(valid => valid);
    setShowValidation(!allValid);
  };

  return (
    <>
      <input
        type="password"
        id="pswrd"
        value={password}
        onChange={(e) => {
          setPassword(e.target.value);
          validatePassword();
        }}
        onFocus={() => setShowValidation(true)}
      />
      {showValidation && (
        <div className="validation active">
          <ul>
            <li className={`liList ${validationStatus.lower ? 'valid' : ''}`}>
              至少包含一个小写字母
            </li>
            <li className={`liList ${validationStatus.upper ? 'valid' : ''}`}>
              至少包含一个大写字母
            </li>
            <li className={`liList ${validationStatus.number ? 'valid' : ''}`}>
              至少包含一个数字
            </li>
            <li className={`liList ${validationStatus.special ? 'valid' : ''}`}>
              至少包含一个特殊字符(!@#$%^&*)
            </li>
            <li className={`liList ${validationStatus.length ? 'valid' : ''}`}>
              长度至少8位
            </li>
          </ul>
        </div>
      )}
    </>
  );
};

export default PasswordRegister;

优化说明 #

• 用React状态validationStatus跟踪每个验证项的结果，避免直接操作DOM
• 通过Object.values(status).every()快速判断所有条件是否满足
• 利用条件渲染{showValidation && ...}控制验证列表的显示/隐藏，更符合React的数据流逻辑

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