오봉이와 함께하는 개발 블로그
JavaScript - 폼 유효성 확인 예제 본문
728x90
폼 유효성 확인
- form 객체
- document 객체의 하위 객체
- form 태그 내에 있는 여러 입력 양식을 제어
- form의 하위 객체들
from 객체 사용 방법
태그의 name 속성을 객체로 사용하는 경우
- <form name="newMemberForm">
- <input type="text" name="id">
- newMemberForm.id.focus();
- newMemberForm.id.value = “”;
- newMemberForm.passwd.focus();
문서 객체 모델(DOM) 방식을 사용하는 경우
- var name = document.getElementById(‘name’);
- name.focus();
- name.value = "";
폼 유효성 확인
- <input>성명을 입력하지 않은 경우
- <input>id를 입력하지 않은 경우 혹은 길이가 6 ~ 10자가 아닌 경우
- <input>비밀번호와 비밀번호 확인의 값이 같지 않은 경우
- var 변수 이름 = document.getElementById('id 속성 값')
- if(변수 이름.value == "") { 값이 유효하지 않을 때 실행할 문장 };
- <select> 태그에서 선택하지 않은 경우
- 목록에 있는 여러 항목 중 선택
- 항목 선택하면 selectedIndex 속성에 선택된 항목의 인덱스 값 저장(0부터 시작)
- 하나도 선택하지 않으면 selectedIndex 값은 -1
- 첫 번째 <option> 태그를 빈값으로 하고,
- if(job.selectedIndex == -1) { 선택하지 않았을 때 실행할 문장 };
- 또는 <option> 태그 중 하나를 빈 값으로 지정하고, 값이 없으면 선택하지 않은 것으로 처리해도 됨.
- <option value = "" selected> 직업선택
- if(job.value =="") { 선택하지 않았을 때 실행할 문장 }
- 또는 <option> 태그 하나를 미리 선택해 놓으면 유효성 확인이 필요 없다.
- <option value="프로그래머" selected>프로그래머
- 라디오 버튼 하나도 체크하지 않은 경우
- <input type="radio>
- 그룹에서 여러 개 중 한 개만 선택 가능
- 그룹에 속한 여러 개의 라디오 버튼의 그룹 이름(name 속성)이 동일하므로 라디오 버튼(객체)는 배열로 사용
- 배열의 각 원소를 하나씩 확인
- checked 속성이 true면 확인된 상태
- false면 체크되지 않은 상태
- for문 / if 문 사용
- 미리 체크되어 있게 하면 유효성 검사 필요 없음.
- 체크박스에서 하나도 선택하지 않은 경우
- <input type="checkbox">
- 여러 개 선택 가능
- checked 속성이 true면 체크된 상태, false면 체크되지 않은 상태
- 모든 체크박스 확인해야 함.
폼 유효성 확인 예제 - 입력 값 확인 join.html, checkForm.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="checkForm.js"></script>
</head>
<body>
<div id="wrap">
<div id="joinBox">
<h2 align="center">회원가입</h2>
<hr>
<form name="newMemberForm" id="joinForm" method="post" action="newMemberOk.jsp">
<table align="center">
<tr>
<td>성명</td>
<td><input type="text" name="names" id="name"></td>
</tr>
<tr>
<td>아이디</td>
<td><input type="text" name="id" id="id" border=0>
<input type="button" value="ID중복체크"> (영문자+특수문자: 6~10자)</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password" id="password" size="21">
(영문자+숫자+특수문자: 10~20자)</td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="password" name="passwordCheck" id="passwordCheck" size="21"></td>
</tr>
<tr>
<td>생년월일 </td>
<td>
<input type="text" name="birthYear" id="birthYear" size="4">년
<select name="birthMonth">
<option value="1">1
<option value="2">2
<option value="4">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">0
<option value="10">10
<option value="11">11
<option value="12">12
</select> 월
<select name="birthDay">
<option value="1">1
<option value="2">2
<option value="4">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">0
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select> 일
<input type="radio" name="solar" value="양력" checked>양력
<input type="radio" name="solar" value="음력">음력
</td>
</tr>
<tr>
<td>전화번호 </td>
<td><select name="tel1">
<option value="02" selected>02
<option value="031">031
<option value="043">043
</select>
- <input type="text" name="tel2" id="tel2" size="4">
- <input type="text" name="tel3" id="tel3"size="4">
</td>
</tr>
<tr>
<td>휴대폰번호 </td>
<td><select name="hp1">
<option value="000">000
<option value="010" selected>010
</select>
- <input type="text" name="hp2" id="hp2"size="4">
- <input type="text" name="hp3" id="hp3"size="4">
</td>
</tr>
<tr>
<td>주소 </td>
<td><input type="text" name="zipcode" id="zipcode"readonly>
<input type="button" value="우편번호찾기"><br>
<input type="text" name="address1" id="address1" size="40"><br>
<input type="text" name="address2" id="address2" size="40">상세 주소 입력
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" name="sex" value="남" checked>남
<input type="radio" name="sex" value="여">여
</td>
</tr>
<tr>
<td valign="top">직업</td>
<td>
<select name="job" id="job">
<option value="">직업선택
<option value="웹디자이너">웹디자이너
<option value="프로그래머">프로그래머
<option value="회사원">회사원
<option value="학생">학생
<option value="영화감독">영화감독
<option value="웹마스터">웹마스터
</select>
</td>
</tr>
<tr>
<td valign="top">이메일</td>
<td>
<input type="text" name="email1" id="email1" size="6">@<select name="email">
<option value="naver" selected>naver.com
<option value="gmail">gmail.com
<option value="nate">nate.com
<option value="hanmail">hanmail.net
</select>
</td>
</tr>
<tr>
<td>이메일 수신 여부</td>
<td>
<input type="radio" name="emailRcv" value="yes">예
<input type="radio" name="emailRcv" value="no">아니오
</td>
</tr>
<tr>
<td>동의</td>
<td>
<label><input type="checkbox" id="agreement1" value="프론트엔드">모든 약관에 동의</label>
<label><input type="checkbox" id="agreement2" value="백엔드">개인 정보 이용 동의</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="회원가입">
<input type="reset" value="취 소">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>window.onload = function() {
// 폼에서 id가 joinForm인 폼의 submit 버튼이 눌러졌을 때 수행되는 이벤트 처리
document.getElementById('joinForm').onsubmit = function() {
// 성명을 입력하지 않은 경우 경고창 띄우기
// 성명 입력 칸의 id를 찾아오기
var name = document.getElementById('name')
// 값이 비었는지 확인 후 비었으면 경고 출력, 입력란에 포커스, 서버로 전송되지 않게(다음 페이지로 이동 못하게)
if(name.value == "") {
alert("성명을 입력하세요.");
name.focus();
return false; // 서버로 전송되지 않게 함.
} // 이름 검증 끝
var id = document.getElementById('id');
if(id.value == "") {
alert("아이디를 입력하세요.");
id.focus();
return false;
} // 아이디 입력 됐는지 검사
if(id.value.length < 6 || id.value.length > 10) { // 글자 수 검사
alert("아이디는 6~10자로 입력하세요.");
id.focus();
id.value = "";
return false;
} // 아이디 검증 끝
var password = document.getElementById('password');
if(password.value == "") {
alert("비밀번호를 입력하세요.");
password.focus();
return false;
} // 비밀번호 입력 됐는지 검사
var passwordCheck = document.getElementById('passwordCheck');
if(passwordCheck.value == "") {
alert("비밀번호 확인을 입력하세요.");
passwordCheck.focus();
return false;
} // 비밀번호 확인 입력 됐는지 검사
if(password.value != passwordCheck.value) {
alert("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
password.focus();
password = "";
passwordCheck = "";
return false;
} // 비밀번호와 비밀번호 확인이 일치하는지 검사
// 직업을 선택하지 않은 경우 검사
var job = document.getElementById('job');
if(job.value == "") {
alert("직업을 선택해 주세요.");
return false;
} // 직업 선택 검사 완료
// if(job.selectedIndex == 0) {
// alert("직업을 선택해 주세요.");
// return false;
// } // 직업 선택 검사 완료
// radio 버튼 검사.
// radio 버튼의 경우 id 속성을 사용하지 않고 그룹 이름인 name 속성 사용
// 동일 그룹에 속한 여러 라디오 버튼(객체)는 동일한 name : 배열로 처리
// 체크 여부를 저장할 변수 선언
var chk = false;
for(var i = 0; i < joinForm.emailRcv.length; i++) {
if(joinForm.emailRcv[i].checked == true) {
chk = true; // 하나라도 체크되면 true값 저장
// 하나도 체크되지 않으면 false 값 그대로 유지.
}
}
if(chk == false) { // 하나도 체크되지 않았을 경우
alert("이메일 수신 여부를 선택해 주세요.")
return false;
} // radio 버튼 검사 끝.
// 체크박스를 하나도 선택하지 않은 경우 검사
var agreement1 = document.getElementById('agreement1');
var agreement2 = document.getElementById('agreement2');
if(agreement1.checked == false && agreement2.checked == false) {
alert("두 약관 중 하나의 약관이라도 동의해 주세요.")
return false;
}
}; // onsubmit 끝
}; // window.onload 끝728x90
'FE > JavaScript' 카테고리의 다른 글
| JavaScript - 사용자 정의 객체 생성자 함수 (function, prototype) (0) | 2021.12.13 |
|---|---|
| JavaScript - 사용자 정의 객체 리터럴 (0) | 2021.12.13 |
| JavaScript - 이벤트 핸들러와 이벤트 처리(DOM 포함) (0) | 2021.12.10 |
| JavaScript - 문서 객체 모델 (0) | 2021.12.10 |
| JavaScript - 브라우저 객체 모델 navigator객체 (0) | 2021.12.10 |
'FE/JavaScript' Related Articles
more
Comments