s01_regular.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규표현식</title>
<script type="text/javascript">
/*
정규표현식(regular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해서 사용하는 형식언어(formal language)이다.
*/
window.onload = function(){
const form = document.getElementById('register_form');
//이벤트 연결
form.onsubmit = function(){
const phone = document.getElementById('phone');
/*
/패턴/ -> /(시작) 패턴 /(끝)
^ 패턴의 시작
\\d : 숫자
{3} : 3번 반복
$ 패턴의 끝
*/
//test(문자열) : 정규표현식이 매개변수로 전달된 문자열과 패턴 일치하면 true, 불일치하면 false 인 test메서드
//슬레쉬 안에 값들은 객체로 인식함
if(!/^\\d{3}-\\d{4}-\\d{4}$/.test(phone.value)){//불일치하면 if블럭으로 들어와야되기 때문에 앞에 !를 써준다.
alert('000-0000-0000 형식으로 입력하세요!');
phone.value ='';
phone.focus();
return false; //submit이기 때문에 false를 써준다.
}
};
};
</script>
</head>
<body>
<h3>정규표현식</h3>
<form id="register_form" action="a.jsp" method="post">
<ul>
<li>
<label for="phone">휴대폰</label>
<input type="text" name="phone" id="phone">
(000-0000-0000 형식으로 입력)
</li>
</ul>
<div>
<input type="submit" value="전송">
</div>
</form>
</body>
</html>
s02_regular.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규표현식</title>
<script type="text/javascript">
window.onload = function(){
const form = document.getElementById('register_form');
//이벤트 연결
form.onsubmit = function(){
const phone = document.getElementById('phone');
/*
/패턴/ -> /(시작) 패턴 /(끝)
^ 패턴의 시작
[] '[' 와 ']' 사이의 문자들과 매치라는 의미
[]안의 문자 사이에 하이폰(-)을 사용하게 되면 문자 사이의 범위(From-To)를 의미
[0-9]: ->[0123456789]와 같은 의미
{11} : 11번 반복
$ 패턴의 끝
*/
//match : test보다 느림, 일치하면 검색 데이터를 반환, 불일치 null 반환
if(!phone.value.match(/^[0-9]{11}$/)){
alert('11자리 숫자만 입력가능');
phone.value = '';
phone.focus();
return false;
}
};
};
</script>
</head>
<body>
<h3>정규표현식</h3>
<form id="register_form" action="a.jsp" method="post">
<ul>
<li><label for="phone">휴대폰</label>
<input type="text" name="phone" id="phone"> (-없이 입력)</li>
</ul>
<div>
<input type="submit" value="전송">
</div>
</form>
</body>
</html>
s03_regular.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규표현식</title>
<script type="text/javascript">
window.onload = function(){
const form = document.getElementById('register_form');
//이벤트 연결
form.onsubmit = function(){
const id = document.getElementById('id');
/*
/패턴/ -> /(시작) 패턴 /(끝)
^ 패턴의 시작
[] '[' 와 ']' 사이의 문자들과 매치라는 의미
[A-Za-z0-9] -> A~Z,a~z,0~9
{4~12} 반복횟수가 4부터 12까지
$ 패턴의 끝
*/
if(!/^[A-Za-z0-9]{4,12}$/.test(id.value)){
alert('영문 또는 숫자 사용, 최소4자~최대 12자를 사용하세요');
id.value='';
id.focus();
return false;
}
};
};
</script>
</head>
<body>
<h3>정규표현식</h3>
<form id="register_form" action="a.jsp" method="post">
<ul>
<li><label for="id">아이디</label>
<input type="text" name="id" id="id"> (영문 또는 숫자 사용, 최소 4자 ~최대 12자)</li>
</ul>
<div>
<input type="submit" value="전송">
</div>
</form>
</body>
</html>
