runtoyourdream.tistory.com/187
[HTML] 버튼(button)을 만들어서 사용해 보자!
JSP(Java Server Page) FORM 태그를 이용해서 페이지를 작성하다 보면 'INPUT' 타입이 'SUBMIT'이거나 'RESET' 인 것만 사용해봤을텐데요, 기존의 폼(FROM)태그를 이용한 방법에는 기능이 한정되어 있었..
runtoyourdream.tistory.com
CSS3 Button-스타일로 버튼만들기
인터넷 강국 대한민국은 정말 많은 웹사이트가 있습니다. 하지만 그만큼 전문성을 띠지 못하는 저품질 사이트도 굉장히 많죠. 웹표준에 어긋나는 부분 또 웹접근성에 어긋나는 부분을 지키지
nimolove.tistory.com
[JQUERY] 회원가입 유효성 검사
회원 기본 정보 아이디 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 확인 메일 주소 예) id@domain.com 이름 개인 신상 정보 주민
cho-coding.tistory.com
|
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Indie+Flower&display=swap"
rel="stylesheet">
<title>회원가입 form</title>
<!-- jQuery + 유효성검사추가 -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script type="text/javascript">
$(document).ready(function checks(){
var idCheck = RegExp(/^[a-zA-Z0-9]{8,15}$/); //id
var emailCheck = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/); //email
//아이디 유효성 검사
$('#idcheck').click(function() { //id가 idcheck인 버튼을 누르면
if(!idCheck.test($("#id").val())) {
alert("형식에 맞게 입력해주세요");
$("#id").val(""); //초기화
$("#id").focus(); //커서가져다놓기
return false;
} else {
alert("사용가능한 아이디 입니다.");
}
});
//입력하기 버튼을 누르면
$('#submit').click(function() {
//아이디 필수입력
if($('#id').val() == "") {
alert("아이디는 필수입력");
$("#id").focus();
return false;
}
//비밀번호 필수입력
if($('#pwd').val() == "") {
alert("비밀번호는 필수입력");
$("#pwd").focus();
return false;
}
//비밀번호확인 필수 입력
if($('#pwd2').val() == "") {
alert("비밀번호확인은 필수입력");
$("#pwd2").focus();
return false;
}
//비밀번호 일치확인
if($("#pwd").val() != $("#pwd2").val()){
alert("비밀번호가 일치하지 않습니다.");
$("#pwd").val("");
$("#pwd2").val("");
$("#pwd").focus();
return false;
}
//이메일 필수입력
if($('#email').val() == "") {
alert("이메일은 필수입력");
$("#email").focus();
return false;
}
//이메일 유효성 검사
if(!emailCheck.test($("#email").val())) {
alert("이메일을 형식에 맞게 입력해주세요");
$("#email").val("");
$("#email").focus();
return false;
}
});
});
</script>
<style type="text/css">
body {
font-family: 'Gamja Flower', cursive;
}
h1 {
text-align: center;
}
table {
text-align: left;
width: 800;
}
.button {
border: 1px solid skyblue;
background-color: rgba(0,0,0,0);
color: skyblue;
padding: 5px;
border-radius:10px;
}
.button:hover {
color:white;
background-color: pink;
}
</style>
</head>
<body>
<h1> 회원가입 </h1>
<form action="" method="post">
<!-- 11행 2열 -->
<table align="center">
<tr>
<th width="170"></th>
<th></th>
</tr>
<tr>
<td>ID</td>
<td>
<input type="text" placeholder="id를 입력하세요" id="id"> 8~15자의 영문
대소문자와 숫자로만 입력 <input type="button" value="아이디확인" id="idcheck" class="button">
</td>
</tr>
<tr>
<td> 비밀번호 </td>
<td><input type="password" name="pwd" id="pwd"> </td>
</tr>
<tr>
<td> 비밀번호 확인 </td>
<td><input type="password" name="pwd2" id="pwd2"> </td>
</tr>
<tr>
<td> 이 름 </td>
<td><input type="text"></td>
</tr>
<tr>
<td> 전화번호 </td>
<td><input type="text" size="3"> - <input type="text" size="3"> - <input type="text" size="3"> </td>
</tr>
<tr>
<td> e-mail </td>
<td><input type="text" size="20" id="email"> 예)id@naver.com </td>
</tr>
<tr>
<td> 직 업 </td>
<td>
<select>
<option value="job1">주부</option>
<option value="job2">개발자</option>
<option value="job3">요리사</option>
<option value="job4">회사원</option>
<option value="job5">기타</option>
</select> <br>
</td>
</tr>
<tr>
<td> 성 별 </td>
<td>
<input type="radio" name="gender" value="F">여자
<input type="radio" name="gender" value="M">남자
</td>
</tr>
<tr>
<td> 주 소 </td>
<td>
<input type="text" size="5"> <input type="button" value="우편번호검색" id="btnClick" class="button"><br>
<input type="text" size="35"><br>
<input type="text" size="35">
</td>
</tr>
<tr>
<td> 취 미 </td>
<td>
<input type="checkbox" name="hobby" value="travel">여행
<input type="checkbox" name="hobby" value="book">독서
<input type="checkbox" name="hobby" value="walk">산책
</td>
</tr>
<tr>
<td> 자기소개 </td>
<td><textarea rows="10" cols="50"></textarea> </td>
</tr>
<tr>
<td>
<input type="submit" value="입력하기" id="submit" class="button"> <input type="reset" value="취소하기" id="reset" class="button"> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
|
cs |
'HTML,CSS,JS,jQuery,AJAX > code by me' 카테고리의 다른 글
| js - 반복문이용한 구구단 (0) | 2021.02.24 |
|---|---|
| html+css - 회원가입 form (0) | 2021.02.23 |
| html+css - Calendar (0) | 2021.02.22 |