팀 과제가 시작되고 팀원들끼리 회의 후 파트를 나눴다.
그 중 내가 맡은 부분은 비밀번호(조건이 걸려있는), 문자열이 조건에 넘어갈 시 (...)으로 변경, 리뷰 작성 시 글자 수 제한 기능 구현을 담당하였고 오늘은 조건이 걸려있는 비밀번호를 어떻게 작성하는지 적어보려고 한다!
간단하게 HTML 코드를 작성해보고 확인해보면
<p>새로운 비밀번호를 입력하세요.</p>
<input
type="password"
maxlength="4"
id="newPassword"
placeholder="새로운 비밀번호 입력"
/>
<br /><br />
<fomr>
<input
type="password"
maxlength="4"
id="confirmPassword"
placeholder="비밀번호 확인"
/>
<br /><br />
<button onclick="validatePassword()">확인</button>
<div id="result"></div>
</fomr>
간단하게 적은 코드가 잘 나오고 있는걸 확인할 수 있다..!
여기서 내가 하고 싶은 조건은
1. 비밀번호를 입력하는 부분이니 비밀번호 입력시 내용 안보이기
2. 비밀번호 입력 시 필수로 들어가야하는 텍스트
3. 비밀번호 입력칸에는 4글자만 들어가게 만들기
가 되겠다!!!
일단 비밀번호 입력시 안보이게 하려면 input 요소의 입력 타입을 password로 설정해주면 된다.
👍👍👍👍👍
두번째 조건은 비밀번호 입력시 필수로 들어가야 하는 내용인데, 난 비밀번호에 특수문자, 대문자,소문자, 숫자1개 이상은 무조건 써야지 비밀번호 입력이 가능하게 만들었다.
여기서 Regex 함수를 사용하였는데, 정규 표현식이라고도 하는거같다(?)
일단 코드를 확인해보면 이런식으로 작성할 수 있는데,
const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$/;코드를 하나 하나 간단히 알아보자면
^ : 문자열의 시작을 나타낸다.
(?=.\d) : 문자열에 숫자가 적어도 1개 이상 포함되어야 함을 나타낸다.
(?=.[a-zA-Z]) : 문자열에 영문자가 적어도 1개 이상 포함되어야 함을 나타낸다.
(?=.[\W_]) : 문자열에 특수문자가 적어도 1개 이상 포함되어야 함을 나타낸다.
[a-zA-Z0-9\W_]{8,15} : 영문, 숫자, 특수문자 조합으로 이루어진 8~15자의 문자열을 나타낸다.
$ : 문자열의 끝을 나타낸다.
[!@#$%^+=-] 이 부분이 특수문자까지 허용
따라서, 해당 정규식은 영문, 숫자, 특수문자 조합으로 이루어진 8~15자의 문자열에 대해 검증을 수행.
추가로 이메일 같은 경우 아래 코드로 짤 수 있다.
let reg = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i여기에 maxlength 코드를 사용하여 문자수를 제한해주면 된다!
특수문자, 대문자, 소문자, 숫자1개를 사용하여 비밀번호 입력 후
미리 만들어둔 자바스크립트를 같이 활용해보면 기능이 잘 작동되는걸 확인할 수 있다!
만약 최소 조건이 1개라도 충족이 못한다면,
요렇게 나오라고 JS를 만지작 만지작했다.
