정규식을 사용하면 간단하지만 비정규식으로도 유효성 검사를 진행해봤다..
입력한 글자를 아스키코드로 변환해서 비교하여 검사하였고..
이름같은경우 영문이랑 한글이 중복해서 못쓰게 검사를 진행했다..
그리고 이메일 같은 경우도 .을 동시 반복 불가하며 ac.kr co.kr은 사용 가능하도록 처리 다해놨다.
<html>
<head>
<title>과제 1</title>
<script>
function check(){
var id = document.getElementById("id");
var pw=document.getElementById("pw");
var pwCheck=document.getElementById("pwCheck");
var email=document.getElementById("email");
var name=document.getElementById("name");
var year=document.getElementById("year");
var checkId=[id.value.length];//아이디 유효성검사용
var checkPw=[pw.value.length];//비밀번호 유효성 검사용
var checkName=[name.value.length]//이름 유효성 검사용
//아이디를 아스키 코드로 변환
for(var i=0;i<id.value.length;i++){
checkId[i] = id.value.charCodeAt([i]);
}
//비정규식으로 영문 대소문자 숫자로만 입력 확인
for(var i=0;i<checkId.length;i++){
if( (47<checkId[i] &&checkId[i]<58) || (64<checkId[i]&&checkId[i]<91)|| (96<checkId[i]&&checkId[i]<123) ){
}else{
alert('아이디는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!');
id.value = "";
id.focus();
return false;
}
}
//비밀번호 아스키코드로 변환
for(var i=0;i<pw.value.length;i++){
checkPw[i] = pw.value.charCodeAt([i]);
}
//비정규식으로 비밀번호 영문 대소문자 숫자 입력 확인
for(var i=0;i<checkPw.length;i++){
if( (47<checkPw[i] &&checkPw[i]<58) || (64<checkPw[i]&&checkPw[i]<91)|| (96<checkPw[i]&&checkPw[i]<123) ){
}else{
alert('비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!');
pw.value = "";
pw.focus();
return false;
}
}
if(id.value==pw.value){
alert("아이디와 비밀번호가 같습니다");
pw.value="";
return false;
}
if(pw.value==pwCheck.value){
flag=true;
}else{
alert("비밀번호가 일치하지 않습니다");
pwCheck.value="";
pw.value="";
return false;
}
console.log(email.value);
var checkEmail=[];
checkEmail = email.value.split('@');
//@가 2개이상있었다면
if(checkEmail.length>2){
alert('이메일형식에 맞지않습니다');
console.log("1");
email.value = "";
email.focus();
return false;
}
var frontEm = [checkEmail[0].length];
var backEm = [checkEmail[1].length];
//email에 .이 존재하지 않는다면
if((email.value.indexOf('.'))==-1){
alert('이메일형식에 맞지않습니다');
console.log("1");
email.value = "";
email.focus();
return false;
}
var backEmAll=checkEmail[1].split('.'); // @ 뒤 . 구분
if(backEmAll.length>3){//.이 3개이상이면
alert('이메일형식에 맞지않습니다');
console.log("2");
email.value = "";
email.focus();
return false;
}
for(var i=1;i<backEmAll.length;i++){
if(1<backEmAll[i].length && backEmAll[i].length<7){// .뒤 글씨가 2글자이상 6글자 이하여야함
}else{
alert('이메일형식에 맞지않습니다');
email.value = "";
email.focus();
return false;
}
}
//email @앞부분을 아스키 코드로 변환
for(var i=0;i<checkEmail[0].length;i++){
frontEm[i] = checkEmail[0].charCodeAt([i]);
}
//비정규식으로 email @앞부분을 영문 대소문자 숫자 입력 확인
for(var i=0;i<frontEm.length;i++){
if( (47<frontEm[i] &&frontEm[i]<58) || (64<frontEm[i]&&frontEm[i]<91)|| (96<frontEm[i]&&frontEm[i]<123) ){
}else{
alert('이메일형식에 맞지않습니다');
console.log("4");
email.value = "";
email.focus();
return false;
}
}
//email @뒷부분을 아스키 코드로 변환
for(var i=0;i<checkEmail[1].length;i++){
backEm[i] = checkEmail[1].charCodeAt([i]);
}
//email 뒷부분이 소문자영어 이거나 .을 포함했으면
for(var i=0;i<backEm.length;i++){
if( backEm[i]== 46||(96<backEm[i]&&backEm[i]<123) ){
if(backEm[i]==46 &&backEm[i+1]==46){
alert('이메일형식에 맞지않습니다');
console.log("5");
email.value = "";
email.focus();
return false;
}
}else{
alert('이메일형식에 맞지않습니다');
console.log("6");
email.value = "";
email.focus();
return false;
}
}
//이름을 아스키코드 또는 유니코드로 변환
for(var i=0;i<name.value.length;i++){
checkName[i] = name.value.charCodeAt([i]);
}
//이름 영문 또는 한글 일경우 한글 영어 중복 사용 불가!!!!
for(var i=0;i<checkName.length;i++){
if((64<checkName[i]&&checkName[i]<91)|| (96<checkName[i]&&checkName[i]<123) ){//영어 대소문자
if( i>0 || (i+1)<=checkName.length){ //영어 문자 양옆에 한글이 있으면 형식에 맞지않음
if((45032<=checkName[i-1] &&checkName[i-1]<=55203) || (45032<=checkName[i+1] &&checkName[i+1]<=55203) || (12593<=checkName[i-1] &&checkName[i-1]<=12643)||(12593<=checkName[i+1] &&checkName[i+1]<=12643) ) {
alert('이름은 한글 또는 영문으로만 이루어져 있어야 합니다');
name.value = "";
name.focus();
return false;
}
}
}else if(45032<=checkName[i] &&checkName[i]<=55203){//한글 가~힣
}else{
alert('이름은 한글 또는 영문으로만 이루어져 있어야 합니다');
name.value = "";
name.focus();
return false;
}
}
if(year.value.length==4){//년도 길이가 4
for(var i=0;i<year.value.length;i++){
if((0<=year.value[i]) && (year.value[i]<=9)){ //년도 한글자 한글자가 0~9범위 안에있는지
}else{
year.value = "";
year.focus();
return false;
}
}
}else{
console.log("d")
alert('년도는 0000 형식으로 맞춰주세요');
year.value = "";
year.focus();
return false;
}
}
function hobbyCh(){
var hobby=document.getElementsByName("hobby");
var flag=false;
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked){
flag=true;
}
}
if(flag==false){
alert("관심분야을 1개이상 꼭 선택하세요");
return false;
}
}
</script>
</head>
<body background="backgr.jpg">
<form action="mailto: iwebgenie@gmail.com?subject=안녕하세요" onsubmit="return hobbyCh();">
<audio controls autoplay hidden>
<source src="음악.wav" type="audio/mpeg">
</audio>
<div>
<table border="1" width ="700" height="500" align = "center" >
<tr bgcolor="steelblue" >
<p ><td colspan = "2" align = "center"><b>회원 기본 정보</b></td></p>
</tr>
<tr>
<td bgcolor="gray"><b>아이디:</b></td>
<td><input type="text" id="id" name="id" value="" size="15" maxlength="12" minlength="4" required>4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="gray"><b>비밀번호:</b></td>
<td><input type="password" id="pw" name="pw" value="" size="15" maxlength="12" minlength="4" required>4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="gray"><b>비밀번호확인:</b></td>
<td><input type="password" id="pwCheck" name="pwCheck" value="" size="15" maxlength="12" minlength="4" required></td>
</tr>
<tr>
<td bgcolor="gray"><b>메일주소:</b></td>
<td><input type="email" name="email" id="email"value="" size="40" required>예)id@domain.com</td>
</tr>
<tr>
<td bgcolor="gray"><b>이름:</b></td>
<td><input type="text" name="myName" id="name" value="" size="40" minlength="2" required></td>
</tr>
<tr bgcolor="steelblue" >
<p ><td colspan = "2" align = "center"><b>개인 신상 정보</b></td></p>
</tr>
<tr>
<td bgcolor="gray"><b>생일:</b></td>
<td><input type="text" name="year" id="year" minlength="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>
</td>
</tr>
<tr>
<td bgcolor="gray"><b>관심분야:</b></td>
<td> <input type="checkbox" name="hobby" value="컴퓨터" >컴퓨터
<input type="checkbox" name="hobby" value="인터넷" >인터넷
<input type="checkbox" name="hobby" value="여행" >여행
<input type="checkbox" name="hobby" value="영화감상" >영화감상
<input type="checkbox" name="hobby" value="음악감상" >음악감상
</td>
</tr>
<tr>
<td bgcolor="gray"><b>자기소개:</b></td>
<td><textarea id="intro" name="intro" rows="10" cols="50" required></textarea></td>
</tr>
</table>
</div>
<div align="center">
<input type="submit" onclick="return check();" value="회원 가입">
<input type="reset" value="다시 입력">
</div>
</form>
</body>
</html>'http, css, js' 카테고리의 다른 글
| 유효성 검사(정규식사용) (1) | 2022.09.14 |
|---|---|
| 웹 간단 계산기 만들기 (0) | 2022.09.13 |
댓글