[Javascript] input 유효성 검사, null 체크 alert

 

유효성 검사할 때 공통으로 사용하려고 만든 함수이다

CmmnValid.js 라고 공통 js 파일을 만들어두고 함수명 앞에 CV_라고 표시해둔것이니

함수명은 개인적으로 수정하여 사용해도 된다

input을 name 값으로 식별하는 버전이지만 이것도 id로 수정해서 사용해도 된다

 

 

 

 

🍋 기능

필수로 입력되어야하는 다수의 input들의 null체크를 한다

만약 null일 경우 넘겼던 이름 배열에서 항목 이름을 찾아

"이름 을(를) 입력해주세요"

라는 alert이 뜨면서 해당 input에 커서를 focus 한다

 

 

 

 

🍋 함수

/******************************************************************************
 * Function명 :  CV_checkNullInput
 * 설명       : input 값 Null 체크
 * Params     : strNameArr  - 체크할 값들의 이름 배열
 * 				strInputArr - 체크할 input name 배열
 * 				parentId 	- input들이 속해있는 상위 요소의 id값
 * Return     : true or false
 * 사용법    : 
 *      CV_checkNullInput(["이름","나이"], ["name","age"], "myInfo");
*******************************************************************************/ 

function CV_checkNullInput(strNameArr, strInputArr, parentId){
    for(var i=0; i<strNameArr.length; i++){
        if($('#' + parentId + ' input[name="' + strInputArr[i] +'"]').val()==''){
              alert(strNameArr[i] + '을(를) 입력해주세요');
              $('#' + parentId + ' input[name="' + strInputArr[i] + '"]').focus();
              return false; 
        }
    }
    return true;
}

 

 

 

 

🍋 사용예시 (회원가입)

<form name="joinForm" id="join" method="post" action="join.do">
   <div class="inputBox">
      아이디 : <input type="text" id="userId" name="userId">
      비밀번호 : <input type="password" id="userPwd" name="userPwd">
      사용자명 : <input type="text" id="userName" name="userName">
      이메일 : <input type="text" id="userEmail" name="userEmail">
      전화번호 : <input type="text" id="userPhone" name="userPhone">
   </div>
   <div class="btnBox">
      <input type="button" id="submitBtn" value="가입">
   </div>
</form>

$("#signUpBtn").click(function(){
	if(checkForm()){
		document.forms["joinForm"].submit();
	}
});

function checkForm(){
	var strNameArr = ["아이디","비밀번호","사용자명","이메일","전화번호"];
	var strInputArr = ["userId","userPwd","userName","userEmail","userPhone"];
	if(!CV_checkNullInput(strNameArr, strInputArr, "join")) return false;

    //아이디 중복체크 여부
    ...
		
	//비밀번호 조건 확인
    ...
}