자바스크립트 정규표현식 Regexp ②
- 날짜 입력 조건
TO Do.
목표: 정규식을 활용하여 날짜 입력 조건으로 입사연월일이
올바른 형식이면 입사 축하 메세지를 띄우는 기능을 만들자
[날짜 입력 조건]
1. 연도4자리, 월이나 일은 1자리이거나 2자리로 한다.
ex) 2018-05-24
1. html 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>정규표현식</title>
<script defer src="./regexp_hw_02.js"></script>
</head>
<body>
<div class="wrap">
<label for="date">입사연월일</label>
<input type="text" name="date" id="date">
<input type="button" id="commit" value="commit">
</div>
</body>
</html>
|
cs |
2. JavaScript작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const date = document.querySelector("#date")
const btn = document.querySelector("#commit")
console.log(date)
// (^\d{4}) - 숫자 4개 : 연도
// (0[1-9]|1[0-2]) - '0 다음 1부터 9 사이 값' 또는 '1 다음 0부터 2 사이 값 : 01~12월
// (0[1-9]|[12][0-9]|3[01])$ - '0 다음 1부터 9 사이' 또는 '1 또는 2 다음 0부터 9 사이' 또는 '3 다음 0 또는 1' : 01~31일
const pattern = /(^\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/
console.log(date.value)
btn.addEventListener('click', function() {
if (pattern.test(date.value)) {
alert('입사축하')
} else {
alert('다시입력')
date.value = ''
date.focus()
}
})
|
cs |
다음과 같이 정규식을 작성하였다
/d{4} ---> 4글자 : 연도
(0[1-9]|1[0-2]) ---> '0 다음 1부터 9 사이 값' | '1 다음 0부터 2 사이 값: 01월~12월
(0[1-9]|[12][0-9]|3[01] ---> '0 다음 1부터 9 사이' | '1 또는 2 다음 0부터 9 사이' | '3 다음 0 또는 1'
---> 01일~31일
3. 실행결과
'Language > └JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 정규표현식 Regexp ① - 아이디 입력 조건 | Yoon's Dev (0) | 2021.10.18 |
|---|---|
| [JavaScript] 자바스크립트 이벤트 처리와 DOM의 개념 | Yoon's Dev (0) | 2021.10.17 |
| [JavaScript] 자바스크립트(JavaScript)란? | Yoon's Dev (0) | 2021.05.15 |