'jQuery'에 해당되는 글 2건

2012.03.05 jQuery Selector 4
2012.02.28 jQuery Form Validation Plugin 5

jQuery Selector

자바스크립트/JQuery / 2012. 3. 5. 18:56

컨트롤할 HTML태그를 셀렉터(Selector)로 지정할 수 있다.

$(function(){

$("셀렉터").jQuery 명령

});

1. CSS 셀렉터들

1.1 태그셀렉터

예] '목록태그<li>의 css 컬러 속성값을 블루로 바꿔라'

$(function(){

$("li").css("color","blue");

});

1.2 ID셀렉터, Class(클래스)셀렉터

예] '목록태그<li>중 id="first"인 요소를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li#first").css("color","blue");

});

예] '목록태그<li>중 class="first"인 요소를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li.first").css("color","blue");

});

1.3 자손셀렉터

포인트는 부모 자식요소 사이를 한칸뛰우기

예] 'class="first"인 요소의 자손, <em>을 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$(".first em").css("color","blue");

});

1.4 유니버셜셀렉터

예] '목록태그<li>의 모든자손요소(*)들을 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li *").css("color","blue");

});

1.5 그룹셀렉터

여러개의 셀렉터를 ,(콤마)로 지정

예] 'id="first"인 요소와 id="second"인 요소를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("#first, #second").css("color","blue");

});

2. CSS2 셀렉터

2.1 자식셀렉터

예] '목록태그<li>의 자식요소중 <strong>태그를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li > strong").css("color","blue");

});

2.2 인접셀렉터

예] 'id="first"인 목록태그<li> 바로 다음에 오는 요소<li>를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("#first + li").css("color","blue");

});

2.3 first-child클래스

예] '처음 나오는 <li>요소를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li:first-child").css("color","blue");

});

3. CSS3셀렉터

3.1 간접셀렉터

특정 셀렉터 뒤에 있는 태그를 선택할 수 있다. 셀렉터와 태그사이 ~(틸드)로 연결한다.

예] ' id="second"인 요소뒤의 나오는 <li>태그들의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("#second ~ li").css("color","blue");

});

3.2 부정 수도클래스 (Negation pseudo-class)

셀렉터 안 태그 중 특정 조건을 제외한 태그를 지정할 수 있다.

셀렉터 뒤에 :not(...)을 붙이고 제외 조건을 명시한다.

예] '첫번째 <li>를 제외하고 <li>태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li:not(first-child)").css("color","blue");

});

3.3 empty 수도클래스 (empty pseudo-class)

자식 태그나 텍스트를 포함하지 않는 태그를 선택할 수 있다.

셀렉터 뒤에 :empty를 붙인다.

예] '내용이 없는 <li>태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li:empty").css("color","blue");

});

3.4 nth-child 수도클래스 (nth-child pseudo-class)

셀렉터의 태그 중 번호를 지정하여 태그를 지정할 수 있다.

짝수는 $("li:nth-child(even)"), 홀수는 $("li:nth-child(odd)"), 3의 배수면 $("li:nth-child(3n)")으로 지정할 수 있다.

예] '<li>태그중 두번째 <li>태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li:nth-child(2)").css("color","blue");

});

3.5 last-child 수도클래스 (last-child pseudo-class)

특정 셀렉터 안에 가장 마지막 태그를 선택할 수 있다.

예] '<li>태그중 가장 마지막 <li>태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li:last-child").css("color","blue");

});

3.6 only-child 수도클래스 (only-child pseudo-class)

셀렉터에 특정 태그가 한 개만 포함되어 있을 경우 선택할 수 있다.

예] '<li>태그 안에 <span>태그가 한 개만 포함하고 있는 경우, 그 <span>태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li span:only-child").css("color","blue");

});

4 CSS 속성 셀렉터

4.1 [attribite]

특정 속성을 가진 태그를 선택 할 수 있다.

예] ' id속성을 가진 태그들의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("[id]").css("color","blue");

});

4.2 [attribite='value']

속성이 특정한 값을 가진 태그를 선택 할 수 있다.

예] ' title 속성값이 "img"인 태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("[title=img]").css("color","blue");

});

4.3 [attribite!='value']

특정 속성이 특정한 값을 갖지 않는 태그를 선택 할 수 있다.

예] ' title 속성값이 "img"가 아닌 태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("[title=img]").css("color","blue");

});

