정리
/^ 내용 $/ -> 기본 틀
^ -> 문자열 시작
$ -> 문자열 끝
- -> 범위
[] -> 문자 집합
[a-z] -> 소문자 a부터 소문자 z까지의 알파벳 사용 가능
[A-Z] -> 대문자 A부터 대문자 Z까지의 알파벳 사용 가능
[abc] -> 소문자 알파벳 a, b, c 중에서만 사용 가능
[a-zA-Z0-9] -> 알파벳(소문자, 대문자)와 숫자 (0~9) 까지 중에서 사용 가능
{} -> 반복
a{3} -> aaa
a{2,4} -> aa 혹은 aaa 혹은 aaaa 만 가능
a{3,} -> aaa 이상 (aaaa, aaaaa, aaaaaa, ...)
아이디 (4~12자의 영문 대소문자와 숫자로만 입력)
- html코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="test.js"></script>
</head>
<body>
<a>id</a>
<input type="text" id="userId">4~12자의 영문 대소문자와 숫자로만 입력
<br>
<input type="button" id="check" value="유효성검사체크">
</body>
</html>- javascript 코드
function checkId() {
var userId = document.getElementById("userId").value.trim();
var idRegex = /^[a-zA-Z0-9]{4,12}$/;
if(!idRegex.test(userId)) {
alert("error");
return false;
}
else {
alert("good~");
}
return true;
}
document.addEventListener("DOMContentLoaded", ()=> {
const check = document.getElementById("check");
check.addEventListener("click", () => {
checkId();
})
})이메일 유효성검사
- html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="test.js"></script>
</head>
<body>
<a>email</a>
<input type="text" id="email">ex: heegon@internet.com
<br>
<input type="button" id="check" value="유효성검사체크">
</body>
</html>- 자바스크립트 코드
function checkId() {
var email = document.getElementById("email").value.trim();
var idRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/;
if(!idRegex.test(email)) {
alert("error");
return false;
}
else {
alert("good~");
}
return true;
}
document.addEventListener("DOMContentLoaded", ()=> {
const check = document.getElementById("check");
check.addEventListener("click", () => {
checkId();
})
})
❤️