BLOG ARTICLE 자바스크립트 | 3 ARTICLE FOUND

  1. 2007.08.01 폼검사 Java Script
  2. 2007.02.22 setAttribute 로 class 를 지정할 때 Cross Browsing 문제
  3. 2006.07.06 javascript prototype .

웹프로그래밍을 하다보면 지겹게 해야 하는 것중 하나가

Form Submit 하기 전에 Form 내용을 검사하는 것입니다.

별로 좋은 방법이 없어서 그냥 일일이 손으로 쓰는 방법하다가

불편해서 나름 꼼수를 만들어서 쓰고 있습니다.


  1. _checkValue("objectid", "에러메시지", checkFunction [,other_args]);
  2. ex) _checkValue("myobject", "값을 입력하세요", _notEmpty);

_checkValue 라는 함수의

  • 첫번째 파라미터는 Object Id 나 Object 입니다.
  • 두번째 파라미터는 에러 시 표시할 메시지 입니다.
  • 세번째 파라미터는 검사에 사용 할 함수 입니다.
  • 네번째부터 각 검사에 추가로 필요한 파라미터를 넘깁니다.

checkFunction 은 값을 검사할 때 사용하는 함수로

  • object에 값이 입력이 되었는지 검사하는 _notEmpty
  • object의 값이 특정 수 보다 큰지 검사하는 _biggerThen
  • checkbox 에 체크가 되었는지 확인하는 _checkedValueExists
  • 예전 값과 동일 한지 검사하는 _sameAsOldValue
  • 올바른 날짜인지 검사하는 _rightDateType

정도를 만들어서 쓰고 있습니다.


  1.  
  2. /* 예를 들면 폼검사 시 이렇게 사용 할 수 있습니다. */
  3. if(!_checkValue(frm.in_name, "A를 입력하세요", _notEmpty)) return false;
    if(!_checkValue("organ_id", "B을 선택하세요", _biggerThen, 0)) return false;
    if(!_checkValue(document.getElementsByName("industry_id"), "C를 체크하세요", _checkedValueExists, 2)) return false;
  4. if(!_checkValue(document.getElementById("in_foundDatey"), "날짜형식이 잘못 되었습니다.", _rightDateType, document.getElementById("in_foundDatem").value, document.getElementById("in_foundDated").value)) return false;
  5. /* 끝 */
  6.  
  7. /****************************************************************************
      form Check : form 내의 object 의 value 검사를 위해 사용한다.
      obj : object 또는 objectid
      err : err 났을 때 표시할 메시지
      checkFunc : obj 의 value 를 검사할때 쓸 function
      ex) _checkValue(document.frm.obj, "값을 입력하세요", _notEmpty)
    ****************************************************************************/
    function _checkValue(obj, err, checkFunc){
      try
      {
       temp= obj.focus();  /* object 인지 검사 */
     
       if(!checkFunc(obj, arguments))
       {
         alert(err);
         obj.focus();
         return false;
       }
       else return true;
      }
      catch (e)
      {
       try
       {
         obj2= document.getElementById(obj);  /* id 인지 검사 */

         if(!checkFunc(obj2, arguments))
         {
           alert(err);
           obj2.focus();
           return false;
         }
         else return true;
       }
       catch (ee)
       {
         try
         {
           temp= obj.length; /* 배열인지 검사 */
           if(!checkFunc(obj, arguments))
           {
             alert(err);
             obj.focus();
             return false;
           }
           else return true;
         }
         catch (eee)
         {
           return false;
         }
       }
      }
    }

    function _notEmpty(obj){
      try
      {
          if (obj.value != "")
            return true;
       else return false;
      }
      catch (e)
      {
       return false;
      }
    }

    function _biggerThen(obj, parent_args){
      var limit= parent_args[3];
      try
      {
          if (parseInt(obj.value) > 0)
            return true;
       else return false;
      }
      catch (e)
      {
       return false;
      }
    }

    function _checkedValueExists(obj, parent_args){
      var checkCount=0;
      var maxCount= parent_args[3];

      for (var i=0; i<obj.length; i++)
      {
       if(obj[i].checked) checkCount++;
      }

      if (maxCount!="" && checkCount>maxCount){
       alert("최대 " + maxCount + " 개 만 선택 가능합니다.");
       return false;
      }

      if (checkCount > 0)
       return true;

      return false;
    }

    function _sameAsOldValue(obj, parent_args){
      var oldValue= parent_args[3];

      try
      {
       return obj.value==oldValue;
      }
      catch (e)
      {
       return false;
      }

    }

    function _rightDateType(obj, parent_args){
      var mon= parent_args[3];
      var day= parent_args[4];

      if (obj.value== "" && mon=="" && day=="")
       return true;

      try
      {
       dates= new Date();
       dates.setYear(obj.value);
       dates.setMonth(mon-1);
       dates.setDate(day);
     
       if ((parseInt(dates.getFullYear())) != parseInt(obj.value) || (dates.getMonth()+1) != parseInt(mon) || dates.getDate()!= parseInt(day))
         return false;
     
       return true;
      }
      catch (e)
      {
       return false;
      }
    }

이 글은 스프링노트에서 작성되었습니다.

신고


obj.setAttribute(attName, attValue)

obj 에 Class 속성을 지정할 때
  • IE 의 경우 obj.setAttribute("className", "클래스명"); 으로 해야 하고
  • FF 의 경우 obj.setAttribute("class", "클래스명"); 으로 해야 한다.
때문에 Cross Browsing 하려면 두 속성 모두 지정하면 된다.
아님 eval() 로 eval("obj.className='클래스명'"); 해도된다.
(* 지극히 개인적인 판단이며 개인적으로 몇번만 테스트 함. )

또 eval() 로 속성을 지정할 경우 HTML 원래 속성 이외의 속성을 지정할수 없다.
즉, eval("obj.customAttribute='zzz'"); 하면 customAttribute 라는 속성이 지정 안되는 반면
obj.setAttribute("customAttribute", "zzz"); 하면 customAttribute 라는 속성이 지정 가능하다.
(* 이것 역시 지극히 개인적인 판단이며 개인적으로 몇번만 테스트 함. )
신고

http://prototype.conio.net

흠.. 괜찮은거 같음
신고

티스토리 툴바