JavaScript/바닐라.js
회원가입 페이지 만들기 (정규표현식 미사용)
충 민
2022. 9. 14. 17:05
[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] 정규표현식 미사용
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;
};
if(userid.value.length<4 || userid.value.length>12){
alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해야 합다.");
userid.focus();
return false;
}
else{ //4-12글자이면
for(var i=0;i<userid.value.length;i++){
if(userid.value.charCodeAt(i)>=65 && userid.value.charCodeAt(i)<=90){ //영대문자
cnt++;
}
else if(userid.value.charCodeAt(i)>=97 && userid.value.charCodeAt(i)<=122){ //영소문자
cnt++;
}
else if(userid.value.charCodeAt(i)>=48 && userid.value.charCodeAt(i)<=57){ //숫자
cnt++;
}
}
if(userid.value.length != cnt){
alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니.");
userid.focus();
return false;
}
cnt=0;
}
//=========================비밀번호===============================
if(pw.value.length<4 || pw.value.length>12){
alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.");
userid.focus();
return false;
}
else{ //4-12글자이면
for(var i=0;i<pw.value.length;i++){
if(pw.value.charCodeAt(i)>=65 && pw.value.charCodeAt(i)<=90){ //영대문자
cnt++;
}
else if(pw.value.charCodeAt(i)>=97 && pw.value.charCodeAt(i)<=122){ //영소문자
cnt++;
}
else if(pw.value.charCodeAt(i)>=48 && pw.value.charCodeAt(i)<=57){ //숫자
cnt++;
}
}
if(pw.value.length != cnt){
alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.");
pw.focus();
return false;
}
cnt=0;
}
if(userid.value == pw.value){
alert("!아이디와 비밀번호가 일치합니다!");
pw.focus();
return false;
}
if (repw.value !== pw.value) {
alert("!비밀번호가 일치하지 않습니다!");
repw.focus();
return false;
}
if(!username.value.length>=2){
alert("!이름 두 글자 이상 입력!");
username.focus();
return false;
}
if (username.value == "") {
alert("!이름을 입력하세요!");
username.focus();
return false;
};
if(useremail.value==""){
alert("!이메일 주소를 입력하세요!");
useremail.focus();
return false;
}
var semail=[];
semail = useremail.value.split("@");
if(semail.length !== 2){
alert("!이메일 형식이 올바르지 않습니다!");
useremail.focus();
return false;
}
else{
for(var i=0;i<semail[0].value.length;i++){
if(semail[0].charCodeAt(i)>=65 && semail[0].charCodeAt(i)<=90){ //영대문자
cnt++;
}
else if(semail[0].charCodeAt(i)>=97 && semail[0].charCodeAt(i)<=122){ //영소문자
cnt++;
}
else if(semail[0].charCodeAt(i)>=48 && semail[0].charCodeAt(i)<=57){ //숫자
cnt++;
}
}
if(semail[0].length != cnt){
alert("이메일 형식이 올바르지 않습니다");
useremail.focus();
return false;
}
cnt=0;
}
if(birth.value.length <4){
alert("생년 4자리를 입력해 주세요");
return false;
}else{
cnt = 0;
for(var i=0; i<birth.value.length;i++){
if(birth.value.charCodeAt(i) >= 48 && birth.value.charCodeAt(i) <= 57){
cnt++;
}
}
if(birth.value.length != cnt){
alert("!숫자만 입력가능!");
return false;
}
}
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();
}