빅데이터 AI 인공지능 IT 꿀팁 아이팁
JavaScript 실습 : 회원가입 정규표현식 본문
<!DOCTYPE html>
<html>
<head>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<title>회원가입 정규식</title>
<script type="text/javascript">
function Checks() {
var RegExp = /^[a-zA-Z0-9]{4,12}$/; //id와 pwassword 유효성 검사 정규식
//이메일 유효성검사
var e_RegExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*[@][0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*[.][a-zA-Z]{2,3}$/i;
var n_RegExp = /^[가-힣]{2,15}$/; //이름 유효성검사 정규식
var c_RegExp = /^[0-9]{1,}$/; // 숫자 유효성검사 정규식
var objId = document.getElementById("id"); //아이디
var objPw = document.getElementById("pw"); //비밀번호
var objPw2 = document.getElementById("pw2"); //비밀번호확인
var objEmail = document.getElementById("email");//메일
var objName = document.getElementById("name"); //이름
var objJmin = document.getElementById("jumin"); //주민번호
var objfavor = document.getElementsByName("favorite")
var cnt = 0;
//----- 주민번호 -----//
var today = new Date();
var yearcheck = today.getFullYear();
var jum = document.getElementById("jumin").value;
var birth = jum.substr(0, 6);
var flag = true;
if (objId.value == '') {
alert("ID를 입력해주세요.");
return false;
}
if (!RegExp.test(objId.value)) { //아이디 유효성검사
alert("ID는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.");
return false;
}
if (objPw.value == '') { // 비밀번호 입력여부 검사
alert("비밀번호를 입력해주세요.");
return false;
}
if (!RegExp.test(objPw.value)) { //패스워드 유효성검사
alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.");
return false;
}
if (objPw.value == objId.value) { //패스워드와 ID가 동일한지 검사
alert("비밀번호는 ID와 동일하면 안됩니다.");
return false;
}
if (objPw2.value != objPw.value) { //비밀번호와 비밀번호확인이 동일한지 검사
alert("비밀번호가 틀립니다. 다시 확인하여 입력해주세요.");
return false;
}
if (objEmail.value == '') { // 이메일 입력여부 검사
alert("이메일을 입력해주세요.");
return false;
}
if (!e_RegExp.test(objEmail.value)) { //이메일 유효성 검사
alert("올바른 이메일 형식이 아닙니다.");
return false;
}
if (objName.value == '') {
alert("이름을 입력해주세요.");
return false;
}
if (!n_RegExp.test(objName.value)) {
alert("이름을 다시 입력해주세요");
return false;
}
if (objJmin.value == ''){
alert("주민등록번호를 입력해주세요.");
return false;
}
if (!c_RegExp.test(jum)) {
alert('숫자만 입력해주세요.');
return false;
}
if (parseInt("20" + birth.substr(0, 2)) > yearcheck) {
document.getElementById("birth").value = "19" + birth.substr(0, 2); //주민번호 앞 2자리에 20을 붙이고 현재 년도와 비교해서 크면 1900년도부터 시작
}
else {
document.getElementById("birth").value = "20" + birth.substr(0, 2); // 주민번호 앞 2자리에 20을 붙이고 현재 년도와 비교해서 작으면 2000년도부터 시작
}
month[parseInt(birth.substr(2, 2)) - 1].selected = true;
day[parseInt(birth.substr(4, 2)) - 1].selected = true;
if (parseInt(jum[6]) > 4) {
alert('잘못된 주민번호입니다.');
return false;
}
else if (jum[12] != (11 - ((2 * parseInt(jum[0]) + 3 * parseInt(jum[1]) + 4 * parseInt(jum[2]) +
5 * parseInt(jum[3]) + 6 * parseInt(jum[4]) + 7 * parseInt(jum[5]) +
8 * parseInt(jum[6]) + 9 * parseInt(jum[7]) + 2 * parseInt(jum[8]) +
3 * parseInt(jum[9]) + 4 * parseInt(jum[10]) + 5 * parseInt(jum[11])) % 11))) {
alert('잘못된 주민번호입니다.');
return false;
}
if (objfavor.checked) {
jumin.focus();
jumin.value = "";
for (var i = 0; i < favor.length; i++) {
if (favor[i].checked) { cnt++ };
}
// 체크가 하나도 안되어있을 시
if (cnt == 0) {
alert("관심분야를 1개이상 체크해 주세요.")
return false;
}
else return true;
var intro = document.getElementById("introduce");
// 내용이 공백이면
if (intro.value == "") {
alert("자기소개란에 내용을 입력해주세요.");
intro.focus;
return false;
}
else return true;
} // 주민함수의 끝부분
function addrFind() {
new daum.Postcode({
oncomplete: function (data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if (data.userSelectedType === 'R') {
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if (data.buildingName !== '' && data.apartment === 'Y') {
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if (extraAddr !== '') {
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("tbox4").value = extraAddr;
} else {
document.getElementById("tbox4").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('tbox1').value = data.zonecode;
document.getElementById("tbox2").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("tbox3").focus();
}
}).open();
}
}
</script>
</head>
<body>
<form method="post" onsubmit="return Checks();" action="mailto:dwdw1566@naver.com">
<table border="1" style="border-collapse:collapse; border:1px black solid">
<tr>
<td colspan="2" align="center" bgcolor="#58FAF4"> <b>회원 기본 정보 </b></td>
</tr>
<tr>
<th>아이디:</th>
<td>
<input type="text" id="id" size="20" value=""> 4~12자의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr>
<th>비밀번호: </th>
<td>
<input type="password" id="pw" size="20" value=""> 4~12자의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr>
<th>비밀번호확인:</th>
<td>
<input type="password" id="pw2" size="20" value="">
</td>
</tr>
<tr>
<th>메일주소:</th>
<td><input type="text" id="email" size="30" value="">예) id@domain.com</td>
</tr>
<tr>
<th>이름:</th>
<td><input type="text" id="name" size="30" value=""></td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#FE2EF7"><b>개인 신상 정보</b></td>
</tr>
<tr>
<td>주소</td> <!-- zip코드 입력-->
<td><input type="text" id="tbox1" placeholder="우편번호" size=8>
<input type="button" onclick="addrFind()" value="우편번호 찾기"><br>
<input type="text" id="tbox2" placeholder="주소" size=28><br>
<input type="text" id="tbox4" placeholder="참고항목" size=28>
<input type="text" id="tbox3" placeholder="상세주소">
</td>
</tr>
<tr>
<th>주민등록번호:</th>
<td><input type="text" id="jumin" size=15 minlength=13 maxlength=13> 예) 1234561234567</td>
</tr>
<tr>
<th>생일:</th>
<td>
<input type="text" id="birth" name="년" size="5">년
<select id="month" name="월">
<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 id="day" name="일">
<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="16">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>
<th>관심분야:</th>
<td>
<input type="checkbox" name="favorite" value="컴퓨터">컴퓨터
<input type="checkbox" name="favorite" value="인터넷">인터넷
<input type="checkbox" name="favorite" value="여행">여행
<input type="checkbox" name="favorite" value="영화감상">영화감상
<input type="checkbox" name="favorite" value="음악감상">음악감상
</td>
</tr>
<tr>
<th>자기소개:</th>
<td><textarea id="introduce" cols="60" rows="5"></textarea></td>
</tr>
</table>
<br>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote></blockquote>
<input type="submit" value="회원가입">
<input type="reset" value="다시입력">
</form>
</body>
</html>'HTML' 카테고리의 다른 글
| HTML Day1 (0) | 2021.03.01 |
|---|---|
| HTML 실습 : 자바스크립트 (0) | 2021.02.26 |
'HTML' Related Articles
more
