如何在使用react时为密码输入添加更多验证

import React, { useState } from 'react';

const PasswordInput = () => {
  const [password, setPassword] = useState('');
  const [isValid, setIsValid] = useState(true);

  const handlePasswordChange = (event) => {
    const newPassword = event.target.value;
    setPassword(newPassword);
    setIsValid(validatePassword(newPassword));
  };

  const validatePassword = (password) => {
    // 使用正则表达式验证密码复杂性
    const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
    return regex.test(password);
  };

  return (
    <div>
      <input
        type="password"
        value={password}
        onChange={handlePasswordChange}
      />
      {!isValid && <p>密码必须包含至少一个大写字母、一个小写字母、一个数字和一个特殊字符。</p>}
    </div>
  );
};

export default PasswordInput;