React注册页密码验证提示显示异常问题求助

问题根源 #

当前代码的显示逻辑未结合焦点状态控制图标和提示的显示/隐藏，导致失焦或验证通过后元素仍持续展示。

修改方案 #

调整图标和提示信息的className判断逻辑，严格结合焦点状态与验证结果控制显示：

const PWD_REGEX = /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%]).{8,24}$/;

const SignUp = () => {
  const [password, setPassword] = useState('');
  const [validPassword, setValidPassword] = useState(false);
  const [passwordFocus, setPasswordFocus] = useState(false); // 统一小驼峰命名规范

  const [matchPassword, setMatchPassword] = useState('');
  const [validMatch, setValidMatch] = useState(false);
  const [matchFocus, setMatchFocus] = useState(false);

  useEffect(() => {
    const result = PWD_REGEX.test(password);
    setValidPassword(result);
    const match = password === matchPassword;
    setValidMatch(match);
  }, [password, matchPassword]);

  // 补充缺失的提交处理函数
  const handleSubmit = (e) => {
    e.preventDefault();
    // 此处添加表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit}>            
      <label htmlFor='password'>密码:
        {/* 对勾：仅聚焦且密码有效时显示 */}
        <span className={(passwordFocus && validPassword) ? 'valid' : 'hide'}>
          <FontAwesomeIcon icon={faCheck}/>
        </span>
        {/* 叉号：仅聚焦、密码无效且有输入时显示 */}
        <span className={(passwordFocus && !validPassword && password) ? 'invalid' : 'hide'}>
          <FontAwesomeIcon icon={faTimes}/>
        </span>
      </label>
      <input            
        placeholder='请输入密码'
        id='password'
        type='password'
        onChange={(e) => setPassword(e.target.value)}
        required
        aria-invalid={!validPassword} // 改用布尔值更符合无障碍标准
        aria-describedby='pwdnote'
        onFocus={() => setPasswordFocus(true)}
        onBlur={() => setPasswordFocus(false)}
      />
      {/* 提示信息：仅聚焦且密码无效时显示 */}
      <p id='pwdnote' className={(passwordFocus && !validPassword) ? 'instructions' : 'offscreen'}>
        <FontAwesomeIcon icon={faInfoCircle}/>
        8-24个字符<br />
        必须包含大小写字母、数字和特殊字符<br />
        允许的特殊字符：!@#$%
      </p>
    </form>
  );
};

关键修改点 #

1. 图标显示逻辑：
   • 对勾：仅在字段聚焦且密码验证通过时展示，失焦后自动隐藏
   • 叉号：仅在字段聚焦、密码验证不通过且已有输入时展示，失焦或验证通过后隐藏
2. 命名规范：将PasswordFocus改为passwordFocus，符合React小驼峰命名习惯
3. ARIA属性优化：aria-invalid直接使用布尔值!validPassword，更符合无障碍标准
4. 补充缺失函数：添加handleSubmit避免表单提交报错

CSS注意事项 #

确保以下类名样式正确：

/* 显示状态样式 */
.valid { color: #2ecc71; }
.invalid { color: #e74c3c; }
.instructions { color: #e74c3c; font-size: 0.9em; }
/* 隐藏状态：彻底移出视口，不占据布局空间 */
.offscreen {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.hide { display: none; }

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