본문 바로가기

프론트지식

비밀번호 정규표현식 분리하기 (영문대소문자/숫자특수문자/길이)

3개의 유효성검사를 각각 실시하는 화면구성

 

회사에서 회원가입 페이지를 개편하면서

기존에 한번에 처리하던 비밀번호 유효성 검사를 3개로 분리하게 되었다.

 

비밀번호 input에 onchange 이벤트 리스너를 걸어서

한 글자 입력할 때마다 유효성 검사 3개를 실시하여 -> 그 결과에 따라 input 아래 3개 문구의 색상을 수정한다.

 

1. 영문대소문자 포함여부 확인하는 정규표현식

function passwordEngCheck (password) {
  let reg = /(?=.*?[a-z])(?=.*?[A-Z])/;
  return reg.test(password));
}

 

2. 숫자 특수문자 포함여부 확인하는 정규표현식

function passwordNumSpcCheck (password) {
  let reg = /(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
  return reg.test(password));
}

 

3. 길이 체크하는 정규표현식

function passwordLengthCheck (password) {
  let reg = /^.{8,16}$/;
  return reg.test(password));
}