在reactjs中不使用regex进行密码检查

import React, { useState } from 'react';

function PasswordChecker() {
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const checkPassword = (pwd) => {
    const minLength = 8;
    const hasUpperCase = /[A-Z]/.test(pwd);
    const hasLowerCase = /[a-z]/.test(pwd);
    const hasNumber = /\d/.test(pwd);
    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(pwd);

    if (pwd.length < minLength) {
      return 'Password must be at least 8 characters long.';
    }
    if (!hasUpperCase) {
      return 'Password must contain at least one uppercase letter.';
    }
    if (!hasLowerCase) {
      return 'Password must contain at least one lowercase letter.';
    }
    if (!hasNumber) {
      return 'Password must contain at least one number.';
    }
    if (!hasSpecialChar) {
      return 'Password must contain at least one special character.';
    }
    return '';
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errorMessage = checkPassword(password);
    if (errorMessage) {
      setError(errorMessage);
    } else {
      setError('');
      alert('Password is valid!');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Password:
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </label>
      <button type="submit">Check</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </form>
  );
}

export default PasswordChecker;