정규식으로 간단하게 빈 내용(공백, 엔터, 탭) 입력 체크하기

※ 내용 업데이트와 홈페이지 관리 다시 시작하겠습니다. ^^;

입력된 내용을 검사할때 빈 값 또는 의미없는 값의 입력을 막아야 할 경우가 있죠 예를 들면~

1. 아무 내용도 입력하지 않았을 경우
이 경우엔 간단하게 체크가 됩니다. 값이 없는 경우죠. 비었다면 체크~

2. 입력은 했으나 공백일 경우 (스페이스키를 눌러 공백으로 가득채운 경우)
컴퓨터 입장에선 값이 있지만 사람이 보기엔 무의미 한 값. 역시 체크해줘야겠죠~

3. 2번 경우의 발전형 공백, 엔터, 탭만 넣어 체크를 귀찮게 하는경우
역시 체크 해줘야 합니다. 이제 좀 귀찮아 집니다.

4. 지능형
특수문자를 이용한 입력 'ㄱ' 입력 후 '한자키' 그리고 1을 누르면 공백 문자가 써집니다.
이건 스페이스 한칸의 공백도 아니고 ★과 같은 특수문자 공백입니다.
완벽하려면 요것도 막아 줘야 합니다.

위의 1~4의 경우를 스크립트로 막으려면 상당히 귀찮아지는 일이 발생합니다.
그러나 아래 예제 에서 처럼 정규식을 이용하면 아주 간단합니다. ^^;

예제

아래에 글 입력 후 확인 버튼을 눌러보세요.
공백이나 엔터만으로 내용을 가득 채워넣을 경우에
내용을 입력하라는 메세지가 뜹니다.

소스

<script language="JavaScript">
<!--
	function chkValue(){
		var tmp = document.form1.txt1.value.replace(/\s|　/gi, '');
		// 정규식으로 공백, 엔터, 탭, 특수문자 공백 문자를 빈문자로 바꿈
		// 입력된 값에 대하여 위 정규식 처리를 하고 뭔가 남아있지 않다면
		// 값이 무의미 하다고 판단함.

		if(tmp == ''){
			alert('내용을 입력해 주세요');
		}
		else{
			alert('OK');
		}
	}
//-->
</script>

아래에 글 입력 후 확인 버튼을 눌러보세요.<br>
공백이나 엔터만으로 내용을 가득 채워넣을 경우에<br>
내용을 입력하라는 메세지가 뜹니다.<br>

<form name="form1">
<textarea name="txt1" rows="15" cols="55"></textarea><br>
<input type="button" value="  확 인  " onclick="chkValue()">
</form>

<script language="JavaScript">
<!--
	function chkValue(){
		var tmp = document.form1.txt1.value.replace(/\s|　/gi, '');
		// 정규식으로 공백, 엔터, 탭, 특수문자 공백 문자를 빈문자로 바꿈
		// 입력된 값에 대하여 위 정규식 처리를 하고 뭔가 남아있지 않다면
		// 값이 무의미 하다고 판단함.

		if(tmp == ''){
			alert('내용을 입력해 주세요');
		}
		else{
			alert('OK');
		}
	}
//-->
</script>

아래에 글 입력 후 확인 버튼을 눌러보세요.<br>
공백이나 엔터만으로 내용을 가득 채워넣을 경우에<br>
내용을 입력하라는 메세지가 뜹니다.<br>

<form name="form1">
<textarea name="txt1" rows="15" cols="55"></textarea><br>
<input type="button" value="  확 인  " onclick="chkValue()">
</form>

☞ 달팽이홈2

등록일 : 2008-08-20