<!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>
