[js] javascript validation 체크, 필수값, 유효성 검사, 핸드폰 형식,스크립트태그 입력 방지, 공백 불가

이번 포스팅은 자바스크립트를 이용한 사용자 입력값 체크에 대해서 다루겠습니다. 평소 사이트를 이용할때 "비밀번호 형식에 맞지 않습니다.", "비밀번호는 3~12자리 특수문자 포함입니다.", "핸드폰 형식에 맞지 않습니다", " 비밀번호는 필수 입력값입니다.","이미 사용하는 id입니다." 등을 만날수 있습니다. 여기서는 간단한 방법으로 입력값 유효성 검사를 하는 방법을 알아보겠습니다. (자바스크립트 이벤트 blur, change등의 개념을 필요로 합니다.)

 

 

결과 미리보기

결과

로직

• 유효성 검사하고싶은 tag에 class check를 넣어준다.
• 사용자가 입력한다. (아무것도 입력하지않고 [등록] 버튼을  클릭시 전체 유효성 체크 발동)
• change 또는 blur가 일어날때 유효성 검사를 한다.(태그의 id, class, name값 등 을 이용하여 체크한다. 여기서는  name속성을 사용
• 맞지 않으면 하단에 <p></p>태그에 빨간색 text를 넣어준다.

html

  <li>
    <label for="">취미</label>
    <input style="color:black;background-color:white;" type="text"  class="check" name="test1" value="" placeholder="취미를 입력해주세요" autocomplete="off" >
    <p></p>
  </li>
  <li>
    <label for="">연락처</label>
    <input style="color:black;background-color:white;" type="text"  class="check" name="test2" value="" placeholder="연락처를 입력해주세요" autocomplete="off" >
    <p></p>
  </li>
 <li>
    <label for="">전공</label>
    <select style="color:black;background-color:white;" class="check" name="test3">
    <option value="선택">전공을 선택해주세요.</option>
</select>
	<p></p>
</li>

 

js

 

$(function(){
   
    $('.check').on('change', function(){
       
        var scriptTag2 = /[~^&()|<>?]/; 
        var regExp_tel1 = /^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/;
        var checkText = "";
        var thisVal = $(this).val();
               
        switch($(this).attr("name")){
            case "test1":
                if(thisVal.length == 0){
                    checkText = "취미를 입력해주세요.";
                }else if(scriptTag2.test(thisVal) == true){
                    checkText = "스크립트 태그는 들어갈 수 없습니다.";
                }else if(Space_Check.test(thisVal) == true){
                    checkText = "공백이 들어갈 수 없습니다.";
                }else if (thisVal.length > 10){
                    checkText = "10글자 이내로 입력해주세요.";
                }
            break;
            case "test2":
                if(thisVal.length == 0){
                    checkText = "연락처를 입력해주세요.";
                }else if(thisVal.length != 0 && regExp_tel1.test(thisVal) == false ){
                    checkText = "010-1234-5678 형식으로 입력해주세요.";
                }
            break;
            case "test3":
                if(thisVal == '선택'){
                    checkText = "전공을 선택해주세요.";
                }
            break;
        
        
        if(checkText != ""){
            $(this).siblings("p").html(checkText);
            $(this).siblings("p").addClass("vali");
            $(this).siblings("p").slideDown();
        } else {
            $(this).siblings("p").slideUp(function(){
                $(this).removeClass("vali");
            });
        }
    });
    
    
});

 

class vali 라는 것에 빨간색 글자가 적용되어있다. 

 

 

 

 

 

결과

 

유효성이 모두 만족되었다는걸 체크할때는 빨간색 class의 length값이 0 일때 이다. 

 if($("check").length == 0){
 	//doing
 }

 

 

 

자바스크립트를 이용한 사용자 입력값 체크에 대해서 알아봤습니다. 감사합니다.

 

jQuery plugin 을 사용한 유효성 검사는 하단 링크를 참고해주세요.

https://bluemint.tistory.com/69

JQuery Validation Plugin 소개 및 활용