자바스크립트 폼 유효성 검증 - 자바스크립트 강좌 7강
이번 강좌에서는 사용자가 작성한 폼 값을 검증하고 서버로 넘기는 과정에 대해 공부하겠습니다.
이 강좌를 보기위해서는 HTML 폼 관련 사전지식이 있어야 합니다.
※폼 유효성 검증이란?
사용자가 입력한 정보를 서버사이드로 전송을 하기 전에 입력한 값에 문제가 있는지 검사를 하는 과정입니다.
예를 들면 DB 서버에서 필수항목으로 전송되어야 할 항목에 어떠한 값도 입력하지 않고 전송이 이루어진다면 에러가 납니다.
그러한 에러를 1차적으로 사전에 방지하고자 하는 차원에서 폼 유효성 검증을 사용합니다.
먼저 간단한 회원가입 폼을 만들어 보겠습니다.
폼검증 예제)
1. 본문코드
<body>
<form method="post" name="inputForm" action="action.html">
<fieldset>
<legend>1.이름</legend>
<input type="text" name="inputName" id="inputName">
</fieldset>
<fieldset>
<legend>2.이메일주소</legend>
<input type="text" name="inputEmail" id="inputEmail">
</fieldset>
<fieldset>
<legend>3.성별</legend>
<input type="radio" name="inputGender" value="M">남자
<input type="radio" name="inputGender" value="F">여자
</fieldset>
<input type="button" onclick="formSubmit()" value="완료">
</form>
</body>
결과)
코드설명)
위 html 문서를 보면 하단부에 완료버튼이 있습니다.
완료버튼에 formSubmit() 메소드를 호출하는 클릭이벤트를 추가했습니다.
2. 스크립트 코드
<script>
function formSubmit(){
var name = document.getElementById("inputName").value;
var email = document.getElementById("inputEmail").value;
var radioCheck = document.getElementsByName("inputGender");
if(name == ""){
alert("이름을 입력해 주세요.");
return;
}
if(email == ""){
alert("이메일을 입력해 주세요.");
return;
}
if(radioCheck[0].checked == false && radioCheck[1].checked == false){
alert("성별을 선택해 주세요.");
return;
}
alert('입력하신 정보를 전송합니다.');
document.inputForm.submit();
}
</script>
코드설명)
(1)name, email, radioCheck 이 세개의 변수에 이름, 이메일, 성별 오브젝트를 입력합니다.
(2)이름, 이메일 정보를 입력하지 않았을 경우 경고 메시지를 보여주고 메소드를 중단합니다.
(3)성별을 선택하지 않은경우 메시지를 보여주고 메소드를 중단합니다.
(4)모든 값이 입력된 경우에는 메시지를 보여주고 폼전송을 시작합니다.
주의사항)
△getElementsByName 선택자는 getElementById 선택자와의 차이점.
이전 강좌에서도 언급했지만 getElementById 선택자는 문서에 하나만 존재하는 아이디값을 가져오므로 단수형 입니다.
그러나 getElementsByName 선택자는 라디오버튼 처럼 여러개의 인자를 가진 이름값을 가져오므로 복수형 Element에 s가 붙은 배열 입니다.
radioCheck[0], radioCheck[1] 변수에서 [ ] 안의 숫자는 인자값을 의미합니다.
그리고 배열의 인자값은 0 부터 시작합니다.
결과)
위 결과를 보면 이메일 주소에 간단히 test 라고 입력을 해도 값으로 인정을 했는데요.
다음 강좌에서는 이메일 형식에 맞는지 체크하는 예제를 테스트 하겠습니다.
'코딩이야기 > Javascript' 카테고리의 다른 글
| 자바스크립트와 제이쿼리의 선택자 - 자바스크립트 강좌 9강 (2) | 2016.11.10 |
|---|---|
| 자바스크립트 이메일 검증 - 자바스크립트 강좌 8강 (0) | 2016.11.09 |
| 자바스크립트 이벤트 - 자바스크립트 강좌 6강 (5) | 2016.06.04 |
| 자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강 (1) | 2016.05.03 |
| 자바스크립트 팝업/window - 자바스크립트 강좌 4강 (0) | 2016.04.17 |