4.4 [attribite^='value']

특정 속성값이 특정 문자열로 시작되고 있는 태그를 선택 할 수 있다.

예] ' title 속성값이 "a"로 시작하는 태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("[title^='a']").css("color","blue");

});

4.5 [attribite$='value']

특정 속성값이 특정 문자열로 끝나는 태그를 선택 할 수 있다.

예] ' title 속성값이 "z"로 끝나는 태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("[title$='z']").css("color","blue");

});

4.6 [attribite*='value']

특정 문자열을 포함하고 있는 태그를 선택 할 수 있다.

예] ' title 속성의 값이 "ing"를 포함하고 있는 태그의 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("[title*='ing']").css("color","blue");

});

5. 제이쿼리(jQuery) 자체 필터

제이쿼리(jQuery)에서는 CSS 셀렉터 이외에도 자체적으로 제공하는 셀렉터인 "필터"를 이용할 수 있다.

5.1 first 필터/ last 필터

셀렉터 안에서 첫 태그를 "first 필터", 마지막 태그를 "last 필터"로 지정할 수 있다.

$("li:first").css("color","blue");

$("li:last").css("color","blue");

5.2 even 필터/ odd 필터

셀렉터 안에서 짝수 번째 태그를 "even필터", 홀수 번째 태그를 "odd필터"로 지정할 수 있다.

$("li:even").css("color","blue");

$("li:odd").css("color","blue");

5.3 eq 필터/ gt 필터 / lt 필터

셀렉터 안에서 특정 순서의 태그를 "eq 필터"(equal), 특정 태그보다 앞의 태그를 "lt 필터"(less than), 뒤의 태그를 "gt필터"(greater than)로 선택할 수 있다.

$("li:lt(1)").css("color","red");

$("li:eq(1)").css("color","green");

$("li:gt(1)").css("color","blue");

5.4 header 필터

h1~h6까지의 heading 태그를 함께 선택할 수 있다.

$(":header)").css("color","blue");

5.5 contains 필터 / has 필터

"contains필터"는 특정 문자열이 포함되어 있는 태그를 "has필터"는 특정 태그가 포함되어 있는 태그를 선택할 수 있다.

$("li:contains('동영상')").css("color","blue");

$("li:has(em)").css("color","green");

5.6 parent 필터

어떤 태그의 자식 태그 혹은 문자열을 포함하는 태그를 선택할 수 있는 empty 수도클래스와 반대되는 필터이다.

$("li:parent").css("color","red");

[출처] [제이쿼리(jQuery)기본] 셀렉터(Selector) 정리|작성자 그레이쓰

'자바스크립트 > JQuery' 카테고리의 다른 글

jQuery checkbox control (2)	2012.06.14
jQuery Form Validation Plugin (5)	2012.02.28

Posted by GUCCI

, |

jQuery Form Validation Plugin

자바스크립트/JQuery / 2012. 2. 28. 08:36

jQuery Form Validation Plugin

jQuery의 validation(검증) 플러그인이다. 일단 데모 페이지부터 보면 어떤 건지 알 수 있을 것이다.

validation 플러그인 데모 페이지

사용법은 사실 데모 페이지 긁어와서 이름만 고치는 정도로도 알 수 있을 텐데, 몇 가지 써 보자.

두 가지 방법으로 사용할 수 있다. 첫 번째는 심플한 방법이다.

첫 번째 방법

이 방법은 위 데모 페이지에서 위쪽에 있는 예시에 사용된 방법이다.

△이 첫 번째 방법은 javascript 코드가 간단하다는 장점이 있는 반면, 메시지가 영어로 나오고, html 코드에 들어갈 게 많아진다는 단점이 있다. 비표준 어트리뷰트가 사용된다는 점도 단점이다.

1

2

3

4

$(function(){
  // submit 시켰을 때 #form을 검증합니다.
  $("#form").validate();
});

javascript 코드에는 위와 같이 쓰고(물론 jquery.js를 위 코드 전에 호출해야 하는 건 당연하다.) html에는 이렇게 적는 것이다.

