-
DOM을 활용한 간단한 유효성 검사 예제JavaScript 2020. 5. 22. 23:35
DOM(Document Object Model)
: JavaScript를 이용해서 엘리먼트의 속성값을 얻어내거나 변경하는 방법
아이디, 비밀번호를 입력해 회원가입 버튼을 누르면 피드백을 주는 페이지를 만들어보자.
(*여기서의 목표는 단순히 버튼, 텍스트 입력 등 사용자의 입력을 받을 수 있는 html태그를 만들고 javaScript를 이용해 값을 얻어내는 연습을 위함이다. 기능적인 면은 고려하지 않았다.)
html파일의 body태그 안에 아래와 같이 코딩해보았다.
<body> ID:<input type="text" id="userID"><br> 비밀번호:<input type="password" id="password"><br> 비밀번호 확인:<input type="password" id="password-check"><br> <button id="signUp">회원가입</button> <!--<script src=("js파일이 있는 경로")></script>--> </body>
짜란! 보기엔 좀 그래도 입력값을 받을 수 있는 박스와 버튼이 생겼다! 이제 javaScript를 이용해 사용자가 입력한 값을 얻어내고, 피드백을 줄 수 있게 해보자.
let userID = document.querySelector('#userID'); let pw = document.querySelector('#password'); let pwCheck = document.querySelector('#password-check'); let signUpButton = document.querySelector('#signUp');document.querySelector는 제공한 css선택자를 만족하는 첫 번째 element를 반환해준다.
위와 같이 id값을 통해 각각의 요소를 선택해서 javaScript의 변수에 담았다.
이제, 웹페이지의 input박스 안에 어떤 내용을 입력하면 그 값을 받아와서 사용자에게 무언가 피드백을 주려고 한다.
//사용자가 입력한 비밀번호, 비밀번화 확인의 값이 다르면 경고창을, 같으면 환영문구를 나타내는 함수를 만들었다. function greeting() { if (pw.value !== pwCheck.value) { // pw와 pwCheck의 value 값을 비교한다. alert('비밀번호가 다릅니다') } else { alert(userID.value + '님 환영합니다!'); } } // 버튼 요소를 담은 변수 signUpButton에 onclick 속성을 넣고, greeting 함수를 할당한다 signUpButton.onclick = greeting;
비밀번호를 다르게 입력하니 경고창을 띄운다 
비밀번호을 똑같이 넣어주니 환영인사를 나타낸다 오늘 헷갈렸던 부분은, 아래와 같이 userID의 value값을 함수 밖에서 가져오려고 하니 내가 input 박스에 입력해둔 내용이 아니라 undefined를 반환한다는 것이었다.
let userID = document.querySelector('#userID').value; // 여기서 value값을 변수에 담고 싶었다 function greeting() { if (pw.value !== pwCheck.value) { alert('비밀번호가 다릅니다') } else { alert(userID + '님 환영합니다!'); } }
ID에 입력한 내용은 어디로...? 님은 어디에...? 이것 때문에 한참을 헤멨다...(이 포스팅의 이유다...!) 원인은, 함수 밖에서 userID의 요소 값을 가져오는 시점에서는, input창에 내가 뭔가를 입력해뒀어도 그것을 value값으로 인식하지 않는다. 이때의 value값은, 해당 요소의 태그 내부에 value라는 속성을 만들어 값을 부여하지 않았다면 빈 문자열이 된다. 함수 내부에서 userID의 value값을 받아오게 해야하는 이유는, 함수가 실행될 때 비로소 input 박스 안에 있는 내용을 value 값으로 인식하기 때문이다.
'JavaScript' 카테고리의 다른 글
함수 이해하기 (0) 2020.06.04 동기, 비동기 (0) 2020.05.27 원시 타입과 참조 타입 (0) 2020.05.19 반복문(for, while) (0) 2020.05.12 숫자 다루기 (0) 2020.05.12