공백값 체크의 여러가지 방법

오늘은 여러가지 공백값 체크 방법에 대해 알아봅시당.

공백값을 글의 제목 또는 내용에 넣게 되면~ 

특히 제목! 제목에 공백값이 들어가게 되면... 글이 클릭이 안되는 경우도 생기지영ㅠ_ㅠ

그렇다면 공백값 체크 예시를 위한 Javascript 를 봅시당. 요 내용을 기반으로 공백값 체크를 설명하지용.

if(Trim(document.articleDetailFrm.inputArticleName.value) == ""){

alert("게시물 제목을 입력하세요.");

document.articleDetailFrm.inputArticleName.focus();

return;

} if(Trim(inputContents)==""){

alert("게시물 내용을 입력하세요.");

document.articleDetailFrm.inputArticleContents.focus();

return;

가장 기본적인 방법은 역시 아무런 내용도 들어가지 않은 경우 또는 Null 체크입니다.

var check = document.form name.input name.value

if (( check == "" ) || ( check == null)) {
   alert("내용을 입력해주세용");
   return;

}

Null 값인지에 대한 체크는 isNull() 함수로도 가능합니다. 따라서 아래와 같이 써도 무방합니다.

if (( check == "" ) || ( check.isNull() ) {
   alert("내용을 입력해주세용");
   return;

}

 

하지만 위와 같은 경우에는 단점이 있는데, 만약 "                            " 이렇게 공백이 여러칸 들어갔을
경우에는 내용이 있다고 인식하게 됩니다. 따라서 맨 위의 예제와 같이 Trim이라는 함수의 사용이 필요합니다.
Trim을 사용하게 되면 앞 뒤의 빈칸을 제거해주는데요. 이를 이용하게 되면 여러칸의 공백을 입력해도
입력하지 않은 것으로 인식하게 되므로 게시물의 제목 입력에 대한 Validation으로 아주 유용한 함수가 될 것 같네요.

if ( (Trim(check) == "" ) || (check == null) ) {
   alert("내용을 입력해주세용");
   return;

}

Trim 함수의 사용법은 매우 간단합니다. input 값의 value값을 Trim의 매개변수로 주게 되면 이 함수를 통해
빈칸을 제거해줍니다. 그 함수를 거치고 난 내용이 "" (내용 없음) 일 경우에 submit 하지 못하도록 하면 됩니다.

그리고 주의할 점! if문을 쓸 때는 항상, if 그 이후에는 else if, else 순으로 사용해왔는데
게시물에 제목, 내용 등 여러가지 input 값이 있다면 각각에 대해서 if 로 validation을 하는 것이 확실하게
내용 확인이 가능합니다. 순서를 따라가보면 모두 validation 가능할 것도 같았으나 안 잡히는 경우가 대개 있더라구요 ㅠ_ㅠ

다음에는 또 다른 형식들에 대한 validation 방법들에 대해서 소개하고자 합니다~

2011.02 오혜영에게 저작권이 있습니당.