728x90
안녕하세요 !
이번 글에서는 HTML에 JS를 이용해서 유효성 검사를 해보도록 하겠습니다 !
유효성 검사를 할때 if문과 같은 조건문을 일일히 써주는 방법도 있지만, 정규 표현식을 사용하게되면 더 간단하게 표현할 수 있습니다.
정규표현식이란? ( Regular Expression, Regex )
일정한 규칙을 가진 문자열을 표현하는 방법입니다.
문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용합니다.
정규표현식을 사용하는 방법은 다음과 같습니다.
/패턴/플래그
이때 정규표현식에 쓸 수 있는 패턴들은 다음과 같습니다.
| 기호 | 설명 | ||
| [ ] | 문자 한 개 | [abc] | a, b, c 중 하나의 문자 |
| [^abc] | a, b, c 이외의 하나의 문자 | ||
| [a-zA-Z] | a~z, A~Z 중 하나의 문자 | ||
| \d | 숫자 한 개, = [0-9] | ||
| \s | 공백 | ||
| \w | 알파벳 또는 숫자 한개, = [a-zA-Z_0-9] | ||
| ? | 없음 또는 한 개 | ||
| * | 없은 또는 한 개 이상 | ||
| + | 한 개 이상 | ||
| {n} | n 개 | ||
| {n,} | 최소한 n 개 | ||
| {n,m} | n ~ m 개 까지, ** 범위 정할때 공백없이 작성해야함 | ||
| () | 그룹핑 | ||
지난 글에서 작성했던 회원가입 작성 HTML 예제에 정규 표현식을 적용해서 유효성 검사를 해보도록 하겠습니다 !
회원가입 작성 HTML은 다음 글을 참고해주세요!
[HTML/CSS] HTML 기초
https://www.w3schools.com/html/default.asp HTML Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. w
preparingforme-n-us.tistory.com
정규표현식을 작성하기전에 유효성 검사를 해야하는 부분들을 먼저 정리해보겠습니다.
- 아이디 : 4~12자리의 영문 대소문자/숫자로 입력
- 비밀번호 : 영문자&숫자&특수문자 조합으로 8~15자리 입력
- 비밀번호 확인 : 위에 입력한 비밀번호와 일치하게 입력
- 이메일 : ~@~.com 형식으로 입력
- 이름 : 2~4글자의 한글로 입력
- 주민등록번호 : 6자리 숫자 - 7자리 숫자 로 입력
- 전화번호 : 3자리 숫자 - 3~4자리 숫자 - 4자리 숫자로 입력
그럼 이제 유효성 검사를 해야하는 양식에 맞춰서 정규표현식을 작성해보겠습니다 !
<html>
<head>
<title>회원가입 유효성 검사 HTML</title>
<script language="javascript">
function isThatRight(){
let inputId = document.getElementById('id');
let inputPw = document.getElementById('pw');
let inputPw2 = document.getElementById('pw2');
let inputEmail = document.getElementById('email');
let inputName = document.getElementById('name');
let inputIdNum = document.getElementById('idNum');
let inputPhone = document.getElementById('phone');
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~12자리인지 검사
let regexrId = /^[a-zA-Z0-9]{4,12}$/;
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 8~15자리인지 검사
let regexrPw = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$/;
// 이메일 형식
let regexrEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
// 이름
let regexrName = /^[가-힣]{2,4}$/
// 주민 번호 형식
let regexrIdNum = /[0-9]{6,6}[-]{1,1}[0-9]{7,7}$/;
// 전화 번호 형식
let regexrPhone = /\d{3}-\d{3,4}-\d{4}/g;
if(inputId.value == ""){
alert('아이디를 입력해주세요.');
return false;
}
if(!regexrId.test(inputId.value)){
alert("아이디는 대소문자 또는 숫자로 시작하고 끝나며 4~12자리로 입력해야합니다.");
return false;
}
if(!regexrPw.test(inputPw.value)){
alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~15자리로 입력해야합니다.");
inputPw.focus();
return false;
}
if (inputPw.value !== inputPw2.value) {
alert('비밀번호가 일치하지 않습니다.');
return false;
}
if(!regexrEmail.test(inputEmail.value)){
alert("이메일이 올바르지 않습니다.");
return false;
}
if(!regexrName.test(inputName.value)){
alert("이름이 올바르지 않습니다.");
return false;
}
if(!regexrIdNum.test(inputIdNum.value)){
alert("주민등록번호가 올바르지 않습니다.");
return false;
}
if(!regexrPhone.test(inputPhone.value)){
alert("핸드폰 번호가 올바르지 않습니다.");
return false;
}
}
</script>
</head>
<body>
<form>
<table width="60%" heigjt="60%" border="1" align="center">
<tr>
<td colspan="3" align="center" bgcolor="#a88fe3">회원 기본 정보</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>아이디 : </b></td>
<td colspan="3"><input type="id" id="id"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>비밀번호 : </b></td>
<td colspan="3"><input type="password" id="pw"> 영문자+숫자+특수문자 조합으로 8~15자리로 입력</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>비밀번호 확인 : </b></td>
<td colspan="3"><input type="password" id="pw2"></td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>메일주소 : </b></td>
<td colspan="3"><input type="email" id="email">예) id@domain.com</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>이름 : </b></td>
<td colspan="3"><input type="name" id="name"></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#a88fe3"><b>개인 신상 정보</b></td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>주민등록번호 : </b></td>
<td colspan="3"><input type="text" id="idNum"> 예) 123456-1234567</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>전화번호 : </b></td>
<td colspan="3"><input type="phone" id="phone"> 예) 010-1234-5678</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>생일 : </b></td>
<td colspan="3"><input type="name">년
<select name="month" id="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" id="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="#dfd8f0"><b>관심분야 : </b></td>
<td colspan="3">
<input type="checkbox" name="tran" value="컴퓨터">컴퓨터
<input type="checkbox" name="tran" value="인터넷">인터넷
<input type="checkbox" name="tran" value="여행">여행
<input type="checkbox" name="tran" value="영화감상">영화감상
<input type="checkbox" name="tran" value="음악감상">음악감상
</td>
</tr>
<tr rowspan="2">
<td align="center" bgcolor="#dfd8f0"><b>자기소개 : </b></td>
<td colspan="3"><textarea name="intro" rows="5" cols="50"></textarea></td>
</tr>
</table><br>
<div align="center">
<button type="button" onclick="return isThatRight();">회원가입</button>
<button type="reset">다시입력</button>
</div>
</form>
</body>
</html>
위 코드와 같이 작성하여 정규표현식을 응용해서 회원가입 양식을 작성할 수 있는 HTML을 만들어보았습니다 !
범위를 정하는 {n,m}을 쓸 때, 공백을 포함하면 안된다는 점을 유의해서 작성해야합니다 !
직접 작성하는 것은 어렵지만 인터넷 검색을 통해 알아보면 원하는 정규 표현식을 쉽게 찾아볼 수 있기 때문에 어떤 식으로 적용하는 지 알아두기만 해도 유용하게 쓸 수 있을 것 같습니다 !
오늘은 이렇게 정규 표현식을 이용해서 유효성 검사를 더 간결하게 작성하는 방법을 알아보았습니다 !
첨부된 코드에서 완성되지 않은 부분들 ( 주민번호 입력 시 생일 자동 입력, 아이디와 비밀번호 일치, 집 주소 입력 등 ) 은 다음 글에서 다뤄보도록 하겠습니다 !
감사합니다.
'HTML > JavaScript' 카테고리의 다른 글
| [ JS / node.js ] 백준 - 1009번 분산처리 (0) | 2024.02.14 |
|---|---|
| [JavaScript] JS 변수 선언 var, let, const 차이점 (36) | 2023.09.21 |
| [JavaScript] 정규표현식을 작성해보자(2) (28) | 2023.09.19 |
| [HTML/CSS/JS] JavaScript를 작성해보자 (2) | 2023.09.15 |
