<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window. {
var button = document.getElementById('button');
var inputId = document.querySelectorAll('input')[0];
var inputPa1 = document.querySelectorAll('input')[1];
var inputPa2 = document.querySelectorAll('input')[2];
var inputNa = document.querySelectorAll('input')[3];
var inputHo1 = document.querySelectorAll('input')[4];
var inputHo2 = document.querySelectorAll('input')[5];
var inputMo1 = document.querySelectorAll('input')[6];
var inputMo2 = document.querySelectorAll('input')[7];
var selectGe = document.querySelectorAll('select')[0];
var selectHo1 = document.querySelectorAll('select')[1];
// 비밀번호 전체 입력시 비밀번호 재확인 입력으로 넘어가는 소스
inputPa1.onkeydown = function() {
if(12 <= inputPa1.value.length) {
inputPa2.focus();
}
}
inputPa2.onkeydown = function(event) {
if(inputPa1.value == inputPa2.value && inputPa1.value.length != 0 && inputPa2.value.length != 0) {
alert('적절한 Password입력.');
selectGe.focus();
}
var event = event || window.event;
if(event.keyCode == 8 && inputPa2.value.length == 0) {
inputPa1.focus();
} // 지우는경우 앞자리 입력칸으로 넘어가는 소스
}
// 이름 입력시 전화번호 입력으로 넘어가고 앞자리 입력시 뒷자리 입력으로 넘어가는 소스
inputNa.onkeydown = function() {
if(3 <= inputNa.value) {
selectHo1.focus();
}
}
inputHo1.onkeydown = function() {
if(4 <= inputHo1.value.length) {
inputHo2.focus();
}
}
inputHo2.onkeydown = function(event) {
var event = event || window.event;
if(event.keyCode == 8 && inputHo2.value.length == 0) {
inputHo1.focus();
} // 지우는경우 앞자리 입력칸으로 넘어가는 소스
}
// 핸드폰 앞자리 입력시 뒷자리 입력으로 넘어가는 소스
inputMo1.onkeydown = function() {
if(4 <= inputMo1.value.length) {
inputMo2.focus();
}
}
inputMo2.onkeydown = function(event) {
var event = event || window.event;
if(event.keyCode == 8 && inputMo2.value.length == 0) {
inputMo1.focus();
} // 지우는경우 앞자리 입력칸으로 넘어가는 소스
}
button. {
var check = 0;
var inputDataId = document.getElementById('Id');
var inputDataPa1 = document.getElementById('Pa1');
var inputDataPa2 = document.getElementById('Pa2');
var inputDataNa = document.getElementById('Na');
var inputDataHo1 = document.getElementById('Ho1');
var inputDataHo2 = document.getElementById('Ho2');
var inputDataMo1 = document.getElementById('Mo1');
var inputDataMo2 = document.getElementById('Mo2');
if(inputDataId.value.length < 6)
{
alert('Id가 6보다 길이가 짧으므로 다시입력하세요.');
check++;
}
if(inputDataPa1.value.length < 8)
{
alert('Password1이 8보다 길이가 짧으므로 다시입력하세요.');
check++;
}
if(inputDataPa2.value.length < 8)
{
alert('Password2이 8보다 길이가 짧으므로 다시입력하세요.');
check++;
}
if(inputDataPa1.value!=inputDataPa2.value)
{
alert('Password1과 Password2값이 다르므로 다시입력하세요.');
check++;
}
if(inputDataHo1.value.length < 4)
{
alert('집전화앞자리가 4보다 길이가 짧으므로 다시입력하세요.');
check++;
}
if(inputDataHo2.value.length < 4)
{
alert('집전화뒷자리가 4보다 길이가 짧으므로 다시입력하세요.');
check++;
}
if(inputDataMo1.value.length < 4)
{
alert('핸드폰앞자리가 4보다 길이가 짧으므로 다시입력하세요.');
check++;
}
if(inputDataMo2.value.length < 4)
{
alert('핸드폰뒷자리가 4보다 길이가 짧으므로 다시입력하세요.');
check++;
}
// 빈칸있으면 재입력 확인창 띄움
if(inputDataId.value == 0 || inputDataPa1.value == 0 || inputDataPa2.value == 0 || inputDataNa.value == 0 ||
inputDataHo1.value == 0 || inputDataHo2.value == 0 || inputDataMo1.value == 0 || inputDataMo2.value == 0)
{
alert('빈칸이 있으므로 재입력 하세요.');
}
//조건들 다 만족하면 회원가입 창 띄움
else if (check == 0) {
alert('회원가입 처리되었습니다.');
}
}
}
</script>
</head>
<body>
<form>
<table align="center">
<tbody>
<tr>
<td>아이디</td>
<td><input id="Id" type="text" name="아이디" maxlength=10></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input id="Pa1" type="password" name="비밀번호" maxlength=12></td>
</tr>
<tr>
<td>비밀번호 재확인</td>
<td><input id="Pa2" type="password" name="비밀번호재확인" maxlength=12></td>
</tr>
<tr>
<td>성별</td>
<td>
<select class="gender" name="성별">
<option value="남">남</option>
<option value="여">여</option>
</select>
</td>
</tr>
<tr>
<td>이름</td>
<td><input id="Na" type="text" name="이름" maxlength=3></td>
</tr>
<tr>
<td>자택전화번호</td>
<td>
<select class="choicehouse" name="집전화">
<option value="선택">선택</option>
<option value="041">041</option>
<option value="02">02</option>
-<input id="Ho1" type="text" name="집전화1" maxlength=4>
-<input id="Ho2" type="text" name="집전화2" maxlength=4>
</select>
</td>
</tr>
<tr>
<td>휴대폰</td>
<td>
<select class="choicemobile" name="핸드폰">
<option value="선택">선택</option>
<option value="010">010</option>
<option value="011">011</option>
-<input id="Mo1" type="text" name="핸드폰1" maxlength=4>
-<input id="Mo2" type="text" name="핸드폰2" maxlength=4>
</select>
</td>
</tr>
<tr>
<td>비고</td>
<td><textarea name="비고" rows="8" cols="80"></textarea></td>
</tr>
<tr>
<td></td>
<td><button id="button" type="button" name="button">버튼</button></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
댓글 0