jquery 폼체크 및 간략설명

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

예제 html폼

<form id="memberFrm" name="memberFrm">
이름 : <input type="text" id="userName" name="userName" /> 

지역 : <select id="area" name="area">
   <option value="">지역을 선택해주세요</option>
   <option value="1">서울</option>
   <option value="2">경기</option>
  </select>
  <span id="subSpan"></span>

취미 : <input type="checkbox" id="hobby" name="hobby" value="1" />
   <label for="hobby1">꽃꽃이</label>
  <input type="checkbox" id="hobby" name="hobby" value="2" />
   <label for="hobby2">독서</label>
  <input type="checkbox" id="hobby" name="hobby" value="3" />
   <label for="hobby3">게임</label>
  <input type="checkbox" id="hobby" name="hobby" value="4" />
   <label for="hobby4">자전거</label>
  <input type="checkbox" id="hobby" name="hobby" value="5" />
   <label for="hobby5">달리기</label>
  <input type="checkbox" id="hobby" name="hobby" value="6" />
   <label for="hobby6">테니스</label>
  <input type="checkbox" id="hobby" name="hobby" value="7" />
   <label for="hobby7">야구</label>
  <input type="checkbox" id="hobby" name="hobby" value="8" />
   <label for="hobby8">축구</label>    

<input type="submit" value="저장" />
</form>

예제 폼체크 자바스크립트

// 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;
  }
 });


});