'프로그래밍/jquery'에 해당되는 글 8건

  1. 2010.10.20 validation(검증) 플러그인
  2. 2010.09.10 jquery dom 객체 존재 여부 체크 1
  3. 2010.06.10 jQuery 기본 셀렉터
  4. 2009.09.23 [02] selector
  5. 2009.09.23 [01] jQuery Core

validation(검증) 플러그인

|
폼을 사용하다보면 유효성을 체크해야할 경우가 많다.

필수 입력란이 비어있지는 않은가, 숫자만 입력해야하는데 문자를 입력하지 않았는가 등등...

데이터베이스 처리 부분에는 asp로 제어를 하면 되지만 일단 폼에서 체크를 하기 위해 자바스크립트를 써야한다.

하지만 일일이 체크를 하려면 얼마나 귀찮을까...

jQuery 플러그인 중 좋은게 있어서 적어본다.


jquery.validation.js


위 이미지는 샘플페이지의 회원가입 폼이다.

자바스크립트 경고창을 띄우지 않으니 얼마나 좋은가.

물론 플러그인 자체내에서 경고창을 띄우게 옵션을 변경할 수도 있다.


HTML
<style type="text/css">
.relatived { position:relative }
input.invalid, textarea.invalid { border:1px dotted #ff0000 !important; }
label.invalid { position:absolute; left:20px; top:-20px; display:block; color:#747474; width:auto; font:11px/11px Dotum; text-align:left; line-height:11px; border:1px solid #FF8033; padding:5px; background:#ffffff; }
<style>
<form id="fo_insert_member" action="./" method="post">
<table cellspacing="0">
  <tr>
    <th><div>아이디</div></th>
    <td class="wide">
      <div class="relatived"><input type="text" name="user_id" value="" class="inputTypeText" id="user_id" /></div>
      <p>사용자 ID는 3~20자 사이의 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.</p>
    </td>
  </tr>
  <tr>
    <th><div>비밀번호</div></th>
    <td class="wide">
      <div class="relatived"><input type="text" name="password" value="" class="inputTypeText" id="password" /></div>
      <p>사용자 ID는 3~20자 사이의 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.</p>
    </td>
  </tr>
  <tr>
    <th><div>비밀번호 확인</div></th>
    <td class="wide">
      <div class="relatived"><input type="text" name="password2" value="" class="inputTypeText" id="password2" /></div>
      <p>사용자 ID는 3~20자 사이의 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.</p>
    </td>
  </tr>
</table>
</form>
JS
var add_member_srl = "?member_srl=회원 번호";
var query_user_id = "아이디 체크할 경로";
var query_member = "폼 전송할 페이지";

$("#fo_insert_member").validate({
  errorClass:"invalid",
  rules: {
    user_id: { 
      required:true, minlength:3, maxlength:20, remote:{ type: "post", url: query_user_id }
    },
    password: {
      required:true, minlength:6, maxlength:20
    },
    password2: {
      required:true, equalTo:"#password"
    }
  },
  message: {
    user_id: {
      required: "사용자 ID를 입력해주세요.",
      user_id: "사용자 ID는 영문+숫자로 이루어져야 하며 영문으로 시작되어야 합니다.",
      remote: "사용할수 없는 아이디입니다."
    },
    password: {
      required: "사용자 비밀번호를 입력해주세요.",
      minlength: "비밀번호는 6자 이상 입력해주세요.",
      maxlength: "비밀번호는 20자까지 입력 가능합니다."
    },
    password2: {
      required: "비밀번호를 입력해주세요.",
      equalTo: "비밀번호가 일치하지 않습니다."
    },
  },
  submitHandler: function(form) {
    $.post( query_member, $(form).serialize(),
    function( data ) {
     // 폼 전송후 할 행동
    });
  }
})

옵션
debug
기본값: false
디버그 할수 있도록 입력값이 유효해도 전송하지 않는다.
$(".test").validate({
  debug: true
})
submitHandler
폼이 submit 될때 마지막으로 먼가 할수 있도록 핸들을 넘겨준다.

'프로그래밍 > jquery' 카테고리의 다른 글

jquery dom 객체 존재 여부 체크  (1) 2010.09.10
jQuery 기본 셀렉터  (0) 2010.06.10
[02] selector  (0) 2009.09.23
[01] jQuery Core  (0) 2009.09.23
[플러그인] 쿠키  (0) 2009.09.23
And

jquery dom 객체 존재 여부 체크

|

요즘 스크립트 작업은 대부분 jQuery에 의존하고 있다.

작업을 하다 객체가 존재하는가 하지않는가가 필요해서 코딩을 약간 해봤는데 무조건 객체가 존재한다고 나와버린다.


보통 자바스크립트에서는

alert(getElementById("id값"));
이렇게 적으면 존재유무가 표시되는데....

alert($("#id값));
jQuery도 비슷하게 했는데 안된다.

그래서 검색을 하다보니 jQuery는 다른 방식으로 객체를 찾아내는걸 알게 되었다.



alert( $("#id값").length );
위와 같이 수행했을경우 id값이 존재하면 1 이상을, 존재하지 않으면 0을 리턴한다.

존재할때 계속 코드를 수행하게 만들기 위해서는

if ( $("#id값") > 0 ) {
     //수행할 코드
}


이제 좀 잘되는거 같다.

'프로그래밍 > jquery' 카테고리의 다른 글

validation(검증) 플러그인  (0) 2010.10.20
jQuery 기본 셀렉터  (0) 2010.06.10
[02] selector  (0) 2009.09.23
[01] jQuery Core  (0) 2009.09.23
[플러그인] 쿠키  (0) 2009.09.23
And

jQuery 기본 셀렉터

|


# 기본 셀렉터


* : 모든 엘리먼트와 일치

E : 태그명이 E인 모든 엘리먼트와 일치

E F : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치

E>F : E의 바로 아래 자식이면서 태그명이 F인 모든 엘러먼트와 일치

E+F : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치

E~F : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치

E:has(F) : 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치

E.C : 클래스명 C를 가지는 모든 엘리먼트 E와 일치, E의 생각은 *.C와 동일함

E#I : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함

E[A] : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A=V] : 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A^=V] : 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A$=V] : 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A*=V] : 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치