<form id="form" method="get" action="">
    <fieldset>
        <legend>잘 적어 주세요</legend>
        <p>
            <label for="cname">이름 (필수, 최소 2글자)</label>
            <input id="cname" name="name" class="required" minlength="2" />
        <p>
            <label for="cemail">E-Mail (필수)</label>
            <input id="cemail" name="email" class="required email" />
        </p>
        <p>
            <label for="curl">URL (선택)</label>
            <input id="curl" name="url" class="url" value="" />
        </p>
        <p>
            <label for="ccomment">남기실 말씀 (필수)</label>
            <textarea id="ccomment" name="comment" class="required"></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </fieldset>
</form>

위 코드에서 볼 수 있는 것처럼, html코드에 적어 주면 된다. 정리하면 다음과 같다.

필수요소인 경우 class=”required” 라고 쓴다.
email 검증을 해야 하는 경우 class=”email”이라고 쓴다.
필수이면서 이메일 검증을 해야 하는 경우에는 복수 클래스 병기하는 방법을 따라 class=”required email” 이라고 적으면 되고 나머지도 마찬가지다.
최소 글자수가 있는 경우 minlength=”숫자” 형태로 적는다.

위와 같은 방법으로 했을 때의 최대 단점은 메시지가 영어로 나온다는 점이다. 필수 요소인데 안 적은 경우 ‘This field is required.’라는 메세지가 뜬다. 메세지를 한국어로 하고 싶다면 두 번째 방법을 사용하거나 내가 만든 한국어 확장 파일을 사용하면 된다. 한국어 확장의 코드는 아래와 같다.

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: KO
 * Filename: messages_ko.js
 */
jQuery.extend(jQuery.validator.messages, {
    required: "반드시 입력해야 합니다.",
    remote: "수정 바랍니다.",
    email: "이메일 주소를 올바로 입력하세요.",
    url: "URL을 올바로 입력하세요.",
    date: "날짜가 잘못 입력됐습니다.",
    dateISO: "ISO 형식에 맞는 날짜로 입력하세요.",
    number: "숫자만 입력하세요.",
    digits: "숫자(digits)만 입력하세요.",
    creditcard: "올바른 신용카드 번호를 입력하세요.",
    equalTo: "값이 서로 다릅니다.",
    accept: "승낙해 주세요.",
    maxlength: $.validator.format("{0}글자 이상은 입력할 수 없습니다."),
    minlength: $.validator.format("적어도 {0}글자는 입력해야 합니다."),
    rangelength: $.validator.format("{0}글자 이상 {1}글자 이하로 입력해 주세요."),
    range: $.validator.format("{0}에서 {1} 사이의 값을 입력하세요."),
    max: $.validator.format("{0} 이하로 입력해 주세요."),
    min: $.validator.format("{0} 이상으로 입력해 주세요.")
});

다른 단점도 있다. minlength 라는 어트리뷰트는 웹표준 검증기를 통과하지 못한다. 표준 점수를 깎아먹을 수 있다는 것이다. 그게 사용성보다 중요한 요소는 아니지만, 웹을 잘 모르는 상관들에게는 중요할지 모른다.

두 번째 방법

이 방법은 모든 요소를 javascript 단에서 처리하기 때문에 가장 깔끔한 코드를 생산할 수 있다.

일단 코드를 보자.

