WEB.JS/09.FORM_JS

chapter03 : input_check

GAWON 2023. 5. 22. 09:29 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function sendData(){
		
		var form = document.forms.myForm;
		
		// 1. 이름 : 필수 + 2~6자
		var name = form.name;	// <input type="text" name="name">
		if(name.value.length < 2 || name.value.length > 6){
			alert("이름은 2~6자 사이로 입력");
			name.value = '';
			name.focus();
			return;
		}
		
		// 2. 이메일 : @포함 + 첫 글자, 마지막 글자 @ 체크
		var email = form.email;	// <input type="text" name="email">
		var indexOfAt = email.value.indexOf("@");
		// @가 처음 값이거나, 마지막 값인 경우, @를 찾지 못한 경우
		// indexOfAt : 0 > 처음 값
		// indexOfAt : -1 > 없을 때
		// indexOfAt : length-1 > 마지막 글자
		if(indexOfAt == 0 || indexOfAt == -1 || indexOfAt == email.value.length - 1){
			alert("올바른 이메일 형식이 아닙니다.");
			return;
		}
		
		// 3. 우편 번호 : 5자 + 숫자
		var zipCode = form.zipCode; // <input type="text" name="zipCode">
		if(zipCode.value.length != 5 || isNaN(zipCode.value)){
			alert("우편 번호는 5자리 숫자로 입력해야 합니다.");
			return;
		}
		
		// 4. 지역 : 선택
		var region = form.region;
		if(region.value == '0'){
			alert("지역을 선택하세요");
			return;
		}
		
		form.submit();
	}
</script>
</head>
<body>
	<form action="#" name="myForm">
		<table>
			<tr>
				<td>성명</td>
				<td><input type="text" name="name"></td>
			</tr>
			<tr>
				<td>이메일</td>
				<td><input type="text" name="email"></td>
			</tr>
			<tr>
				<td>우편번호</td>
				<td><input type="text" name="zipCode" maxlength="5"></td>
			</tr>
			<tr>
				<td>지역</td>
				<td>
					<select name="region">
						<option value="0">::지역선택::</option>
						<option value="1">서울</option>
						<option value="2">인천</option>
						<option value="3">경기</option>
					</select>
				</td>
			</tr>
			<tr>
				<th colspan="2">
					<input type="button" value="전송" onclick="sendData()">
				</th>
			</tr>
		</table>
	</form>
</body>
</html>