반응형

폼 전체 데이터 체크

 

// 최상위 체크 로직(chars로 넘긴 값이 있다면 true)
function containsCharsOnly(input, chars)
{
 for( var inx = 0; inx < input.value.length; inx++)
 {
  if(chars.indexOf(input.value.charAt(inx)) == -1) return false;
 }
 return true;
}

// 바이트 구하기
function getByteLen(str)
{
 return (str.length + (escape(str) + "%u").match(/%u/g).length - 1);
}

// 영문 판별
function isEngCheck(input)
{
 var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
 return containsCharsOnly(input, chars);
}

// 이름체크
function nameCheck(input)
{
 var chars = '0123456789~!@#$%^&*()_-+=|{}[]<>,./?';
 return containsChars(input, chars);
}

// 숫자 체크
function isNum(input)
{
 var chars = "0123456789";
 return containsCharsOnly(input, chars);
}

// 입력값이 숫자,대시(-)로 되어있는지 체크
function isNumDash(input)
{
 var chars = "-0123456789";
 return containsCharsOnly(input, chars);
}


// 입력값이 숫자,콤마(,)로 되어있는지 체크
function isNumComma(input)
{
 var chars = ",0123456789";
 return containsCharsOnly(input, chars);
}

// 입력값이 사용자가 정의한 포맷 형식인지 체크
// 자세한 format 형식은 자바스크립트의 ''regular expression''을 참조
function isValidFormat(input, format)
{
 if(input.value.search(format) != -1)
 {
  return true;
  file;//올바른 포맷 형식
 }
 return false;
}

// 입력값이 이메일 형식인지 체크
function isValidEmail(input)
{
 var format = /^((\w|[\-\.])+)@((\w|[\-\.])+)\.([A-Za-z]+)$/;
 return isValidFormat(input, format);
}

// 영숫자 판별
function isEngNumCheck(input)
{
 var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 return containsCharsOnly(input, chars);
}


// 입력값이 전화번호 형식(숫자-숫자-숫자)인지 체크
function isValidPhone(input)
{
 var format = /^(\d+)-(\d+)-(\d+)$/;
 return isValidFormat(input, format);
}


// 입력값이 전화번호 형식(숫자-숫자)인지 체크
function isValidPhone2(input)
{
 var format = /^(\d+)-(\d+)$/;
 return isValidFormat(input, format);
}

// 소 --> 대문자 변환 함수
function ToUpper(arg)
{
 var str1 = "abcdefghijklmnopqrstuvwxyz";
 var str2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 return alterString(arg, str1, str2);
}

// 대 --> 소문자 변환 함수
function ToLower(arg)
{
 var str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 var str2 = "abcdefghijklmnopqrstuvwxyz";
 return alterString(arg, str1, str2);
}


