정규식을 사용해서 유효성 검사를 진행했다...
나는 http부분의 input에 있는 pattern을 사용하여 정규식을 사용해서 검사를 진행했다.
<html>
<head>
<title>과제 1</title>
<script>
function check(){
var id = document.getElementById("id");
var pw=document.getElementById("pw");
var pwCheck=document.getElementById("pwCheck");
if(id.value==pw.value){
alert("아이디와 비밀번호가 같습니다");
pw.value="";
return false;
}
if(pw.value==pwCheck.value){
}else{
alert("비밀번호가 일치하지 않습니다");
pwCheck.value="";
pw.value="";
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>
<!-- 영문 대소문자 숫자로만 입력 정규식에는 글자제한수 안넣음 대신 maxlength minlength로 대체 이유: 그게더 깔끔해 보였다 -->
<td bgcolor="gray"><b>아이디:</b></td>
<td><input type="text" id="id" name="id" value="" pattern="^[a-zA-Z0-9]+$" 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="" pattern="^[a-zA-Z0-9]+$" 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="" pattern="^[a-zA-Z0-9]+$" size="15" maxlength="12" minlength="4" required></td>
</tr>
<tr>
<!-- 이메일 형식 입력 ㅁㄴㅇㅁㅇ.@ㅁㄴㅇㅇ.com net 등 이 .뒤에 글자수가 2개이상 6개이하로 밖에 안들어고 그이상의 경우는 없다고 판단해서 제한을 둠-->
<td bgcolor="gray"><b>메일주소:</b></td>
<td><input type="email" name="email" value="" size="40" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,6}$" required>예)id@domain.com</td>
</tr>
<tr>
<td bgcolor="gray"><b>이름:</b></td>
<!--알파벳 2자리이상이거나 한글은 자음모음이 합쳐진 완벽한 글자가 2자이상이어야함 ㅑㅑㅑ ㄱㄱㄱ이딴것은 안됨 + 알파벳 과 한글 같이 못씀 -->
<td><input type="text" name="myName" pattern="^[a-zA-Z]{2,}|[가-힣]{2,}$" value="" size="40" required></td>
</tr>
<tr bgcolor="steelblue" >
<p ><td colspan = "2" align = "center"><b>개인 신상 정보</b></td></p>
</tr>
<tr>
<td bgcolor="gray"><b>생일:</b></td>
<!-- 생년월일 년도는 년이니깐 4자로 제한 숫자만 입력가능하게함 0000년부터 가능함 하나님의 태초를 믿기때문 -->
<td><input type="text" name="year" value="" oninvalid="this.setCustomValidity('년도형식에 맞춰 작성')" onchange="this.setCustomValidity('')" pattern="^[0-9]{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' 카테고리의 다른 글
| 유효성검사(비정규식) (0) | 2022.09.14 |
|---|---|
| 웹 간단 계산기 만들기 (0) | 2022.09.13 |
댓글