고래씌
[JavaScript] 13. 정규표현식을 활용한 회원가입 폼 - 실습문제 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13_정규표현식을 활용한 회원가입폼</title>
<style>
form{
border : 1px solid lightgray;
padding : 20px;
}
label{
color: gray;
font-size: 10px;
}
</style>
</head>
<body>
<br>
<form action="insert.me">
* 아이디 :
<input type="text" name="userId" id="userId"> <br>
<label>첫글자는 반드시 영문자로, 그리고 영문자, 숫자를 포함하여 총 4~12글자 입력하시오</label>
<br><br>
* 비밀번호 :
<input type="password" name="userPwd1" id="userPwd1"> <br>
<label>영문자, 숫자, 특수문자(!@#$%^) 총 8~15글자로 입력하시오.</label>
<br><br>
* 비밀번호 확인 :
<input type="password" name="userPwd2" id="userPwd2"> <br>
<label>위의 비밀번호와 일치하게 입력하시오.</label><br><br>
* 이름 :
<input type="text" name="userName" id="userName"> <br>
<label>한글로만 작성해야하며 2글자 이상으로 입력하시오</label><br><br>
* 이메일 :
<input type="email" name="email" id="email"> <br>
<label>이메일 형식에 맞춰서 입력하시오</label><br><br>
* 취미 :
<input type="text" name="hobby" id="hobby" placeholder="축구, 농구, 야구, 독서 등" list="hobbyList"> <br>
<datalist id="hobbyList">
<option>축구</option>
<option>야구</option>
<option>농구</option>
<option>독서</option>
</datalist>
* 거주지 :
<select name="address" id="address">
<option value="">선택안함</option>
<option>서울</option>
<option>부산</option>
<option>경기</option>
<option>인천</option>
</select>
<br><br>
<input type="submit" value="회원가입" onclick="return vaildate();">
<input type="reset" id="reset" value="취소">
</form>
<script>
function vaildate() {
// 1) 아이디 검사
let regExp = /^[a-z][a-zA-Z0-9]{3,11}$/i;
if(!regExp.test(userId.value)) {
alert("유효한 아이디를 입력해주세요.");
userId.select();
return false;
}
// 2) 비밀번호 검사
regExp = /^[a-z0-9!@#$%^]{8,15}/i;
if(!regExp.test(userPwd1.value)){
alert("유효한 비밀번호를 입력해주세요");
userPwd1.value = "";
userPwd1.focus();
return false;
}
// 3) 비밀번호 일치여부 검사
if(userPwd1.value != userPwd2.value){
alert("동일한 비밀번호를 입력해주세요.");
userPwd2.value = "";
userPwd2.focus();
return false;
}
// 4) 이름 검사
// 한글로만 작성해야하며 2글자 이상으로 입력하시오
regExp = /^[가-힣]{2,}$/;
if(!regExp.test(userName.value)){
alert("유효한 이름을 입력해주세요");
userName.select();
return false;
}
// 5) 값 입력검사(최소한 1글자이상 다 입력해야 회원가입이 가능하게끔)
if(email.value.length == 0 || hobby.value.length == 0 || address.value.length == 0) {
alert("필수 입력요소를 모두 입력해주세요.");
return false;
}
alert("성공적으로 회원가입이 되셨습니다.");
// 위 5가지 조건을 모두 만족한다면 회원가입 성공 메세지 출력 후 insert.me로 이동
return true;
}
</script>
</body>
</html>
'Front-End > JavaScript' 카테고리의 다른 글
[JavaScript] 12. 정규표현식 (0) | 2023.11.14 |
---|---|
[JavaScript] 함수_구매정보 검색 실습문제 (0) | 2023.11.13 |
[JavaScript] 11. 이벤트(addEventListener, mouseenter.. 등) (0) | 2023.11.13 |
[JavaScript] 10. window 객체 (0) | 2023.11.13 |
[JavaScript] 회원가입 - 실습문제3 (0) | 2023.11.10 |