728x90
정규 표현식 (Regular expression) 테스트 해보기
/** 정규 표현식 (Regular expression)
* id : 소문자로 시작하는 소문자 + 숫자 조합 6 ~ 20자리
* pw : 영어 + 숫자 조합 8 ~ 16자리
* password : 영어 + 숫자 + 특수문자 조합 8 ~ 16자리
* phone : 010 으로 시작하는 핸드폰 번호 - (-) 하이픈 없이
* phone- : 핸드폰 번호 3, 4, 4 (-) 하이픈 포함
* email : 이메일
* 한글 : 한글만 입력가능
*/
function isRegular(asValue, type) {
let regExp = '';
type == 'id' ? regExp = /^[a-z]{1}[a-z0-9]{5,19}$/g : 0;
type == 'pw' ? regExp = /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z\d]{8,16}$/ : 0;
type == 'password' ? regExp = /^(?=.*[a-zA-z])(?=.*\d)(?=.*[@#$%^&+=!])(?!.*\s).{8,16}$/ : 0;
type == 'phone' ? regExp = /^010\d{8}$/ : 0;
type == 'phone-' ? regExp = /^\d{3}-\d{4}-\d{4}$/ : 0;
type == 'email' ? regExp = /^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/ : 0;
type == '한글' ? regExp = /^[가-힣]+$/ : 0;
return regExp.test(asValue);
}isRegular에 asValue와 type를 넣습니다.
asValue는 값이고 type은 id나 pw같은걸 넣어줍니다.
정규 표현식을 거쳐서 통과되면 true 안되면 false를 반환합니다.
필요 없는 부분은 지우고 사용하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>정규 표현식</title>
<style>
.div_regular_expression {
width: 70%;
margin: auto;
text-align: center;
background-color: #c2c2c2;
}
.div_regular_expression input {
width: 95%;
height: 36px;
margin: 4px 0;
font-size: 16px;
display: inline-block;
}
.div_regular_expression button {
background-color: #007BFF;
color: white;
border: none;
width: 95%;
height: 36px;
font-size: 16px;
margin: 4px 0;
border-radius: 4px;
}
.div_regular_expression button:hover {
background-color: #0056b3;
}
.div_regular_expression button:active {
background-color: #003a80;
}
</style>
</head>
<body>
<div class="div_regular_expression">
<input type="text" id="in_id" spellcheck="false" placeholder="아이디를 입력하세요 [6 ~ 20자리]">
<button id="btn_id">확인</button>
<p id="p_id"><br></p>
<input type="text" id="in_pw" spellcheck="false" placeholder="비밀번호를 입력하세요 (영문 + 숫자) [8 ~ 16자리]">
<button id="btn_pw">확인</button>
<p id="p_pw"><br></p>
<input type="text" id="in_password" spellcheck="false" placeholder="비밀번호를 입력하세요 (영문 + 숫자 + 특수문자) [8 ~ 16자리]">
<button id="btn_password">확인</button>
<p id="p_password"><br></p>
<input type="text" id="in_phone" spellcheck="false" placeholder="핸드폰 번호를 입력하세요 (010으로 시작 (-) 하이픈 없이) 01012345678">
<button id="btn_phone">확인</button>
<p id="p_phone"><br></p>
<input type="text" id="in_phone-" spellcheck="false" placeholder="핸드폰 번호를 입력하세요 (하이픈 포함) 000-0000-0000">
<button id="btn_phone-">확인</button>
<p id="p_phone-"><br></p>
<input type="text" id="in_email" spellcheck="false" placeholder="이메일을 입력하세요">
<button id="btn_email">확인</button>
<p id="p_email"><br></p>
<input type="text" id="in_한글" spellcheck="false" placeholder="한글을 입력하세요">
<button id="btn_한글">확인</button>
<p id="p_한글"><br></p>
</div>
<script>
/** 정규 표현식 (Regular expression)
* id : 소문자로 시작하는 소문자 + 숫자 조합 6 ~ 20자리
* pw : 영어 + 숫자 조합 8 ~ 16자리
* password : 영어 + 숫자 + 특수문자 조합 8 ~ 16자리
* phone : 010 으로 시작하는 핸드폰 번호 - (-) 하이픈 없이
* phone- : 핸드폰 번호 3, 4, 4 (-) 하이픈 포함
* email : 이메일
* 한글 : 한글만 입력가능
*/
function isRegular(asValue, type) {
let regExp = '';
type == 'id' ? regExp = /^[a-z]{1}[a-z0-9]{5,19}$/g : 0;
type == 'pw' ? regExp = /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z\d]{8,16}$/ : 0;
type == 'password' ? regExp = /^(?=.*[a-zA-z])(?=.*\d)(?=.*[@#$%^&+=!])(?!.*\s).{8,16}$/ : 0;
type == 'phone' ? regExp = /^010\d{8}$/ : 0;
type == 'phone-' ? regExp = /^\d{3}-\d{4}-\d{4}$/ : 0;
type == 'email' ? regExp = /^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/ : 0;
type == '한글' ? regExp = /^[가-힣]+$/ : 0;
return regExp.test(asValue);
}
function regular_expression(type) {
let message = '';
let value = document.getElementById('in_'+type).value;
let p = document.getElementById('p_'+type);
isRegular(value, type) ? message = '사용 가능합니다' : message = '다시입력해주세요';
message += ' 글자수 : '+value.length;
p.innerText = message;
}
document.getElementById('btn_id').addEventListener('click', () => regular_expression('id'));
document.getElementById('btn_pw').addEventListener('click', () => regular_expression('pw'));
document.getElementById('btn_password').addEventListener('click', () => regular_expression('password'));
document.getElementById('btn_phone').addEventListener('click', () => regular_expression('phone'));
document.getElementById('btn_phone-').addEventListener('click', () => regular_expression('phone-'));
document.getElementById('btn_email').addEventListener('click', () => regular_expression('email'));
document.getElementById('btn_한글').addEventListener('click', () => regular_expression('한글'));
</script>
</body>
</html>html코드입니다.
728x90
'javascript' 카테고리의 다른 글
| 데이터 포맷의 종류와 자바스크립트로 접근 방법 (0) | 2023.10.06 |
|---|---|
| 자바스크립트(Javascript)로 폴더 업로드해서 목록 나열하기 (0) | 2023.10.06 |
| 자바스크립트(javascript) 클래스(Class) 알아보기 (0) | 2023.10.01 |
| 자바스크립트(Javascript) 변수 기본 (1) | 2023.10.01 |
| 자바스크립트로 프로그레스바 만들기 (0) | 2023.09.02 |