폼 입력 검증하기 2019. 11. 26. 00:08 study/gardenist/homeworks#HTML#form#validation 회원 가입 페이지(sign-up.html)를 작성할 때 TO-DO로 남겨놓았던 ‘사용자가 폼에 올바르게 입력하였는가?’를 체크하는 부분 기억나시나요? 이를테면 사용자 이름(username)과 비밀번호(password)는 꼭 입력해야 하는 부분이므로, 그냥 빈 칸으로 입력했을 때 회원가입이 되어버리면 안되겠죠. 이렇게 입력 값이 올바른지 확인 하는 것을 유효성 검증(Validation check)이라고 합니다. 필수 값을 사용자가 입력하지 않고 진행하려고 할 때 사용자에게 ‘이 값은 꼭 입력해야 해요!’ 하고 알려주는 방법에는 여러가지 방법이 있겠지만, 이번 숙제에서는 아래와 같이 사용자에게 알려주려고 합니다 일반적으로 폼 유효성 체크는 위 GIF에서 볼 수 있듯 빈 값인지를 체크하는 것 외에도 다양한 조건이 있을 수 있습니다. 적어도 5자 이상의 패스워드를 설정해주세요. 알파벳만 입력해 주세요. 체크 박스 중 두 개 이상의 항목에 체크해 주세요. 올바른 이메일주소가 아닙니다. 비밀번호는 알파벳 대소문자, 숫자, 특수문자 중 두 가지 이상으로 구성되어야 합니다. 숙제는 복잡하지 않게 사용자가 빈 값을 입력했을 때 회원 가입이 진행되지 않고 사용자에게 입력을 요구하도록 작성하는 것입니다. 조건은 아래와 같습니다. 회원가입 페이지(sign-up.html) 파일에서 작업합니다. 필요한 경우 user-service.js에 작업해도 무방합니다. 지난 스터디 때 했던 callback을 활용해 봐도 좋겠죠? HTML과 CSS를 활용하여 유효성 검증에 실패했을 때 사용자에게 보여질 구조를 구상하고 작성합니다. 저는 유효성 검증이 실패했을 때 입력 input의 경계선을 빨간색으로, 그리고 오른쪽에 빨간색의 메시지가 보여지도록 했습니다. 유효성 검증이 성공했을 때, 즉 사용자 입력이 정상이라면 실패했을 때의 모습이 보여지면 안되겠죠? 회원 가입 버튼의 클릭 이벤트 리스너에 작성된 기존 코드에 유효성을 검증하는 코드를 추가합니다. 입력 값이 비어있는지 체크하고, 입력 값이 비어있다면 2.의 모습이 보여지도록 합니다. 이 때 회원 가입(userService.signUp이 호출되어서는 안되고, 해당 함수는 그 부분에서 끝나야 합니다.) 간단히 회원 가입 페이지에 유효성 검증을 작성해 봤는데, 이러한 유효성 검증을 하는 자바스크립트 라이브러리에는 어떤 것이 있는지 찾아봅시다.