Notice
Recent Posts
Recent Comments
Link
«   2024/06   »
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 26 27 28 29
30
Tags
more
Archives
Today
Total
관리 메뉴

WON.dev

chapter05_regExp 본문

WEB.JS/09.FORM_JS

chapter05_regExp

GAWON 2023. 5. 22. 09:28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function regCheck(target){
		
		/*
			정규식(Regular Expressions)
				1. 정규 표현식을 줄여서 정규식이라고 부른다.
				2. 만드는 방법
					1) var re = /ab+c/
					2) var re = new RegExp("/ab+c/");
		*/
		
		/*
			숫자 정규식
			^ : 패턴 시작
			[0-9] : 괄호 안의 숫자로 범위 지정
			+ : 앞 문자가 하나 이상
			* : 문자 수 상관 없음
			$ : 패턴 종료
		*/
		
		var regExp = /^[0-9]+$/;
					
		// 4. test() : 정규식에서 지원하는 함수(boolean 리턴)
		if(regExp.test(target.value)){
			alert("숫자가 맞습니다.");
		}else{
			alert("숫자가 아닙니다.");
		}
		
		// 3. exec() : 정규식에서 지원하는 함수 (정보를 가지고 있는 배열 반환)
		// 대응되는 문자열을 찾지 못했다면 null 반환
		/*
		if(regExp.exec(target.value)){
			alert("숫자가 맞습니다.");
		}else{
			alert("숫자가 아닙니다.");
		}
		*/
		
		// 문자열에서 사용
		// 2. search() : 인덱스 번호 반환
		// 대응되는 문자열을 찾지 못했다면 -1을 반환
		/*
		if(target.value.search(regExp) != -1){
			alert("숫자가 맞습니다.");
		}else{
			alert("숫자가 아닙니다.");
		}
		*/
		
		// 1. match() : 정보를 가지고 있는 배열 반환
		// 대응되는 문자열을 찾지 못했다면 null 반환
		/*
		if(target.value.match(regExp) != null){
			alert("숫자가 맞습니다.");
		}else{
			alert("숫자가 아닙니다.");
		}
		*/
		
		
		
		
	}
</script>
</head>
<body>
	<form action="#">
		숫자 입력 <input type="text" name="num">
		<input type="button" value="검증" onclick="regCheck(num)">
	</form>
</body>
</html>

'WEB.JS > 09.FORM_JS' 카테고리의 다른 글

chapter03 : input_check  (0) 2023.05.22
chapter04 : input_check  (0) 2023.05.22
chapter06 : join_정규식  (0) 2023.05.22
chapter06 : join  (0) 2023.05.22
chapter07 : joinTest  (0) 2023.05.22