Frontend/JavaScript
if 문 회원가입양식 예제
Study
2021. 3. 20. 14:26
if문을 응용하여 입력된 정보의 무결성 확인!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!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>
<style>
.wrapper{
width: 600px;
margin: auto;
}
</style>
<script>
window.addEventListener("load", function(){
var bt=document.querySelector("button");
bt.style.backgroundColor="yellow";
bt.addEventListener("click",function(){
send()
})
})
function send(){
var user_id= document.getElementById("user-id")
console.log("당신이 입력한 아이디는", user_id.value)
if(user_id.value==""){
alert("아이디를 입력하세요.");
user_id.focus();
}else if(pass.value==""){
alert("패스워드를 입력하세요.");
pass.focus();
}else if(pass.value!=Pass2.value){
alert("패스워드가 확인창과 일치하지 않습니다.");
pass2.focus();
}else if(!document.getElementsByName("agree")[0].checked){
alert("동의해야 가입이 가능하오.")
}else{var form1= document.getElementById("from1");
from1.action="http://daum.net";
from1.submit();
}
}
</script>
</head>
<body>
<div class="wrapper">
<form id="from1">
<table width="100%" border="1px">
<tr>
<td><input type="text" placeholder="아이디입력하고라니" id="user-id"></td>
</tr>
<tr>
<td><input type="password" placeholder="PassWord" id="pass"></td>
</tr>
<tr>
<td><input type="password" placeholder="confirm password" id="Pass2"></td>
</tr>
<tr>
<td>
<select name="" id="">
<option value="">010</option>
<option value="">011</option>
<option value="">017</option>
<option value="">019</option>
</select>-
<input type="text" placeholder="앞자리">-
<input type="text" placeholder="뒷자리">
</td>
</tr>
<tr>
<td>
동의 하시겠습니까?<input type="radio" name="agree" id="" value="yes">예
<input type="radio" name="agree" id="" checked value="no">네
</td>
</tr>
<tr>
<td>
<button type="button">가입</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
|
cs |