비밀번호 대문자, 숫자, 특수문자 중 두 가지 이상 조합

다음은 비밀번호 변경 시 대문자, 숫자, 특수문자 중 적어도 두 가지 이상의 조합을 체크하는 React 코드입니다. 이 코드는 비밀번호 입력 필드에 입력된 값이 변경될 때마다, 대문자, 숫자, 특수문자 중 몇 가지가 포함되어 있는지 체크하여 조건에 따라 오류 메시지를 노출합니다.

import React, { useState } from "react";

function PasswordChecker() {
  const [password, setPassword] = useState("");
  const [valid, setValid] = useState(false);

  function handleChange(event) {
    setPassword(event.target.value);
    
    // 비밀번호에 대문자, 숫자, 특수문자 중 2개 이상의 조합이 있는지 검사하고,
    // 동시에 비밀번호의 최소 길이가 8자리 이상인지도 검사합니다.
    const regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/;
    setValid(regex.test(event.target.value));
  }

  return (
    <div>
      <label>
        Password:
        <input type="password" value={password} onChange={handleChange} />
      </label>
      {password && !valid && (
        <p style={{ color: "red" }}>
          Password must contain at least 2 of the following: uppercase
          letters, digits, or special characters, and must be at least 8
          characters long.
        </p>
      )}
    </div>
  );
}

export default PasswordChecker;

위 코드에서는 사용되는 정규식 regex이 변경됩니다. 정규식은 비밀번호가 대문자, 소문자, 숫자, 특수문자 중 2개 이상의 조합을 가지고 동시에 최소 8자리 이상인지 검사합니다. 정규식은 (?=.*[A-Za-z]), (?=.*\d), (?=.*[!@#$%^&*])으로 각각 영문 대/소문자, 숫자, 특수문자 중 하나 이상을 갖고 있는지 검사합니다. 이후 [A-Za-z\d!@#$%^&*]{8,}는 해당 문자들 중 8자리 이상의 문자열을 검사하는 부분입니다.