• 정규식 (regular expression)
1. 문자열이 원하는 패턴으로 구성되어 있는지 확인하기 위한 표현식이다.
2. 정규식 선언 방법
var regExpr = /정규식/;
3. 정규식 처리 메서드
1) String.match(/정규식/)
(1) 원하는 패턴인 경우 : not null 반환
(2) 원하는 패턴이 아닌 경우 : null 반환
2) /정규식/.test(String)
(1) 원하는 패턴인 경우 : true 반환
(2) 원하는 패턴이 아닌 경우 : false 반환
정규식 작성 방법
1. 메타 문자
| . | 모든 문자를 의미한다. |
| a | a를 의미한다. |
| a | b | a또는 b를 의미한다. |
| ^a | a로 시작한다. |
| a$ | a로 끝난다. |
| a* | a를 0번 이상 반복한다. (a가 없어도 좋다.) |
| a+ | a를 1번이상 반복한다. (a가 있어야 한다.) |
| a{n} | a를 n번 반복한다. |
| a{n,} | a를 n번 이상 반복한다. |
| a{n,m} | a를 n번 이상 m번 이하 반복한다. |
2. 문자 클래스 [ ]안에있는건 문자로 인식해라
| [.] | 문자 마침표(.)를 의미한다. |
| [a] | a를 의미한다. |
| [ab] | a 또는 b를 의미한다. |
| ^[a] | a로 시작한다. |
| [a]$ | a로 끝난다. |
| [^a] | a를 제외한다. |
| [0-9] | 숫자를 의미한다. |
| [A-Z] | 대문자를 의미한다. |
| [a-z] | 소문자를 의미한다. |
| [가-힣] | 한글을 의미한다. |
3. 이스케이프
| \d | 숫자를 의미한다. (digit) |
| \D | 숫자가 아니다. |
| \w | 숫지,영문,밑줄를 의미한다. [0-9A-Za-z_] |
| \W | 숫자,영문,밑줄이 아니다. |
ex) 핸드폰 번호 검사 예제
html
<div>
<h1>핸드폰 번호 검사</h1>
<input type="text" id="mobile">
<input type="button" value="검사" id="btn_mobile_check">
</div>
이벤트 대상 : 검사 버튼
이벤트 타입 : click
이벤트 리스너 : function(){ 입력된 핸드폰 번호 검사 }
<script>
document.getElementById('btn_mobile_check').addEventListener('click', function(){
// 핸드폰 번호 검사 정규식 (010-숫자4개-숫자4개)
var regMobile = /^010-[0-9]{4}-\d{4}$/;
// 입력된 핸드폰 번호
var mobile = document.getElementById('mobile').value;
// 정규식 체크
if(regMobile.test(mobile)){
alert('핸드폰 번호가 맞습니다.');
} else {
alert('핸드폰 번호가 아닙니다.');
}
})
</script>
ex) 날짜 입력하기
html
<div>
<h1>날짜 검사</h1>
<input type="text" id="date">
<input type="button" value="검사" id="btn_date_check">
</div>
script
<script>
// 날짜 형식 yyyy-mm-dd
document.getElementById('btn_date_check').addEventListener('click', function(){
var regDate = / ^ ( 19 [0-9] {2} | 20 [0-9] {2} ) - ( 0 [1-9] | 1 [0-2] ) - (0 [1-9] | [12] [0-9] | 3 [01] ) $ / ;
var date = document.getElementById('date').value;
if(regDate.test(date)){
alert('날짜가 맞습니다.');
} else {
alert('날짜가 틀렸습니다.');
}
})
</script>
ex) 우편번호 검사(submit)
html
<div>
<h1>우편번호 검사</h1>
<form action="#" id="frm_postcode">
<input type="text" id="postcode">
<button type="submit">검사</button>
</form>
</div>
script
<script>
document.getElementById('frm_postcode').addEventListener('submit', function(event){
var postcode = document.getElementById('postcode').value;
var regPost = /^[0-9]{5}$/.test(postcode);
if(!regPost){
alert('우편번호가 틀렸습니다.');
event.preventDefault();
return;
}
})
</script>
ex) 아이디, 비밀번호 검사하기
html아이디
<div>
<h1>아이디 검사하기</h1>
<input type="text" id="id">
<input type="button" value="검사" id="btn_id_check">
</div>
script아이디
<script>
// 아이디 : 4자 이상, 영문자,숫자,-,_로 구성
document.getElementById('btn_id_check').addEventListener('click', function(event){
var regId = /^[A-Za-z0-9-_]{4,}$/;
var id = document.getElementById('id').value;
if(regId.test(id)){
alert('아이디가 맞습니다.');
} else {
alert('아이디가 아닙니다.');
}
})
</script>
html비밀번호
<div>
<h1>비밀번호 검사</h1>
<input type="password" id="pw">
<input type="button" value="검사" id="btn_pw_check">
</div>
script비밀번호
<script>
// 비밀번호 : 8~20자, 영문, 숫자, 특수문자, 2가지 이상 포함
document.getElementById('btn_pw_check').addEventListener('click', function(event){
var pw = document.getElementById('pw').value;
var validPwCount = /[A-Z]/.test(pw) // 대문자가 있으면 true 없으면 false
+ /[a-z]/.test(pw) // 소문자가 있으면 true 없으면 false
+ /[0-9]/.test(pw) // 숫자가 있으면 true 없으면 false
+ /[^A-Za-z0-9]/.test(pw); // 특수문자가 있으면 true 없으면 false
if(pw.length >= 8 && pw.length <= 20 && validPwCount >= 2){
alert('사용 가능한 비밀번호');
} else {
alert('사용 불가능한 비밀번호.');
}
})
</script>
ex) 이메일 검사하기
html
<div>
<h1>이메일 검사</h1>
<input type="text" id="email">
<input type="button" value="검사" id="btn_email_check">
</div>
script
<script>
document.getElementById('btn_email_check').addEventListener('click', function(){
var regEmail = /^[A-Za-z0-9-_]+@[A-Za-z0-9]{2,}([.][A-Za-z]{2,6}){1,2}$/;
var email = document.getElementById('email').value;
if(regEmail.test(email)){
alert('올바른 이메일입니다.');
} else {
alert('잘못된 이메일입니다.');
}
})
</script>
문제. 아이디/비밀번호/비밀번호확인/이메일 입력받아서 서브밋하기 ★★★
html
<div>
<form action="#" id="frm_register">
<div>
<label for="user_id">아이디</label>
<input type="text" id="user_id" autofocus>
</div>
<div>
<label for="user_pw">비밀번호</label>
<input type="password" id="user_pw">
</div>
<div>
<label for="user_pw2">비밀번호 확인</label>
<input type="password" id="user_pw2">
</div>
<div>
<label for="user_email">이메일</label>
<input type="text" id="user_email">
</div>
<div>
<button>양식 제출하기</button>
</div>
</form>
</div>
Css
<style>
label {
display: inline-block;
width: 150px;
}
</style>
script
<script>
document.getElementById('frm_register').addEventListener('submit', function(event){
// 아이디 체크
var regUserId = /^[A-Za-z0-9-_]{4,}$/;
var userId = document.getElementById('user_id').value;
var validUserId = regUserId.test(userId);
if(!validUserId){
alert('올바른 아이디를 입력하세요.');
document.getElementById('user_id').focus();
event.preventDefault();
return;
}
// 비밀번호 체크
var userPw = document.getElementById('user_pw').value;
var userPw2 = document.getElementById('user_pw2').value;
var validUserPwCount = /[A-Z]/.test(pw) // 대문자가 있으면 true
+ /[a-z]/.test(pw) // 소문자가 있으면 true
+ /[0-9]/.test(pw) // 숫자가 있으면 true
+ /[^A-Za-z0-9]/.test(pw); // 특수문자가 있으면 true
if(userPw.length < 8 || userPw.length > 20 || validUserPwCount < 2 || userPw !== userPw2){
alert('올바른 비밀번호를 입력하세요.');
document.getElementById('user_pw').focus();
event.preventDefault();
return;
}
// 이메일 체크
var regUserEmail = /^[A-Za-z0-9-_]+@[A-Za-z0-9]{2,}([.][A-Za-z]{2,6}){1,2}$/;
var userEmail = document.getElementById('user_email').value;
var validUserEmail = regUserEmail.test(userEmail);
if(!validUserEmail){
alert('올바른 이메일을 입력하세요.');
document.getElementById('user_email').focus();
event.preventDefault();
return;
}
})
</script>
'코딩기록 저장소 🐕 > 프론트(리액트, JS)' 카테고리의 다른 글
| 팝업창이어서 (0) | 2023.09.04 |
|---|---|
| JS BOM (0) | 2023.09.01 |
| JS event (0) | 2023.08.31 |
| JS 내장객체, 내장함수 (0) | 2023.08.31 |
| JS object (0) | 2023.08.30 |