JavaScript/바닐라.js
회원가입 페이지 만들기 (정규표현식 사용)
충 민
2022. 9. 14. 17:03
[HTML]
<html>
<head>
<script src="sign.js"> </script>
<style>
.background{
background-image:url("04.jpg");
}
</style>
<title>내가 만든 html문서</title>
<audio controls>
<source src="C:\Program Files (x86)\Kakao\KakaoTalk\resource\sound\group_call_join.wav" type="audio/wav">
</audio>
<body>
<div class="background">
<form method="get" id="form" onsubmit="return check();">
<table border="1">
<table border="1" border=skyblue" width="700" height="500" align="center">
<tr bgcolor="skyblue" align="center">
<p><td colspan="3"span style="color:rgb(0, 0, 0)">회원 기본 정보</td></p>
</tr>
<tr>
<td bgcolor="lightgray" align="center">아이디:</td>
<td><input type="text" id="userid"> 4~12자의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr>
<td bgcolor="lightgray" align="center">비밀번호:</td>
<td><input type="password" id="pw"> 4~12자의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr>
<td bgcolor="lightgray" align="center">비밀번호 확인:</td>
<td><input type="text" id="repw">
</td>
</tr>
<tr>
<td bgcolor="lightgray" align="center">메일주소:</td>
<td><input type="text" size="40" id="useremail"> 예) id@domain.com
</td>
</tr>
<tr>
<td bgcolor="lightgray" align="center">이름:</td>
<td><input type="text" size="40" id="username">
</td>
</tr>
<tr bgcolor="skyblue" align="center">
<p><td colspan="3"span style="color:rgb(0, 0, 0)">개인 신상 정보</td></p>
</tr>
<tr>
<td bgcolor="lightgray" align="center">생일:</td>
<td><input type="text" id="birth">년
<select name="cars" id="cars">
<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="cars" id="cars">
<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>
<td bgcolor="lightgray" align="center">관심분야:</td>
<td><input type="checkbox" name="inter"> 컴퓨터 <input type="checkbox" name="inter"> 인터넷 <input type="checkbox" name="inter"> 여행 <input type="checkbox" name="inter"> 영화감삼 <input type="checkbox"name="inter"> 음악감상
</td>
</tr>
<tr>
<td bgcolor="lightgray">자기소개:</td>
<td><textarea rows="7" cols="60" id="introduce"></textarea>
</td>
</tr>
</table><br><br>
<div align="center">
<button type="button" onclick="check();">회원가입</button>
<button type="reset" value="Reset">다시입력</button></div>
</form>
</div>
</body>
</head>
</html>
[JS]-- 유효성검사 js
function check(){
//변수에 담아주기
var userid = document.getElementById("userid");
var pw = document.getElementById("pw");
var repw = document.getElementById("repw");
var username = document.getElementById("username");
var useremail = document.getElementById("useremail");
var inter = document.getElementsByName("inter");
var introduce = document.getElementById("introduce");
var birth = document.getElementById("birth");
var cnt=0;
if (userid.value == "") {
alert("아이디를 입력하세요.");
userid.focus();
return false;
};
if (pw.value == "") {
alert("비밀번호를 입력하세요.");
pw.focus();
return false;
};
//비밀번호 정규식이용
var pwcheck = /^(?=.*[a-zA-Z0-9]).{4,12}$/;
//이름 정규식이용 두 글자 이상
var namecheck = /^.{2,}$/;
// 이메일 정규식이용 유효성검사
var emailcheck = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
//대문자소문자숫자언더바 + 대문자소문자숫자 +골뱅이한개 +대문자소문자숫자+ dot한개 +대문자소문자 1글자이상 3글자이하
var Regex =/^[0-9]{4}$/;
if (!pwcheck.test(userid.value)) {
alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.");
userid.focus();
return false;
};
if (!pwcheck.test(pw.value)) {
alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.");
pw.focus();
return false;
};
if(userid.value == pw.value){
alert("!아이디와 비밀번호가 일치합니다!");
pw.focus();
return false;
}
if (repw.value !== pw.value) {
alert("!비밀번호가 일치하지 않습니다!");
repw.focus();
return false;
}
if(!namecheck.test(username.value)){
alert("!이름 두 글자 이상 입력!");
username.focus();
return false;
}
if(useremail.value==""){
alert("!이메일 주소를 입력하세요!");
useremail.focus();
return false;
}
if(!emailcheck.test(useremail.value)){
alert("!이메일 형식이 올바르지 않습니다!");
useremail.focus();
return false;
}
if(!Regex.test(birth.value)){
alert("!년도는 숫자 4자리로만 입력해주세요!");
return
}
var count = 0;
for(var i = 0; i < inter.length; i++){
if(inter[i].checked){ count++; }
}
if(count == 0){ alert("!관심분야를 체크해주세요!"); return;}
if(introduce.value.length<11){
alert("!자기소개는 10글자 이상 입력해주세요!");
return false;
}
form.action = "mailto: iwebgenie@gmail.com?subject=안녕하세요";
form.mothod = "GET";
form.submit();
}