유효성 검사 (Form validation)
요구 사항
- 특정 값은 반드시 입력해야 한다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등)
- 아이디는 영어 또는 숫자만 가능하며 숫자가 첫 글자로 올 수 없다.
- 비밀번호는
n자릿수 이상이어야 하고, 숫자나 특수문자(@$!%*#?&)를 반드시 포함해야 한다. - 비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 한다.
- 이메일은
example**@**example.com형식을 갖추어야 한다. - 전화번호는
000-0000-0000형식을 갖추어야 한다.
코드스테이츠에서 제공된 베이스 파일로 Bare Minimum Test는 완료!
Advanced
- 화면 디자인에 맞춰 아래 조건 통과시 스타일 효과를 적용한다.
- 각 항목마다 하나의 메시지 div로 성공, 실패 메시지를 출력한다.
- elements를 가져와서 반복문으로 eventHandler함수를 할당한다.
- 정규식 유효성 검사 항목을 쪼개어 오류 메시지를 나눠서 출력한다.
- 결과 항목을 확인하고 회원가입 버튼을 비활성화(disabled)/활성화 시킨다.
- 이메일 항목과 전화번호 항목을 추가해 본다.
- 관심사 분리를 적용한다.
조건 통과시 스타일 효과
- 모든
input항목을 통과하면, 회원가입 버튼을 활성화한다. - 모든
input항목을 통과하면, 토끼의 표정을 바꿔준다. - 모든
input항목을 통과하면, 토끼는↕️방향으로 고개를 흔든다. - 통과하지 않으면(초기값), 토끼는
↔방향으로 고개를 흔든다.
querySelectAll()로 가젼온 element 배열 반복문
let inputElements = document.querySelector('#username')
for (let elem of inputElements) {
elem.addEventListener('keyup', evnetHandler);
}eventHandler 함수
let eventHandlerUsername = () => { ... }
let eventHandlerUserPassword = () => { ... }
let eventHandlerUserPasswordRetype = () => { ... }
let eventHandlerUserEmail = () => { ... }
let eventHandlerUserPhone = () => { ... }element.addEventListener 추가
elemUsername.addEventListener('keyup', eventHandlerUsername);
elemUserPassword.addEventListener('keyup', eventHandlerUserPassword);
elemUserPasswordRetype.addEventListener('keyup', eventHandlerUserPasswordRetype);
elemUserEmail.addEventListener('keyup', eventHandlerUserEmail);
elemUserPhone.addEventListener('keyup', eventHandlerUserPhone);유효성 검사 쪼개기
// [Username 유효성 검증]: 최소 4자 이상인지
function isMoreThan4Length(value) { ... }
// [Username 유효성 검증]: 시작은 영문만 가능
function startWithEnglish(str) { ... }
// [Username 유효성 검증 함수]: 영어 또는 숫자만 가능
function onlyNumberAndEnglish(str) { ... }
// [userPassword 유효성 검증]: 최소 8자 이상인지
function isMoreThan8Length(value) { ... }
// [userPassword 유효성 검증]: 알파벳과 숫자 및 특수문자(@$!%*#?&) 는 하나 이상 포함
function strongPassword(str) { ... }
// [userPassword 유효성 검증]: 비밀번호 확인과 같은지
function isMatchPassword (password1, password2) { ... }
// [userEmail 유효성 검증]: example@example.com 이메일 유효성 검사
function onlyEmailFormat(str) { ... }
// [userEmail 유효성 검증]: 000-0000-0000 전화번호 유효성 검사
function onlyPhoneFormat(str) { ... }
// 모든 유효성 검사 항목을 통과했는지 확인
function isValidAllCheck() { ... }모든 조건 충족시 button diabled
if (true) {
submitButton.classList.add('active')
submitButton.disabled = false
} else {
submitButton.classList.remove('active')
submitButton.disabled = true
}input type = “number” Issue
<input type="text" id="userPhone" placeholder="핸드폰 번호" />처음에 전화번호 입력시 input의 type을 number로 설정했다가, value값이 숫자가 들어와 유효성 검사가 진행되지 않았다. 숫자로 보이지만 대시-를 포함한 string 타입이어야 했다.
css {event-pointer: none}
button {
pointer-events: none;
}
button.active {
pointer-events: auto;
}input을 비활성화 시키기 위해 처음엔 attr disabled 말고 pointer-events css 값을 적용시켜주었다. 기능적으로는 같은 효과를 주더라도 관심사 분리를 위해 disabled 값으로 대체하는 것이 좋다고 판단하여 수정해 주었다. (멘토에게 질문했을 때는 처음 보셨다고.. ㅎㅎ)
호환 가능한 브라우저는 위와 같다.
pointer-eventsnone값의 경우 요소가 포인터 이벤트의 대상이 아님을 가리키는 동시에, 이벤트가 요소를 "뚫고" 들어가 "아래" 요소를 대상으로 하도록 만듭니다. _MDN
MDN에서는 SVG 콘텐츠에 실험적으로 pointer-events를 사용할 수 있다고 한다. fill, stroke, painted, visible 등이다. svg 파일 중 투명한 곳을 클릭하지 못하게 막거나 stroke만 이벤트를 주고 싶을 때 사용해 볼 수 있을 것 같다.
XD