// 입력값이 NULL인지 체크
function isNull(sValue)
{
 if(new String(sValue).valueOf() == "undefined") return true;
 if(sValue == null) return true;
 var v_ChkStr = new String(sValue);
 var returnvalue = false;

 if(v_ChkStr == null) return true;

 if(v_ChkStr.toString().length == 0) return true;
 else return false;

 return false;
}

 function valid()
{
 var returnBoolean = true;
 $('input, select, radio, textarea, check').each(function()
 {
  if($(this).attr('valid') != '' && !$(this).attr('disabled'))
  {
   var obj = this;
   var type = obj.type;
   var value = $(this).val();

   // dataType : en, ko, num, hyphen_num, comma_num, email
   var dataType = '';
   
   var altValue = '';
   if($(this).attr('alt') != '' && $(this).attr('alt') != undefined && $(this).attr('alt') != 'undefined'){
    altValue = $(this).attr('alt')+'은(는) ';
   }

   if(!($(this).attr('valid') == undefined))
   {
    dataType = $(this).attr('valid');
    dataTypeList = dataType.split(","); // <-- // 구분자로 짤라와서

    for( var i = 0; i < dataTypeList.length; i++)
    {
     // input type 이 text, password 이거나 textarea일때 아래의 valid체크가
     // 가능함
     if(type == 'text' || type == 'textarea' || type == 'password')
     {
      // 길이체크 옵션에 length:20 형태로 주면됨
      if((dataTypeList[i]).substring(0, 6) == 'length')
      {
       maxlength = (dataTypeList[i]).split(":");
       var length = maxlength[1];
       if(length.indexOf('~') > 0){
        var lengthFT = length.split("~");  
        if(parseInt((getByteLen(value)),10) < parseInt((lengthFT[0]),10)){
         returnBoolean = false;
        }else if(parseInt((getByteLen(value)),10) > parseInt((lengthFT[1]),10)){
         returnBoolean = false;
        }
        
        if(returnBoolean == false){
         alert(altValue+lengthFT[0]+'~'+lengthFT[1]+'자로 입력가능합니다.\n(현재 ' + getByteLen(value) + 'Byte)');
         $(this).focus();
         return false;
        }
       }
       else
       {
        if(parseInt(getByteLen(value),10) > length)
        {
         alert(altValue+'최대 ' + length + '자 까지 입력가능합니다.\n(현재 ' + getByteLen(value) + 'Byte)');
         $(this).focus();
         returnBoolean = false;
         return false;
        }
       }
       // 영문체크
      }
      else if(dataTypeList[i] == 'en')
      {
       var returnValue = isEngCheck(this);
       if(returnValue == false)
       {
        alert(altValue+'영문만 입력가능합니다.');
        // $(this).val('');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
       // 이름체크
      }
      else if(dataTypeList[i] == 'name')
      {
       var returnValue = nameCheck(this);
       if(returnValue == false)
       {
        alert(altValue+'숫자 및 특수기호는 입력불가능합니다.');
        // $(this).val('');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
       // 숫자체크
      }
      else if(dataTypeList[i] == 'num')
      {
       var returnValue = isNum(this);
       if(returnValue == false)
       {
        alert(altValue+'숫자만 입력가능합니다.');
        // $(this).val('');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
       // 하이픈과 숫자만 입력가능하게 체크
      }
      else if(dataTypeList[i] == 'hyphen_num')
      {
       var returnValue = isNumDash(this);
       if(returnValue == false)
       {
        alert(altValue+'숫자 및 하이픈(-)만 입력가능합니다.');
        // $(this).val('');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
       // 콤마와 숫자만 입력가능하게 체크
      }
      else if(dataTypeList[i] == 'comma_num')
      {
       var returnValue = isNumComma(this);
       if(returnValue == false)
       {
        alert(altValue+'숫자 및 콤마(,)만 입력가능합니다.');
        // $(this).val('');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
       // 이메일 형식으로 입력하도록 체크
      }
      else if(dataTypeList[i] == 'email')
      {
       var returnValue = isValidEmail(this);
       if(returnValue == false)
       {
        alert(altValue+'이메일 형식(ktcs@ktcs.com)에 맞게 입력해주세요.');
        // $(this).val('');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
       // 영문과 숫자로만 입력가능하게 체크
      }
      else if(dataTypeList[i] == 'en_num')
      {
       var returnValue = isEngNumCheck(this);
       if(returnValue == false)
       {
        alert(altValue+'숫자 및 영문만 입력가능합니다.');
        // $(this).val('');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
       // 휴대폰, 전화번호 형태로 입력가능하게 체크
      }
      else if(dataTypeList[i] == 'phone')
      {
       var returnValue = isValidPhone(this);
       if(returnValue == false)
       {
        alert(altValue+'전화번호 형식(숫자-숫자-숫자)에 맞게 입력해주세요.');
        // $(this).val('');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
       // 대문자로 자동변경
      }
      else if(dataTypeList[i] == 'phone2')
      {
       var returnValue = isValidPhone2(this);
       if(returnValue == false)
       {
        alert('전화번호 형식(숫자-숫자)에 맞게 입력해주세요.');
        // $(this).val('');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
       // 대문자로 자동변경
      }
      else if(dataTypeList[i] == 'upper')
      {
       var value = $(this).val();
       $(this).val(ToUpper(value));
       // 소문자로 자동변경
      }
      else if(dataTypeList[i] == 'lower')
      {
       var value = $(this).val();
       $(this).val(ToLower(value));
       // 널값체크 (좌우 공백제거함)
      }
      else if(dataTypeList[i] == 'null')
      {
       var returnValue = isNull($(this).val());
       if(returnValue == true)
       {
        alert(altValue+'필수항목입니다. 값을 입력해주세요');
        $(this).focus();
        returnBoolean = false;
        return false;
       }
      }
     }

     if(type == 'radio' || type == 'checkbox' || type == 'select-one' || type == 'select-multiple' || type == 'file')
     {
      if(dataTypeList[i] == 'null')
      {
       var returnValue = false;
       if (type == 'radio')
       {
        returnValue = isNull($('input[name='+this.name+']:checked').val());
       }
       else
       {
        returnValue = isNull($(this).val());
       }
        
       if(returnValue == true)
       {
        if(type == 'select-one' || type == 'select-multiple')
        {
         alert(altValue+'필수항목입니다. 값을 선택해주세요');
        }
        else
        {
         alert(altValue+'필수항목입니다. 값을 입력해주세요');
        }
        $(this).focus();
        returnBoolean = false;
        return false;
       }
      }
     }
    }

   }
  }
 });
 return returnBoolean;
}

 

사용방법 

 

<input type="text" name="text" valid="length:30,null,num">

valid 필드에 체크를 원하는 type 을 콤마(,) 로 구분하여 넣어주면 된다.

en : 영문체크
name : 이름(특수 및 영문자제외)
num : 숮자만
hyphen_num : 하이폰과 숫자
comma_num : 콤마와 숫자
email : 이메일
en_num : 영문과 숫자
phone : 전화번호 (숫자-숫자-숫자)
phone2 : 전화번호 (숫자-숫자)
upper : 대문자로 변경
lower : 소문자로 변경

 

 

반응형

'WEB' 카테고리의 다른 글

[php] html 파싱  (0) 2016.02.26
[Gauce] 가우스(Gauce) 조회 기본 활용  (0) 2016.02.23
php xml 파일만드기(rss)  (0) 2016.02.19
iframe 동적 생성 후 삭제  (0) 2016.02.12
가우스 이벤트 동적 생성시 기존 이벤트 추가  (0) 2016.02.12