비밀번호 유효성 테스트 로직 짜기 / 영문포함 / 숫자포함 / 특수문자 / 길이제한

이번에 hook을 하나 생성해서 비밀번호 테스트를 쉽게 해볼까 한다

내가 정한 비밀번호는 유효성은 이렇게 정했다.

 

 

• 영문포함
• 숫자포함
• 특수문자포함
• 길이 8자 이상 30자 이하

 

각각의 디자인이 정해져있고, 하나씩 통과할때마다 해당 디자인에 색상이 변경된다. (체크모양이 바뀐다던지?)

이전에는 좀 더 복잡한 방식으로 작성했었는데, 하다보니 편한로직을 짜게되서 적어놓으려고 한다.

(더 편한 코드가 잇다면 공유해주세요!)

 

src/utils/passwordCheck

export function passwordCheck(value: string) {
  let obj = {
    eng: false,
    number: false,
    special: false,
    length: false,
  };

  const engCk = value.match(/(?=.?[a-z])/);
  const numberCk = value.match(/[0-9]/);
  const starCk = value.match(/(?=.?[#?!@$ %^&*-])/);
  const lengthCk = value.match(/^.{8,30}$/);

  if (engCk !== null) {
    obj.eng = true;
  }
  if (numberCk !== null) {
    obj.number = true;
  }
  if (starCk !== null) {
    obj.special = true;
  }
  if (lengthCk !== null) {
    obj.length = true;
  }

  return obj;
}

 

 

style

line_input 기준으로 해당 클래스는 컬러를 지정해줬다.

/* validataion */
.line_input .err * {
  color: var(--err);
}
.line_input .success * {
  color: var(--success);
}

 

 

registerPass.tsx

object 에 key 값을 활용해 해당 meg 의 상태값에 따라서 유효성을 체크해줬다.

해당코드에는 적혀있지 않지만 에러가 난 경우 class 에 err 클래스를 넣어주면 효율적으로 유효성테스트 결과값을 화면상에서 체크할 수 있다. (해당 코드는 특정 라이브러리 기준으로 작성한 거기 때문에 로직 참고용으로만 봐주세요)

import { passwordCheck } from "@/utils/register/validation";
import React, { useState } from "react";

export default function ValidationPass() {
  const [obj, setObj] = useState({
    eng: false,
    number: false,
    special: false,
    length: false,
  });
  function validationCk(value: string) {
    const meg = passwordCheck(value);
    setObj(meg);
  }
  return (
  // line_input 
    <Box className="line_input">
      <div>
        <input
          type="text"
          placeholder="비밀번호"
          onChange={(e) => {
            validationCk(e.currentTarget.value);
          }}
        />
        <Flex gap={4} className="validation_wrap">
          <Flex className={obj.length ? "success" : ""}>
            <IconCheck />
            <Text>8자리 이상</Text>
          </Flex>
          <Flex className={obj.eng ? "success" : ""}>
            <IconCheck />
            <Text>영문자</Text>
          </Flex>
          <Flex className={obj.number ? "success" : ""}>
            <IconCheck />
            <Text>숫자</Text>
          </Flex>
          <Flex className={obj.special ? "success" : ""}>
            <IconCheck />
            <Text>특수문자</Text>
          </Flex>
        </Flex>
      </div>
    </Box>
  );
}