728x90
반응형
RegExp란?
Regular Expression 의 줄임말로, 정규 표현식을 나타내는 자바스크립트의 내장 객체이다.
조건
1. 5~8자 이내여야 한다.
2. 반드시 영문(대, 소문자)로 시작해야한다. 그 외 나머지는 영문(대, 소문자) 또는 숫자로 만들 수 있다.
See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>정규 표현식</title> <script> function process(){ var id=document.getElementById("mid").value; var patt=new RegExp("^[a-zA-Z][0-9a-zA-Z]{4,7}$"); if(patt.test(id)){ alert("성공"); }else{ alert("다시입력"); document.getElementById("mid").value=""; document.getElementById("mid").focus(); } } </script> </head> <body> <label>아이디</label> <input type="text" name="mid" id="mid"> <input type="button" value="commit" onclick="process()"> </body> </html> | cs |
var patt = new RegExp("^[a-zA-Z][0-9a-zA-Z]{4,7}$")
^ : 문자열의 시작 지점을 나타낸다.
[a-zA-Z] : 첫 번째 문자는 영어 대문자 또는 소문자로 시작해야 한다.
[0-9a-zA-Z] : 나머지 문자는 숫자 또는 영어 대문자 또는 소문자로 이뤄져야한다.
{4, 7} : 총 길이는 4에서 7자 사이여야 한다.
$ : 문자열의 끝을 나타낸다.
조건
- 년도 4자리, 월이나 일은 1자리이거나 2자리 (ex : 2014-01-29)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>정규 표현식</title> <script> function process(){ var date=document.getElementById('hire_date').value; var patt=new RegExp("^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|1[0-9]|2[0-9]|3[01])$"); if(patt.test(date)){ alert("입사"); }else{ alert("다시입력"); } } </script> </head> <body> <span>입사연월일</span> <!--예시 : 2014-01-24--> <input type="text" name="hire_date" id="hire_date" /> <input type="button" value="commit" onclick="process()" /> </body> </html> | cs |
728x90
반응형
'✨ Front-end > 자바스크립트(JS)' 카테고리의 다른 글
| [JavaScript] Spread 연산자의 개념과 사용방법 (0) | 2023.09.21 |
|---|---|
| [JavaScript] ES6 화살표 함수 arrow (0) | 2023.09.21 |
| [JavaScript] JSON 객체, 배열 사용법 (0) | 2023.09.01 |
| [JavaScript] 배열 객체와 날짜함수 (0) | 2023.09.01 |
| [JavaScript] String 객체 함수 (0) | 2023.09.01 |
댓글