2011. 9. 10.

jquery 폼체크 및 간략설명

jquery의 장점이라구 하면 웹표준을 알아서 맞추어 주닝 상당히 편하다. 그리고 왠간한 폼체크를 할시에 selectbox,checkbox,radio등은 for문을 돌려야 했으나 jquery로는 한줄에 끝낼수 있다. 나머지는 예제를 보시면 이해가 빠르실 꺼다.

예제 html폼
이름 :  

지역 : 
  

취미 : 
   
  
   
  
   
  
   
  
   
  
   
  
   
  
       



예제 폼체크 자바스크립트
// jquery에서 function호출할때 형식
//onload이벤트라고 보시면 됩니다.
$(document).ready(function() {

 // memberFrm폼에 submit이벤트가 일어날때 반응
 // jquery 해당폼 해당이벤트 이런식으로 함수 작성
 $("form#memberFrm").bind("submit", function () {

  //.val()로 값을 가지고 올수 있으나 .trim()하여 비교
  //하면 빈값이나 스페이스값 빈값에 개행까지 잡아냄
  if ($("input#userName").val().trim() == "") {
   alert("이름을 입력해 주세요.");
   $("input#userName").focus();
   return false;
  }

  //셀렉트박스의 선택된 값 이렇게 쉽게 가지고 올수 있다.
  if ($("select#area").val() == "") {
   alert("지역을 선택해주세요!!");
   return false;
  }

  //체크박스에 속성을 부를때는 :을
  //radio또한 동일한 방법으로 사용가능
  if ($("input#hobby:checked").length < 3) {
   alert("체크박스를 세 개 이상 체크주십시오");
   return false;
  }

  return true;
 });

 
 // 셀렉트 박스 id area change 이벤트에 일어난다.
 // jquery의 셀렉트 박스 선택값이나 생성,삭제 상당히 편하다.
 $("select#area").bind("change", function () {

  //aera의 값에 따라 다음항목의 셀렉트 박스 생성
  switch ($("select#area").val()) {
   case "":
    //subArea라는 셀렉트 박스
    $("select#subArea").remove();
    break;
   case "1": 
    //subArea라는 셀렉트 박스
    $("select#subArea").remove();
    //subArea라는 셀렉트 박스를 생성한다.
    $("#subSpan").append(""); 
    //subArea에 option을 추가해준다.
    $("select#subArea").append("");
    $("select#subArea").append("");
    $("select#subArea").append("");
    break;
   case "2":
    //subArea라는 셀렉트 박스
    $("select#subArea").remove();
    //subArea라는 셀렉트 박스를 생성한다.
    $("#subSpan").append("");
    //subArea에 option을 추가해준다.
    $("select#subArea").append("");
    $("select#subArea").append("");
    $("select#subArea").append("");
    break;
  }
 });


});

댓글 2개:

  1. 올려주신 글 학습에 잘 사용했습니다^^

    답글삭제
  2. 공부하는 학생인데 정말 많은 도움이 되었어요
    교체를 자바스크립트로 샀더니 이거 넘 어렵던데.. 훨씬 간편하면서 실용적인 소스 잘보고 가요
    정말 감사합니다.

    답글삭제