$(function(){
  // validate signup form on keyup and submit
  $("#signupForm").validate({
    rules: {
      name: "required",
      password: {
        required: true,
        minlength: 8
      },
      confirm_password: {
        required: true,
        minlength: 8,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      name: "이름을 입력해 주세요",
      password: {
        required: "암호를 입력해 주세요",
        minlength: "암호는 8자 이상이어야 합니다."
      },
      confirm_password: {
        required: "암호를 한 번 더 입력해 주세요",
        minlength: "암호는 8자 이상이어야 합니다.",
        equalTo: "암호가 일치하지 않습니다."
      },
      email: "형식에 맞는 이메일을 입력해 주세요.",
      agree: "정책 동의에 체크해 주세요"
    }
  });
});

위에서 눈여겨 볼 점은 validate 안에 들어있는 {} 안쪽 부분이다. 여기 옵션이 들어간다.

이 옵션 중 핵심적으로 사용된 것인 rules 옵션이다.

1	`rules: {옵션오브젝트}`

이런 형식으로 사용된다. 옵션 오브젝트는 어떻게 구성되는지 보자.

1	`{name:` `"required"}`

이렇게 씌인 게 있다. 이것은 name이 “name”인 놈은 필수라는 뜻이다. 다른 방식으로 적용할 수도 있는데 한 input(혹은 textarea)에 여러 개의 옵션을 걸 때다.

1	`email: {required:` `true, email:` `true}`

이런 식으로 들어가는데, 이 때 email: true 항목은 당연히 이메일형식 검증을 하겠다는 뜻이다.

rules 옵션 아래쪽에 있는 message 옵션은 rules에 대응되는 메시지들을 적어주면 된다. 위 형식을 참고하면 될 것이므로 굳이 일일이 설명하지 않겠다.

다음 html 코드를 보자.

<form id="signupForm" method="get" action="">
  <fieldset>
    <legend>정보를 입력해 주세요</legend>
    <p>
      <label for="name">Lastname</label>
      <input id="name" name="name" />
    </p>
    <p>
      <label for="password">암호</label>
      <input id="password" name="password" type="password" />
    </p>
    <p>
      <label for="confirm_password">암호확인</label>
      <input id="confirm_password" name="confirm_password" type="password" />
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" />
    </p>
    <p>
      <label for="agree">개인정보 보호정책 동의</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree" />
    </p>
    <p>
      <input class="submit" type="submit" value="제출"/>
    </p>
  </fieldset>
</form>

위 코드는 html 검증을 통과할 수 있는 깔끔한 코드다. label에 있는 for 어트리뷰트는 웹표준에 맞는 어트리뷰트다. 이 라벨이 어떤 인풋에 대한 것인지, 해당 인풋의 id를 써 주는 부분이다.

그러나 jQuery 검증 플러그인의 자바스크립트 코드에서 위 폼을 인식할 때는 name 어트리뷰트를 기준으로 하는 것이므로, name을 신경쓰면 된다. 즉, label은 선택이니 너무 눈 돌아가지 않아도 된다는 말이다.

name을 바탕으로 하므로 checkbox나 radio 같은 것도 검증이 가능하게 된다.

필수다! 하는 메시지의 스타일

자, 그럼 required 라고 써준 input에 입력을 안 하고 submit 버튼을 눌렀을 때(이 경우를 ‘에러가 났을 때’라고 표현하자.) 나올 스타일은 어디서 결정할까?

그건 따로 써줘야 한다. 미리 준비된 css는 제공하고 있지 않은 듯하다.

사용되는 페이지의 head 부분에 아래처럼 써 주면 된다.

두 경우를 제공하겠다. 첫 번째 것은 메시지가 input의 오른쪽에 나오는 디자인이다. 두 번째 것은 메시지가 input의 하단에 나오는 디자인이다. 둘 다 input의 테두리가 빨간 점선으로 변하고, 메시지도 빨간 색으로 뜬다. css 지식이 조금만 있다면 수정해서 자신이 원하는대로 사용할 수 있을 것이다.

<style type="text/css">
input.error, textarea.error{
  border:1px dashed red;
}
label.error{
  margin-left:10px;
  color:red;
}
</style>

위 스타일이 에러메시지를 input 오른쪽 공간에 띄워 주는 스타일이다.

<style type="text/css">
input.error, textarea.error{
  border:1px dashed red;
}
label.error{
  display:block;
  color:red;
}
</style>

이 스타일은 에러메시지를 input 하단에 띄워 주는 스타일이다.

jQuery Validation Plugin API 문서

API 문서를 보는 건 항상 귀찮은 일이지만, 유용한 일이기도 하다.

내가 보기에 API 문서 중 핵심은 rules다.

다양한 옵션의 API가 나와있는 주소를 곧장 링크할 테니 참고해서 보기 바란다.

jQuery 검증 플러그인 API 문서 : validate 함수의 option 사용법

'자바스크립트 > JQuery' 카테고리의 다른 글

jQuery checkbox control (2)	2012.06.14
jQuery Selector (4)	2012.03.05

Posted by GUCCI

, |

«이전 1 다음»

BLOG

카테고리

달력

공지사항

태그목록

최근에 올라온 글

'jQuery'에 해당되는 글 2건

jQuery Selector

'자바스크립트 > JQuery' 카테고리의 다른 글

jQuery Form Validation Plugin

jQuery Form Validation Plugin

첫 번째 방법

두 번째 방법

필수다! 하는 메시지의 스타일

jQuery Validation Plugin API 문서

'자바스크립트 > JQuery' 카테고리의 다른 글

최근에 달린 댓글

글 보관함

링크

티스토리툴바