WEB/JavaScript
[JS] 자바스크립트 유효성 검사
다콩잉
2022. 9. 14. 10:55
ver1. 정규표현식 사용 X
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td {
border: 0.5px solid skyblue;
}
</style>
</head>
<body>
<form action="mailto: iwebgenie@gmail.com?subject=안녕하세요">
<table align ="center">
<tr align ="center" bgcolor="skyblue">
<td colspan = "3"><b>회원 기본 정보</b></td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">아이디:</td>
<td><input id="id" type="text" minlength="4" maxlength="12" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">비밀번호:</td>
<td><input id="password1" type="password" minlength="4" maxlength="12" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">비밀번호확인:</td>
<td><input id="password2" type="password" minlength="4" maxlength="12" required></td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">메일주소:</td>
<td><input id="email" type="email" required> 예) id@domain.com</td>
</tr>
<tr align ="center" bgcolor="skyblue">
<td colspan = "3"><b>개인 신상 정보</b></td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">생일:</td>
<td>
<input type="text" id="birth" minlength="4" maxlength="4" required>년
<select name="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="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="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 align ="center" bgcolor="Silver" required>관심분야:</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 align ="center" bgcolor="Silver">자기소개:</td>
<td><textarea name="my" id="area" cols="60" rows="7" required></textarea></td>
</tr>
</table>
<br>
<div align="center">
<input type="button" value="회원가입" onclick="sub(this)">
<input type="reset" value="다시입력">
</div>
</form>
<script src="index.js"></script>
</body>
</html>
var arr = [];
var i = 0;
for(var j = 48; j < 58; j++){
arr[i++] = j;
}
for(var j = 65; j < 91; j++){
arr[i++] = j;
}
for(var j = 97; j < 124; j++){
arr[i++] = j;
}
function sub(self){
// ----------아이디----------
var id = document.querySelector("#id");
var value = id.value;
var idArr = value.split("");
if(idArr.length > 12 || idArr.length < 4){
alert("아이디는 4~12자로 입력해주세요.");
return;
}
if(check(idArr, "아이디") == false){ return }
// ----------비밀번호----------
var password1 = document.querySelector("#password1");
value = password1.value;
idArr = value.split("");
if(idArr.length > 12 || idArr.length < 4){
alert("비밀번호는 4~12자로 입력해주세요.");
return;
}
if(check(idArr, "비밀번호") == false){ return }
// ----------비밀번호 확인----------
var password2 = document.querySelector("#password2");
if(value != password2.value){
alert("일치하지 않는 비밀번호 입니다.");
return;
}
// ----------이메일----------
var email = document.querySelector("#email");
idArr = email.value.split("@");
if(idArr.length != 2){
alert("이메일 형식에 맞지 않습니다.");
return
}else{
var first = idArr[0].split("");
if(check(first, "이메일") == false){ return }
idArr = idArr[1].split(".");
if(idArr.length != 2){
alert("이메일 형식에 맞지 않습니다.");
return
}else{
if(idArr[0] == ""){
alert("이메일 형식에 맞지 않습니다.");
return
}else{
var second = idArr[0].split("");
if(check2(second, "이메일") == false){ return }
var third = idArr[1].split("");
if(check2(third, "이메일") == false){ return }
}
}
}
// ----------생일----------
var birth = document.querySelector("#birth");
if(birth.value.length != 4){
alert("년도는 4글자 숫자로 작성해주세요."); return;
}
idArr = birth.value.split("");
var j = 0;
var ascArr = []; // 숫자 아스키코드
for(var i = 48; i < 58; i++){
ascArr[j] = i;
j++;
}
if(check(idArr, "년도") == false){ return }
// ----------관심분야----------
var inter = document.getElementsByName("inter");
var count = 0;
for(var i = 0; i < inter.length; i++){
if(inter[i].checked){ count++; }
}
if(count == 0){ alert("관심분야를 체크해주세요."); return;}
// ----------자기소개----------
var area = document.querySelector("#area");
if(area.value.length < 11){
alert("자기소개는 10글자 이상 작성해주세요."); return;
}
location.href = "mailto: iwebgenie@gmail.com?subject=안녕하세요";
}
function check(idArr, str){
for(var i = 0 ; i < idArr.length; i++){
var asc = idArr[i].charCodeAt(0);
if(arr.indexOf(asc) == -1){
alert(str + "형식에 맞지 않습니다.");
return false;
}
}
}
function check2(idArr, str){
var j = 0;
var arr2 = []; // 영어
for(var i = 65; i < 91; i++){
arr2[j] = i;
j++;
}
for(var i = 97; i < 123; i++){
arr2[j] = i;
j++;
}
for(var i = 0 ; i < idArr.length; i++){
var asc = idArr[i].charCodeAt(0);
if(arr2.indexOf(asc) == -1){
alert(str + "형식에 맞지 않습니다.");
return false;
}
}
}
ver2. 정규표현식 사용 O
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td {
border: 0.5px solid skyblue;
}
</style>
</head>
<body>
<form action="mailto: iwebgenie@gmail.com?subject=안녕하세요">
<table align ="center">
<tr align ="center" bgcolor="skyblue">
<td colspan = "3"><b>회원 기본 정보</b></td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">아이디:</td>
<td><input id="id" type="text" minlength="4" maxlength="12" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">비밀번호:</td>
<td><input id="password1" type="password" minlength="4" maxlength="12" required> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">비밀번호확인:</td>
<td><input id="password2" type="password" minlength="4" maxlength="12" required></td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">메일주소:</td>
<td><input id="email" type="email" required> 예) id@domain.com</td>
</tr>
<tr align ="center" bgcolor="skyblue">
<td colspan = "3"><b>개인 신상 정보</b></td>
</tr>
<tr>
<td align ="center" bgcolor="Silver">생일:</td>
<td>
<input type="text" id="birth" minlength="4" maxlength="4" required>년
<select name="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="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="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 align ="center" bgcolor="Silver" required>관심분야:</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 align ="center" bgcolor="Silver">자기소개:</td>
<td><textarea name="my" id="area" cols="60" rows="7" required></textarea></td>
</tr>
</table>
<br>
<div align="center">
<input type="button" value="회원가입" onclick="sub(this)">
<input type="reset" value="다시입력">
</div>
</form>
<script src="regular.js"></script>
</body>
</html>
function sub(self){
// ----------아이디----------
var id = document.querySelector("#id");
var Regex = new RegExp(/^[a-zA-Z0-9]{4,12}$/);
var result = Regex.test(id.value);
if(result == false){
alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해주세요.");
return
}
// ----------비밀번호----------
var pass1 = document.querySelector("#password1");
result = Regex.test(pass1.value);
if(result == false){
alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해주세요.");
return
}
// ----------비밀번호확인----------
var pass2 = document.querySelector("#password2");
if(pass1.value != pass2.value){
alert("일치하지 않는 비밀번호입니다.");
return
}
// ----------이메일----------
var email = document.querySelector("#email");
// /a/i --a 가 있는 문자열, 대소문자 구분 안함
// ?: 0 또는 1개의 문자 매칭, *: 0회 이상 반복
Regex = new RegExp(/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i);
result = Regex.test(email.value);
if(result == false){
alert("이메일 형식에 맞지 않습니다.");
return
}
// ----------생일----------
var birth = document.querySelector("#birth");
Regex = new RegExp(/^[0-9]{4}$/);
result = Regex.test(birth.value);
if(result == false){
alert("년도는 숫자 4자리로만 입력해주세요.");
return
}
// ----------관심분야----------
var inter = document.getElementsByName("inter");
var count = 0;
for(var i = 0; i < inter.length; i++){
if(inter[i].checked){ count++; }
}
if(count == 0){ alert("관심분야를 체크해주세요."); return;}
// ----------자기소개----------
var area = document.querySelector("#area");
if(area.value.length < 11){
alert("자기소개는 10글자 이상 작성해주세요."); return;
}
location.href = "mailto: iwebgenie@gmail.com?subject=안녕하세요";
}728x90