728x90
회원가입 폼에서 정규식 활용 및 데이터 유효성 검사하기
🩸이슈 발생
사용자는 개발자가 원하는 형식으로 입력하지 않기 때문에, 회원가입 폼 생성 시 데이터 유효성 검사는 필수사항이다.
▶ 정규식 (Regular Expressions) 이란?
: 주로 회원가입창에서 비밀번호 사용할 때 대문자 섞는 등의 데이터 기준 설정하는 것
(1) 형식
1) var re = /ab+c/;
2) var re = new RegExp("/ab+c/");
(2) 숫자 정규식
^ : 패턴시작
[0-9] : 괄호 안의 숫자로 범위 지정
+ : 앞 문자가 하나 이상
* : 문자 수 상관없음
$ : 패턴종료
728x90
🩹이슈 해결
1. HTML
<body>
<form>
<!-- 아이디 : id
비밀번호 : pw
비밀번호 확인 : checkpw
이메일1 (앞): email1
이메일2 (뒤): email2
이름: name
주민1 : sn1
주민2 : sn2
생일 year, month, day
성별 : gender
관심분야 : interest
자기소개 : self -->
<div class="container">
<h1>회원 가입</h1>
<table border=1>
<tr>
<td colspan=2 class="title">회원기본정보</td>
</tr>
<tr>
<td>아이디</td>
<td><input type="text" name="id" placeholder="※8-16자 소문자+숫자"></td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input type="password" name="pw" placeholder="※8-16자 대문자+소문자+숫자">
</td>
</tr>
<tr>
<td>비밀번호확인</td>
<td><input type="password" name="checkpw"></td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="text" name="email1"> @
<input type="text" name="email2" list="domain" placeholder="직접 입력">
<datalist id="domain">
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="kakao.com">kakao.com</option>
</datalist>
</td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td colspan=2 class="title">개인정보</td>
</tr>
<tr>
<td>주민등록번호</td>
<td>
<input type="text" name="sn1" id="no"> -
<input type="text" name="sn2" id="no"> 예) 123456-1234567
<input type="button" value="확인">
</td>
</tr>
<tr>
<td>생일</td>
<td>
<input type="text" name="year" id="birth" readonly>년
<input type="text" name="month" id="birth" readonly>월
<input type="text" name="day" id="birth" readonly>일
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" name="gender" value="남">남
<input type="radio" name="gender" value="여">여
</td>
</tr>
<tr>
<td>관심분야</td>
<!-- interest 배열 -->
<td>
<input type="checkbox" name="interest" value="여행"> 여행
<input type="checkbox" name="interest" value="영화"> 영화
<input type="checkbox" name="interest" value="독서"> 독서
<input type="checkbox" name="interest" value="음악"> 음악
<input type="checkbox" name="interest" value="관심없음"> 관심없음
</td>
</tr>
<tr>
<td>자기소개</td>
<td><textarea rows="8" cols="50" style="resize: none"></textarea>
</td>
</tr>
</table>
<table class="final">
<tr>
<th>
<input type="submit" class="final" value="회원가입"onclick="validate(this.form);">
</th>
<th><input type="reset" class="final" value="다시입력"></th>
</tr>
</table>
</div>
</form>
</body>2. CSS
h1 {
text-align: center;
margin: auto;
}
.title {
background-color: teal;
color: white;
text-align: center;
font-weight: border;
}
.container {
margin: auto;
width: 800px;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
text-align: left;
}
td {
padding: 5px;
text-align: left;
}
.final {
text-align: center;
background-color: teal;
color: white;
padding: 10px;
width: 80px;
height: 45px;
margin: auto;
}
#birth {
background-color: lightgray;
display: inline-block;
width: 80px;
}
#no {
display: inline-block;
width: 80px;
}
input[type=text], [type=email], [type=password] {
display: inline-block;
width: 200px;
}3. JS
function validate(f) {
//form 객체를 가져오는 코드 작성
// 아이디 정규식
var regId = /^[0-9a-z]{8,16}$/;
// 비밀번호 정규식
var regPw = /^[0-9a-zA-Z]{8,16}$/;
// 성함 정규식
var regName = /^[가-힣]{2,6}$/;
// 이메일 정규식
var regEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
// 주민등록번호 정규식(앞자리)
var regPid1 = /^\d{6}$/;
// 주민등록번호 정규식(뒷자리)
var regPid2 = /^\d{7}$/;
//1. 아이디 체크
if(!regId.exec(f.id.value)){
alert("아이디: 8-16자 소문자+숫자로 작성하세요.");
f.id.focus();
return;
}
//2-1. 비밀번호 체크
if(!regPw.exec(f.pw.value)){
alert("비밀번호: 8-16자 대문자+소문자+숫자로 작성하세요.");
f.pw.value='';
f.pw.focus();
return;
}
//2-2. 비밀번호 확인
if(f.pw.value!=f.checkpw.value){
alert("비밀번호가 일치하지 않습니다.")
f.pw.value='';
f.checkpw.focus();
return;
}
//3. 이메일
var email = f.email1.value +'@'+f.email2.value
if(!regEmail.exec(eamil)){
alert("이메일형식이 올바르지 않습니다.");
f.email1.value='';
f.email2.value='';
f.email1.focus();
return;
}
//4. 이름 체크
if(!regName.exec(f.name.value)){
alert("이름은 2~6자 입니다.");
f.name.value='';
f.name.focus();
return;
}
//5. 주민등록번호 체크
if(!regPid1.exec(f.sn1.value)){
alert("주민등록번호 앞자리 숫자 6자리");
return;
} else if(!regPid2.exec(f.sn2.value)){
alert("주민등록번호 뒷자리 숫자 7자리");
return;
}
//6. 관심분야 체크
var int_cnt = 0;
for (var i = 0; i < f.interest.length; i++) {
if (f.interest[i].checked) {
int_cnt++;
}
}
if (int_cnt == 0) {
alert("관심분야를 1개이상 체크해주세요.");
return;
}
//7. 자기소개 체크
f.submit();
}💡유의사항
생일 입력은 입력한 주민등록번호의 데이터를 가져오기 위해 read only 처리했다.
300x250
'CODING > ⚡JavaScript' 카테고리의 다른 글
| [JS] 전화번호 입력 시 자동 하이픈 넣기 (1) | 2023.12.28 |
|---|---|
| [JS] 선택한 메뉴에 active 클래스 주기 (0) | 2023.12.18 |
| [JS] 모바일 메뉴 햄버거 버튼 만들기 (0) | 2023.10.10 |
| [JS] 오늘 하루 보지 않기 팝업창 만들기 (0) | 2023.10.04 |
| [JS] BOM(Browser Object Model) 사용하기 (0) | 2023.09.20 |
