자바스크립트 정규표현식 Regexp ①
- 아이디 입력 조건
TO Do.
목표: 정규식을 활용하여 아이디 입력 조건을 만들자
[아이디 입력 조건]
1. 입력되는 전체 길이는 5~8자이어야 한다.
2. 아이디는 숫자와 영문자로만 사용 가능하다.
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_01.js"></script>
</head>
<body>
<div class="wrap">
<label for="id">아이디</label>
<input type="text" name="id" id="id">
<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
|
const id = document.querySelector("#id")
const btn = document.querySelector("#commit")
console.log(id)
const pattern = new RegExp("^[a-zA-Z][0-9a-zA-Z]{4,7}$")
// const pattern = / /
console.log(id.value)
btn.addEventListener('click', function() {
if (pattern.test(id.value)) {
alert('성공')
} else {
alert('다시입력')
id.value = ''
id.focus()
}
})
|
cs |
다음과 같이 정규식을 작성하였다
[a-zA-Z][0-9a-zA-Z] --> 영문 + 숫자의 조합으로
{4,7} ---> 5~8글자
const pattern = new RegExp("^[a-zA-Z][0-9a-zA-Z]{4,7}$")
위 정규식은 "const pattern = / / "으로 / / 안에 정규식을 작성해도 된다.
3. 실행결과
'Language > └JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 정규표현식 Regexp ② - 날짜 입력 조건 | Yoon's Dev (0) | 2021.10.19 |
|---|---|
| [JavaScript] 자바스크립트 이벤트 처리와 DOM의 개념 | Yoon's Dev (0) | 2021.10.17 |
| [JavaScript] 자바스크립트(JavaScript)란? | Yoon's Dev (0) | 2021.05.15 |