회원가입 DOM, form validation 설계

 회원가입

• 특정 값은 반드시 입력해야 합니다

• 비밀번호는 특정 자릿수 이상이어야 하며, 숫자나 특수문자를 반드시 요구하기도 합니다

• 비밀번호와 비밀번호 확인란이 동일해야 합니다

• 신용카드 넘버가 유효한지 확인하는 경우도 있습니다

 

이제 버튼을 클릭했을 때, (혹은 실시간으로) 그 입력값이 유효한지 아닌지 판단하는 JavaScript 함수를 연결시켜 봅시다. 이를 유효성 검사(form validation)라고 하며, 실제 개발 과정에서 정말 많이 부딪히는 문제 중 하나입니다.

이번 시간에는 유효성 검사를 직접 구현해봅니다. 버튼 클릭등의 이벤트를 발생시키고, DOM을 통해 값을 얻어내고, 함수를 연결시키는 과정을 연습해봅시다.

 

 

 

Achievement Goals

1. 단순 입력, 체크박스, 라디오 버튼 등의 입력을 받을 수 있는 HTML 태그를 만들고, JavaScript를 이용해 그 값을 얻어낼 수 있다.

2. 버튼 클릭 등의 이벤트가 발생했을 경우, JavaScript 함수가 실행되도록 만들 수 있다.

3. 함수 실행 결과에 따른, 화면상의 피드백(Visual feedback)을 구현해낼 수 있다.

 

Bare minimum requirement

• 최소 두 개의 <input> 태그와 한 개의 <button> 태그가 존재해야 합니다.

• <button>을 클릭했을 때, 유효성을 검사하는 함수가 불려야 합니다.

• 최소 한 개 이상의 화면상의 피드백이 있어야 합니다.

  • 예) "비밀번호가 다릅니다", "아이디를 반드시 입력하세요" 라는 메시지를 화면상에 표시

 

 

 

어떤 경우는, 버튼을 입력하지 않고도 유효성 검사가 진행되어 결과를 알려주는 경우도 있습니다. 어떻게 해야 할까요?

• 검색 키워드: mdn keyup event