javascript / file extension(확장자) check / 필수항목 표시 / zerolength(공백) check / number(숫자) check / validator

입력 폼의 벨리데이션 (validation) 을 공통으로 구현한 예제이다.

 

로그인 창 또는 입력 폼을 만들때 벨리데이션은 필수이다.

 

각각 태그를 If문을 걸어서 벨리데이션을 만들 수도 있지만,

 

Jquery 를 이용해서 태그의 특성을 가지고 공통으로 만들수도이다.

 

 

 

- 이런 구조의 입력폼에서만 가능하다.

input 태그 등 입력받는 태그의 속성 중 title과 id가 필수로 정의되어있어야 한다.

<table>
<tr>
<td>
이름
</td>
<td>
<input type="text" id="name" title="이름" >
</td>
</tr>
<tr>
<td>
나이
</td>
<td>
<input type="text" id="age" title="나이" >
</td>
</tr>
</table>
 

 

 

Jquery는 필수이다.

사용 방법은 주석으로 대체한다.

 

objValueCheck.js

 
/**
 사용법
 - jquery 필수
 
 - 체크할 input의 Id들을 입력

// 파일 확장자 체크
var fileCheckObjIds = "file1,file2,file3,file4";
if(!fileCheck(fileCheckObjIds, 7)){
 return false;
}





// 필수 항목 별 또는 특정 표시 추가
var setStarObjIds = "input1,input2,input3";

$(function(){

  zeroLengthCheckTitleSetStar(setStarObjIds);

});





// 필수 항목 체크 (공백으로 체크)
var zeroLengthCheckObjIds = "input1,input2,input3";
if(!zeroLengthCheck(zeroLengthCheckObjIds)){
 return false;
}


// 숫자 체크
var numberCheckObjIds = "input1,input2,input3";
if(!numberCheck(numberCheckObjIds)){
 return false;
}

*/
 
 
 
 
 
////////////////////////////////////////////////////////////////////////////
 
String.prototype.trim = function() {
   return this.replace(/(^\s*)|(\s*$)/gi, "");
}
 
var imgExtensionArr = ["png","bmp","jpg","jpeg","gif"];
var excelExtensionArr = ["xlsx","xlsm","xlsb","xls"];
var pptExtensionArr = ["ppt","pptm","pptx"];
var wordExtensionArr = ["docx","docm","doc"];
var etcDocumentExtensionArr = ["pdf","txt","hwp"];
var allExtensionsArr = imgExtensionArr + excelExtensionArr + pptExtensionArr + wordExtensionArr + etcDocumentExtensionArr;
var documentExtensionArr = excelExtensionArr + pptExtensionArr + wordExtensionArr + etcDocumentExtensionArr;
/**
 * fileCheck type info 
 * 1. img
 * 2. excel
 * 3. ppt
 * 4. word
 * 5. etc (pdf, txt, hwp)
 * 6. all (1 + 2 + 3 + 4 + 5)
 * 7. document (2 + 3 + 4 + 5)
 * */
//fileImgCheck
function fileCheck(objIds, type){
 var extensions;
 if(type-0 >= 1 && type-0 <= 7){
  extensions = setFileType(type);
 }else{
  return false;
 }
 
 var temp = false;
 var obj;
 var objId = objIds.split(',');
 var extension;
 var filesNullFlag = true;
 
 for(var i=0; i<objId.length; i++){
  obj = $("#"+objId[i]);
  extension = obj.val().substring(obj.val().lastIndexOf('.')+1);
  if(!extension==''){
   filesNullFlag = false;
   break;
  }
 }
 
 if(filesNullFlag){
  return true;
 }
 
 
 for(var i=0; i<objId.length; i++){
  obj = $("#"+objId[i]);
  extension = obj.val().substring(obj.val().lastIndexOf('.')+1);
  if(!extension==''){
   temp = false;
   for(var e=0; e<extensions.length; e++){
    if(extensions[e].toLowerCase() == extension){
     temp = true;
     break;
    }
   }
  }else{
   temp = true;
  }
  if(!temp){
   break;
  }
  
 }
 
 if(!temp){
  alert(obj.attr('title') + " 항목은 '" + extension + "' 확장자를 등록할 수 없습니다.");
  obj.val('');
  obj.focus();
  return false;
 }
 return true;
}
 
function setFileType(type){
 var extensions;
 
 switch(type){
 case 1 : extensions = imgExtensionArr;
  break;
 case 2 : extensions = excelExtensionArr;
  break;
 case 3 : extensions = pptExtensionArr;
  break;
 case 4 : extensions = wordExtensionArr;
  break;
 case 5 : extensions = etcDocumentExtensionArr;
  break;
 case 6 : extensions = allExtensionsArr;
  break;
 case 7 : extensions = documentExtensionArr;
  break;
 default : extensions = allExtensionsArr;
  break;
 }
 
 return extensions;
}
 
 
// zeroLengthCheckobjIds setting : ("*"+title)
function zeroLengthCheckTitleSetStar(objIds){
 var objId = objIds.split(',');
 for(var i=0; i<objId.length; i++){
  obj = $("#"+objId[i]);
  
  if(obj.parent().prev().text().substr(0,1)!="*"){
//   obj.parent().prev().text("*"+obj.parent().prev().text());
   // css에 맞게 변경
   // <label for='uid'><em>필수</em>아이디</label>
   obj.parent().prev().html("<label for='"+objId[i]+"'><em>필수</em>"+obj.parent().prev().text().replace("필수","") + "</label>");
  }
 }
}
 
//zeroLengthCheck
function zeroLengthCheck(objIds){
 
 var temp = true;
 var obj;
 var objId = objIds.split(',');
 
 for(var i=0; i<objId.length; i++){
  obj = $("#"+objId[i]);
  if(obj.val().trim() == '' || obj.val() == null){ 
   alert(obj.attr('title') + " 항목을 입력해 주세요.");
   obj.focus();
   obj.val('');
   temp = false;
   break;
  }
 }
  
 if(!temp){
  return false;
 }
 return true;
}
 
// numberCheck
function numberCheck(objIds){
 
 var temp = true;
 var obj;
 var objId = objIds.split(',');
 
 for(var i=0; i<objId.length; i++){
  obj = $("#"+objId[i]);
  if(!obj.val().match(/^\d+$/ig) && obj.val()!=''){ 
   alert(obj.attr('title') + " 항목은 숫자만 입력가능합니다.");
   obj.val("");
   obj.focus();
   temp = false;
   break;
  }
 }
  
 if(!temp){
  return false;
 }
 return true;
}
 

 

 

 

도움이 되셨다면 공감을 부탁드립니다. ^^