# 위치기반 셀렉터


:first : 페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫번째 링크를 반환함

:last : 페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환함

:first-child : 첫번째 자식 엘리먼트. li:first-child는 각 리스트의 첫번째 아이템을 반환한다.

:last-child : 마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.

:only-child : 형제가 없는 모든 엘리먼트 반환

:nth-child(n) : n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두번째 리스트 아이템을 반환함

:nth-child(event|odd) : 짝수 또는 홀수 자식 엘리먼트. li:nth-child(event)은 각 목록의 짝수 번째 자식 엘리먼트 반환

:nth-child(Xn + Y) : 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인경우 생략가능하다. li:nth-child(3n)은 3의 배수번째 아이템을 반환, li:nth-child(5n+1) 은 5의 배수 +1번째 아이템을 반환

:event / :odd : 페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수번째 아이템을 반환한다.

:eq(n) : n번째로 일치하는 엘리먼트

:gt(n) : n번째 엘리먼트(포함안됨) 이후의 엘리먼트와 일치

:lt(n) : n번째 엘리먼트(포함안됨) 이전의 엘리먼트와 일치



# 필터 셀럭터

:animated : 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

:button : 모든 버튼을 선택함(input[type=submit], input[type=reset], input[type=button], button)

:checkbox : 체크박스 엘리먼트만 선택(input[type=checkbox])

:checked : 선택된 체크박스나 라디오 버튼만을 선택

:contains(foo) : 텍스트 foo를 포함하고 있는 엘리먼트만 선택

:disabled : 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.

:enabled : 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.

:file : 모든 파일 엘리먼트를 선택함(input[type=file])

:header : 헤더 엘리먼트만 선택한다. 예를 들어 <h1>부터 <h6>엘리먼트만 선택한다.

:hidden : 감춰진 엘리먼트만 선택한다.

:image : 폼 이미지를 선택한다.(input[type=image])

:input : 폼 엘리먼트만 선택한다.(input, select, textarea, button)

:not(filter) : 필터의 값을 반대로 변경한다.

:parent : 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.

:password : 패스워드 엘리먼트만 선택한다. (input[type=password])

:radio : 라디오 버튼 엘리먼트만 선택한다.(input[type=radio])

:reset : 리셋 버튼을 선택(input[type=reset], button[type=reset])

:selected : 선택된 엘리먼트만 선택한다.

:submit : 전송 버튼을 선택한다.(button[type=submit], input[type=button])

:text : 텍스트 엘리먼트만 선택(input[type=text])

:visible : 보이는 (visible)엘리먼트만 선택한다.


http://neokido.tistory.com/entry/JQuery-기본-Selector

'프로그래밍 > jquery' 카테고리의 다른 글

validation(검증) 플러그인  (0) 2010.10.20
jquery dom 객체 존재 여부 체크  (1) 2010.09.10
[02] selector  (0) 2009.09.23
[01] jQuery Core  (0) 2009.09.23
[플러그인] 쿠키  (0) 2009.09.23
And

[02] selector

|

jQuery 셀렉터

: CSS의 셀렉터와 같은 방법으로 이용한다.

body {                            // 문서상에 body 요소 안의 모든 색상이 #000000으로 적용
     color:#000000;
}
input.texter {                   // 문서상에 input 요소 중 class값이 texter인 요소에 넓이는 100px, 높이는 30px로 적용
     width: 100px;
     height: 30px;
}
#board {                         // 문서상에 id값이 board인 요소에 line-height가 적용
     line-height: normal;
}

$("#myDiv").css("border","3px solid red");

'프로그래밍 > jquery' 카테고리의 다른 글

jquery dom 객체 존재 여부 체크  (1) 2010.09.10
jQuery 기본 셀렉터  (0) 2010.06.10
[01] jQuery Core  (0) 2009.09.23
[플러그인] 쿠키  (0) 2009.09.23
팝업창 생성  (0) 2009.09.23
And

[01] jQuery Core

|

jquery를 사용하는 방법.

$(function(){
     // Document is ready
});

이렇게 사용한다.

$는 jquery라는 것을 알리기위한 asp에서는 <% %>, php <?php ?> 정도인거 같다.

$대신 jQuery를 적어도 무방하다.

http://jquery.com

'프로그래밍 > jquery' 카테고리의 다른 글

jQuery 기본 셀렉터  (0) 2010.06.10
[02] selector  (0) 2009.09.23
[플러그인] 쿠키  (0) 2009.09.23
팝업창 생성  (0) 2009.09.23
[플러그인] 툴팁  (0) 2009.09.23
And
prev | 1 | 2 | next