728x90
23. 09. 18
<!-- <input> 태그의 required 속성: 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시 -->
<!DOCTYPE html>
<html>
<head>
<title>유효성 검사 예제</title>
</head>
<body>
<form id="frm">
<table width="700" height="120" border="1" bordercolor="#CFEFFC">
<tr>
<td colspan="2" align="center" bgcolor="#CFEFFC">
<b>회원 기본 정보</b>
</td>
</tr>
<tr align="center">
<td width="120px" bgcolor="#E8F7FD">
<b>아이디</b>
</td>
<td align="left">
<input type="text" id="uid" size="10" maxlength="15" required />
4~12자의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr align="center">
<td bgcolor="#E8F7FD">
<b>비밀번호</b>
</td>
<td align="left">
<input type="password" id="pw" size="10" maxlength="15" required />
4~12자의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr align="center">
<td bgcolor="#E8F7FD">
<b>비밀번호 확인</b>
</td>
<td align="left">
<input
type="password"
id="pwCheck"
size="10"
maxlength="15"
required
/>
</td>
</tr>
<tr align="center">
<td bgcolor="#E8F7FD">
<b>메일주소</b>
</td>
<td align="left">
<input type="text" id="mail" size="15" required />
예) id@domain.com
</td>
</tr>
<tr align="center">
<td bgcolor="#E8F7FD">
<b>이름</b>
</td>
<td align="left">
<input
type="text"
id="userName"
size="15"
maxlength="10"
required
/>
</td>
</tr>
<tr align="center">
<td bgcolor="#E8F7FD">
<b>집주소</b>
</td>
<td align="left">
<input
type="text"
id="zipCode"
placeholder="우편번호"
readonly
required
/>
<input
type="button"
onclick="execDaumPostcode()"
value="우편번호 찾기"
/>
<input
type="button"
onclick="execDaumPostcodeReset()"
value="초기화"
/><br />
<input
type="test"
id="address1"
placeholder="도로명주소"
size="40"
readonly
required
/><br />
<input
type="text"
id="address2"
placeholder="지번주소"
size="40"
readonly
/><br />
<input
type="text"
id="address3"
placeholder="상세주소"
size="40"
required
/>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#CFEFFC">
<b>개인 신상 정보</b>
</td>
</tr>
<tr>
<td align="center" bgcolor="#E8F7FD"><b>주민등록번호</b></td>
<td>
<input
type="password"
id="unm1"
size="10"
maxlength="6"
placeholder="6자리"
required
/>
-
<input
type="password"
id="unm2"
size="10"
maxlength="7"
placeholder="7자리"
required
/>
</td>
</tr>
<tr align="center">
<td bgcolor="#E8F7FD">
<b>생일</b>
</td>
<td align="left">
<input
type="text"
name="bir"
id="year"
size="5"
maxlength="4"
required
/>년
<select name="bir" id="Month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
월
<select name="bir" id="Day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="15">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
일
</td>
</tr>
<tr align="center">
<td bgcolor="#E8F7FD">
<b>관심분야</b>
</td>
<td align="left" id="hobby" required>
<input type="checkbox" name="01" value="컴퓨터" />컴퓨터
<input type="checkbox" name="01" value="인터넷" />인터넷
<input type="checkbox" name="01" value="여행" />여행
<input type="checkbox" name="01" value="영화감상" />영화감상
<input type="checkbox" name="01" value="음악감상" />음악감상
</td>
</tr>
<tr align="center">
<td bgcolor="#E8F7FD">
<b>자기소개</b>
</td>
<td align="left">
<textarea
id="my_intro"
cols="70"
rows="8"
maxlength="1000"
required
></textarea>
<div id="text_count">0 / 1000</div>
</td>
</tr>
</table>
<table width="650" height="50" border="0" align="center">
<tr>
<td align="right">
<input
align="center"
type="button"
onclick="userCheck()"
value="가입하기"
/>
</td>
<td align="left"><input type="reset" value="다시 입력" /></td>
</tr>
</table>
</form>
<script src="test2.js"></script>
</body>
</html>const userCheck = () => {
// 아이디 검사
if (uid.value == "") {
alert("아이디를 입력하세요.");
uid.focus();
return false;
}
if (uid.value.length < 4 || uid.value.length > 12) {
alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!");
uid.focus();
return false;
}
for (let i = 0; i < uid.value.length; i++) {
let ch = uid.value.charAt(i);
if (
!(ch >= "0" && ch <= "9") &&
!(ch >= "a" && ch <= "z") &&
!(ch >= "A" && ch <= "Z")
) {
alert("아이디는 영문 대소문자와 숫자만 가능합니다.");
uid.focus();
return false;
}
}
// 비밀번호 검사
if (pw.value == "") {
alert("비밀번호를 입력하세요.");
pw.focus();
return false;
}
if (uid.value == pw.value) {
alert("비밀번호는 아이디와 다르게 입력해야 합니다.");
pw.focus();
return false;
}
if (pw.value.length < 8 || pw.value.length > 25) {
alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
pw.focus();
return false;
}
var hasNumber = false;
var hasLetter = false;
var hasSpecialChar = false;
for (let i = 0; i < pw.value.length; i++) {
let ch = pw.value.charAt(i);
if (ch >= "0" && ch <= "9") {
hasNumber = true;
} else if ((ch >= "a" && ch <= "z") || (ch >= "A" && ch <= "Z")) {
hasLetter = true;
} else if ("!@#$%^*+=-".indexOf(ch) != -1) {
hasSpecialChar = true;
}
}
if (!(hasNumber && hasLetter && hasSpecialChar)) {
alert("비밀번호는 영문자+숫자+특수문자 조합으로 구성되어야 합니다.");
pw.focus();
return false;
}
// 비밀번호 확인 검사
if (pwCheck.value == "") {
alert("비밀번호 확인을 입력하세요.");
pwCheck.focus();
return false;
}
if (pwCheck.value != pw.value) {
alert("비밀번호가 일치하지 않습니다.");
pwCheck.focus();
}
if (pwCheck.value.length < 8 || pwCheck.value.length > 25) {
alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
pw.focus();
return false;
}
var hasNumber = false;
var hasLetter = false;
var hasSpecialChar = false;
for (let i = 0; i < pwCheck.value.length; i++) {
let ch = pwCheck.value.charAt(i);
if (ch >= "0" && ch <= "9") {
hasNumber = true;
} else if ((ch >= "a" && ch <= "z") || (ch >= "A" && ch <= "Z")) {
hasLetter = true;
} else if ("!@#$%^*+=-".indexOf(ch) != -1) {
hasSpecialChar = true;
}
}
if (!(hasNumber && hasLetter && hasSpecialChar)) {
alert("비밀번호는 영문자+숫자+특수문자 조합으로 구성되어야 합니다.");
pw.focus();
return false;
}
// 이메일 검사
if (mail.value == "") {
alert("이메일을 입력하세요.");
mail.focus();
return false;
}
var atPos = mail.value.indexOf("@");
var dotPos = mail.value.lastIndexOf(".");
if (atPos < 1 || dotPos < atPos + 2 || dotPos + 2 >= mail.length) {
alert("이메일 형식이 올바르지 않습니다");
mail.foucs();
return flase;
}
// 이름 검사
if (userName.value == "") {
alert("이름을 입력하세요.");
userName.focus();
return false;
}
if (userName.value.length < 2 || userName.value.length > 4) {
alert("이름은 한글로 최소 두 글자, 최대 네 글자만 가능합니다.");
userName.focus();
return false;
}
for (let i = 0; i < userName.value.length; i++) {
let ch = userName.value.charAt(i);
let chCode = ch.charCodeAt(0);
if (!(chCode >= "가".charCodeAt(0) && chCode <= "힣".charCodeAt(0))) {
alert("한글 이름만 가능합니다.");
userName.focus();
return false;
}
}
// 집주소 검사
if (zipCode.value == "") {
alert("집주소를 입력하세요.");
zipCode.focus();
return false;
}
if (address3.value == "") {
alert("상세주소를 입력하세요.");
address3.focus();
return false;
}
if (address3.value.length < 2 || address3.value.length > 25) {
alert(
"상세주소는 최소 두 글자, 최대 이십오 글자여야 합니다. 예) A동 101호"
);
address3.focus();
return false;
}
// 주민등록번호 검사
if (unm1.value == "" || unm2.value == "") {
alert("주민번호를 입력하세요.");
unm1.focus();
return false;
}
var num1 = document.getElementById("unm1");
var num2 = document.getElementById("unm2");
if (num1.value.length != 6) {
alert("주민등록 앞자리는 반드시 여섯 자리여야 합니다");
num1.focus();
return false;
}
if (num2.value.length != 7) {
alert("주민등록 뒷자리는 반드시 일곱 자리여야 합니다");
num2.focus();
return false;
}
for (let i = 0; i < num1.value.length; i++) {
let ch = num1.value.charAt(i);
if (!(ch >= "0" && ch <= "9")) {
alert("주민등록 번호는 숫자만 가능합니다");
num1.focus();
return false;
}
}
for (let i = 0; i < num2.value.length; i++) {
let ch = num2.value.charAt(i);
if (!(ch >= "0" && ch <= "9")) {
alert("주민등록 번호는 숫자만 가능합니다");
num2.foucs();
return false;
}
}
// 생일
var birthYear =
num1.value.substring(0, 2) === "19" || num1.value.substring(0, 2) === "20"
? "19"
: "20";
year.value = birthYear + num1.value.substring(0, 2);
var birthMonth = parseInt(num1.value.substring(2, 4));
var birthDay = parseInt(num1.value.substring(4, 6));
if (birthMonth < 1 || birthMonth > 12) {
alert("생년월일이 올바르지 않습니다");
return false;
}
if (birthDay < 1 || birthDay > 31) {
alert("생년월일이 올바르지 않습니다");
return false;
}
document.getElementById("Month").value = birthMonth;
document.getElementById("Day").value = birthDay;
// 관심분야
var checkboxes = document.getElementsByName("01");
var isChecked = false;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert("관심분야는 최소 한 개 이상 선택해야 합니다.");
return false;
}
// 자기소개
var intro = document.getElementById("my_intro");
if (intro.value == "") {
alert("자기소개를 입력하세요. (200자 이상, 1000자 이하)");
intro.focus();
return false;
} else if (!(intro.value.length >= 200 && intro.value.length <= 1000)) {
alert("자기소개는 200자 이상 1000자 이하로 입력해야 합니다.");
my_intro.focus();
return false;
}
alert("회원가입이 완료되었습니다!");
window.location.href = `mailto:${mail.value}?subject=회원가입 완료&body=회원가입을 환영합니다.`;
return true;
};
const execDaumPostcode = () => {
new daum.Postcode({
oncomplete: function (data) {
document.getElementById("zipCode").value = data.zonecode;
document.getElementById("address1").value = data.address;
document.getElementById("address2").value = data.jibunAddress;
document.getElementById("address3").focus();
},
}).open();
};
const execDaumPostcodeReset = () => {
document.getElementById("zipCode").value = null;
document.getElementById("address1").value = null;
document.getElementById("address2").value = null;
document.getElementById("address3").value = null;
};728x90
'2023-02 몰입형 SW 정규 교육' 카테고리의 다른 글
| [JSP/Servlet] 회원가입 (0) | 2023.09.20 |
|---|---|
| 웹 프로그래밍 개념 (Web Programming) (0) | 2023.09.19 |
| [JavaScript] 정규표현식을 사용한 회원가입 예제 (0) | 2023.09.18 |
| [JavaScript] 정규표현식 (0) | 2023.09.18 |
| [JavaScript] ver, let, const 차이점 (0) | 2023.09.18 |