SlideShare una empresa de Scribd logo
1 de 18
Descargar para leer sin conexión
HACOSA jQuery STUDY
#11. HTML 폼의 기능 강화하기(플러그인 사용)
폼 유효성 검사하기
• Vaildation 플러그인 사용
  ‒ 기본 메서드
   → required : 이 메서드로 지정이 되면 반드시 입력되어야 하는 필드로 검사
   → equalTo : 주로 비밀번호 확인 (Confirm Password)에 사용
   → email, url, date, dateISO, dateDE, number, numberDE, digits, creaditcard :
     로케일( local)과 관련한 작은 차이를 반영하며 특정 데이터 형식 검사
   → min, max, range : 숫자의 값을 검사
   → minlength, maxlength, rangelength : 문자의 개수 검사
   → accept : file input 사용시 파일 확장자 검사


 ‒ 사용자 정의 메서드
   →특화된 요구 사항에 따라 플러그인을 확장 할 수 있는 방법

      $.validator.addMethod(Alias, VaidateFunction, ErrorMessage);
폼 유효성 검사하기
‒ 규칙
 → 클래스와 어트리뷰트를 메타데이터로 사용
    <input type=“text” name=“userID" class=“required" />
 → Rule Option 사용
    $("#myform").validate({
        rules: {
           name: {
              required : true,
              minlength : 2
           },
           email : “require”
        }
    });
폼 유효성 검사하기
‒ 오류 메시지
 → 인라인으로 지정 : title 어트리뷰트 이용
   <input name=“email” title=“A valid email address is required” />
 → message 옵션으로 지정
   $("#myform").validate({
       message: {
         email : {
           required : “Required” ,
           email : “Not a valid email address”
         }
       }
   });

‒ 지역화
 → Validation 플러그인은 현재 41개의 지역화를 제공
 → messages_xx.js 파일을 참조하는 방식으로 사용
폼 유효성 검사하기
‒ 오류 요소
 → 기본적으로 오류메세지는 유효성 검사 대상 요소의 id 를 for 어트리뷰트로 가
  지는 label 요소로 추가 됨.
 → 다른 요소 형식 지정 방법
   $(“#myform”).validate({
       errorElement : “em”
   });

 →추가된 오류 메시지의 위치 변경 :
  • errorPlacement 옵션 사용

     $(“#myform”).validate({
         errorPlacement : function(error, element){
            error.appendTo(element.parent(“td”).next(“td”);
         }
     });
폼 유효성 검사하기
 → 폼 상단에 메시지를 표기 : errorContainer 옵션 사용
    $(“#myform”).validate({
        errorContainer : “#messageBox1”
    });

 → errorContainer + errorLabelContainer 옵션 사용
   : 오류 label 요소가 input 요소 다음에 놓여지는 것이 아니라,
   errorContainer 로 지정한 요소에 추가 됨


 → errorContainer + wrapper 옵션 사용

    var contanier = $(“div.container”);
    $(“#myform”).validate({
        errorContainer : container,
        errorLabelContainer : $(“ul”, container),
        wrapper : “li”
    });
폼 유효성 검사하기
‒ 전송 처리하기
 → 기본적으로 유효성 검사를 통과할 경우 일반적인 폼 전송과 마찬가지로 동작
 → submitHandler 옵션으로 수동으로 submit 할 수도 있다.
    $(“#myform”).validate({
        submitHandler : function(form){
          if( confirm(“정말 전송 하겠수?”))
              $(form).submit();
        }
    });



‒ 기타 자세한 정보는
 http://docs.jquery.com/Plugins/Validation 에서 확인 가능
마스크 기능을 제공하는 input 필드 만들기
• Masked Input Plugin
  ‒ http://digitalbush.com/projects/masked-input-plugin/#demo
  ‒ 각 변수 문자에 대해 “ _ “ 를 보여줌
    $(“#phone”).mask(“(999) 999-9999”)
      (_ _ _) _ _ _ - _ _ _ _

  ‒ 정의된 마스크
    A : [a-z],[A-Z]
    9 : [0-9]
    * : [a-z],[A-Z],[0-9]
    ? : 이후 모든 문자는 선택적임을 의미
  ‒ 사용자 정의마스크

    $.mask.definitions['~']='[+-]';
    $("#eyescript").mask("~9.99 ~9.99 999");
텍스트 필드 자동 완성하기
• jQuery Ui의 autocomplete 위젯
   ‒ 데이터를 자바스크립트 배열을 이용하여 출력

   var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
   'September', 'October', 'November', 'December'];

   $(“#month”).autoComplete({
       source : months
   });

 ‒ 데이터를 서버측의 자원으로 부터 가져와서 출력
   $(“#month”).autoComplete({
       source : “addresses.php”
   });
값의 범위 선택하기
• jQuery UI의 Slide 위젯
   ‒ 범위 슬라이더를 사용하여 두 개 텍스트 input 요소 값을 변경 할 수 있다
   $(“#slider”).slide();

    var slider = $("#slider-range").slider({
       range: true,
       min: 0,
       max: 500,
       values: [75, 300],
       slide: function(event, ui) {
          $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
       }
   });
   $("#amount").val('$' + slider.slider("values", 0) + ' - $' + slider.slider("values", 1));
범위가 제한 된 값 입력하기
• jQuery UI의 Spinner 위젯 사용
   $(“#value”).spinner();
 ‒ Spinner 플러그인을 사용하면 값을 증가/감소 시키기 위한 버튼을 추가 할
   수 있으며, 위/아래 버튼을 클릭하거나 input 요소에 포커스를 준 다음 커서
   키를 위/아래로 눌러서 값을 변경 할 수 있다.
 ‒ 기본 옵션
     • min : 하한 값 설정
     • max : 상한 값 설정
     • stepping : 증가값 설정
   var currency = $("#currency").change(function() {
       $("#amount").spinner("option", "currency", $(this).val()).blur();
   });
   $("#amount").spinner({
       currency: currency.val(),
       min: 5,
       max: 1000,
       step: 5
   });
백그라운드에서 파일 업로드하기
• jQuery의 Form 플러그인
   ‒ Ajax 기반의 백그라운드 업로드
   <form id=“uploadform”>
      <input type=“file” id=“fileupload” name=“fileupload” />
      <input type=“submit” value=“Upload!” />
   </form>

   $(“#uploadform”).ajaxForm({
       success: function(){
         alert(“Upload completed!”);
       }
   });
텍스트 입력 길이를 제한하기
• Maxlength 플러그인
  ‒ textarea 요소 앞이나 뒤에 “Characters left : x” 라는 표시기를 추가
    <form action="/comment">
       <p>Characters left: <span class="charsLeft">10</span></p>
       <textarea name="commentbody" maxlength="10"></textarea>
    </form>

    $(“textarea”).maxlength();
Input 필드 위에 라벨 나타내기
• Watermark 플러그인
  ‒ HTML5의 placeholder 기능과 비슷
    $(“#search”).watermark(“Search”);
콘텐트에 따라 input 요소 크게 만들기
• Elastic 플러그인
  ‒ 처음에는 기본적인 높이로 시작하지만, 사용자가 텍스트를 어느 정도 입력
    하면 높이가 자동으로 증가
   <textarea id=“commentbody”></text>
   $(“#commentbody”).elastic();
날짜 선택하기
• jQuery UI의 Datepicker 플러그인
   <label for="startAt">Start at:</label>
   <input type="text" name="startAt" id="startAt" />

   $(“#startAt”).datepicker();
 ‒ from ~ to 형식의 날짜 선택 만들기
   <label for="from">From</label>
   <input type="text" id="from" name="from" class="hasDatepicker">
   <label for="to">to</label>
   <input type="text" id="to" name="to" class="hasDatepicker">

   var dates = $('#from, #to').datepicker({
       defaultDate: "+1w",                                 // 기본 날짜 설정
       changeMonth: true,                                  // 월 변경 가능 여부 설정
       numberOfMonths: 3,                                  // 한번에 출력할 월 갯수
       onSelect: function(selectedDate) {                  // 날짜선택 시 발생되는 이벤트
         var option = this.id == "from" ? "minDate" : "maxDate";
         dates.not(this).datepicker("option", option, new Date(selectedDate));
       }
   });
날짜 선택하기
‒ showOn 옵션
 → focus (default) : Input 요소가 focus를 받을 때 달력을 보여줌
 → button : 버튼을 클릭해야 달력을 보여줌
 → both : focus, button 방식 모두 허용
  $(“#datepicker”).datepicker({
      showOn : ‘button’,
      buttonImage : ‘image/calendar.gif’,
      buttonImageOnly : true
  });

‒ 지역화
 → ui.datepicker-xx.js 파일로 41개의 로케일 지원
END

Más contenido relacionado

La actualidad más candente

5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storageJinKyoungHeo
 
[JavaScript Library] - Simple jQuery
[JavaScript Library] - Simple jQuery[JavaScript Library] - Simple jQuery
[JavaScript Library] - Simple jQuery문학청년
 
다시보는 Angular js
다시보는 Angular js다시보는 Angular js
다시보는 Angular jsJeado Ko
 
파이썬 언어 기초
파이썬 언어 기초파이썬 언어 기초
파이썬 언어 기초beom kyun choi
 
5-1. html5 graphics
5-1. html5 graphics5-1. html5 graphics
5-1. html5 graphicsJinKyoungHeo
 
Django와 flask
Django와 flaskDjango와 flask
Django와 flaskJiho Lee
 
처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1성일 한
 
[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기YoungSu Son
 
Ajax 기술문서 - 김연수
Ajax 기술문서 - 김연수Ajax 기술문서 - 김연수
Ajax 기술문서 - 김연수Yeon Soo Kim
 
Web Components 101 polymer & brick
Web Components 101 polymer & brickWeb Components 101 polymer & brick
Web Components 101 polymer & brickyongwoo Jeon
 
12주차 간단한 방명록 제작 - 두번째
12주차 간단한 방명록 제작 - 두번째12주차 간단한 방명록 제작 - 두번째
12주차 간단한 방명록 제작 - 두번째Yoonwhan Lee
 
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613KTH, 케이티하이텔
 

La actualidad más candente (20)

5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storage
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
[JavaScript Library] - Simple jQuery
[JavaScript Library] - Simple jQuery[JavaScript Library] - Simple jQuery
[JavaScript Library] - Simple jQuery
 
다시보는 Angular js
다시보는 Angular js다시보는 Angular js
다시보는 Angular js
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
Nexacro
NexacroNexacro
Nexacro
 
파이썬 언어 기초
파이썬 언어 기초파이썬 언어 기초
파이썬 언어 기초
 
5-1. html5 graphics
5-1. html5 graphics5-1. html5 graphics
5-1. html5 graphics
 
Django와 flask
Django와 flaskDjango와 flask
Django와 flask
 
처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1
 
4-2. ajax
4-2. ajax4-2. ajax
4-2. ajax
 
[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기
 
Hacosa j query 2th
Hacosa j query 2thHacosa j query 2th
Hacosa j query 2th
 
Hacosa jquery 1th
Hacosa jquery 1thHacosa jquery 1th
Hacosa jquery 1th
 
Ajax 기술문서 - 김연수
Ajax 기술문서 - 김연수Ajax 기술문서 - 김연수
Ajax 기술문서 - 김연수
 
Hacosa j query 8th
Hacosa j query 8thHacosa j query 8th
Hacosa j query 8th
 
Web Components 101 polymer & brick
Web Components 101 polymer & brickWeb Components 101 polymer & brick
Web Components 101 polymer & brick
 
Hacosa j query 4th
Hacosa j query 4thHacosa j query 4th
Hacosa j query 4th
 
12주차 간단한 방명록 제작 - 두번째
12주차 간단한 방명록 제작 - 두번째12주차 간단한 방명록 제작 - 두번째
12주차 간단한 방명록 제작 - 두번째
 
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
 

Similar a Hacosa j query 11th

Xe3.0 frontend validator
Xe3.0 frontend validatorXe3.0 frontend validator
Xe3.0 frontend validator승훈 오
 
Html5&css 3장
Html5&css 3장Html5&css 3장
Html5&css 3장홍준 김
 
Javascript 교육자료 pdf
Javascript 교육자료 pdfJavascript 교육자료 pdf
Javascript 교육자료 pdfHyosang Hong
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs기동 이
 
Apache solr소개 20120629
Apache solr소개 20120629Apache solr소개 20120629
Apache solr소개 20120629Dosang Yoon
 
채팅 소스부터 Https 주소까지
채팅 소스부터  Https 주소까지채팅 소스부터  Https 주소까지
채팅 소스부터 Https 주소까지Kenu, GwangNam Heo
 
웹개발자가 알아야할 기술
웹개발자가 알아야할 기술웹개발자가 알아야할 기술
웹개발자가 알아야할 기술jaypi Ko
 
Android 기초강좌 애플리캐이션 구조
Android 기초강좌 애플리캐이션 구조Android 기초강좌 애플리캐이션 구조
Android 기초강좌 애플리캐이션 구조Sangon Lee
 
엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육준일 엄
 
Php faker 를 활용한 의미있는 테스트 데이타 생성
Php faker 를 활용한 의미있는 테스트 데이타 생성Php faker 를 활용한 의미있는 테스트 데이타 생성
Php faker 를 활용한 의미있는 테스트 데이타 생성KwangSeob Jeong
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)연웅 조
 
Android UI Test (Espresso/Kakao)
Android UI Test (Espresso/Kakao)Android UI Test (Espresso/Kakao)
Android UI Test (Espresso/Kakao)MDLicht
 
JSP 프로그래밍 #05 HTML과 JSP
JSP 프로그래밍 #05 HTML과 JSPJSP 프로그래밍 #05 HTML과 JSP
JSP 프로그래밍 #05 HTML과 JSPMyungjin Lee
 
Software Architect day - 웹 프레임워크 종결 - metaworks3
Software Architect day - 웹 프레임워크 종결 -  metaworks3Software Architect day - 웹 프레임워크 종결 -  metaworks3
Software Architect day - 웹 프레임워크 종결 - metaworks3uEngine Solutions
 

Similar a Hacosa j query 11th (20)

Html5
Html5 Html5
Html5
 
Xe3.0 frontend validator
Xe3.0 frontend validatorXe3.0 frontend validator
Xe3.0 frontend validator
 
Html5&css 3장
Html5&css 3장Html5&css 3장
Html5&css 3장
 
Xe hack
Xe hackXe hack
Xe hack
 
Javascript 교육자료 pdf
Javascript 교육자료 pdfJavascript 교육자료 pdf
Javascript 교육자료 pdf
 
시종설 1조
시종설 1조시종설 1조
시종설 1조
 
Meteor2015 codelab
Meteor2015 codelab Meteor2015 codelab
Meteor2015 codelab
 
Hacosa j query 6th
Hacosa j query 6thHacosa j query 6th
Hacosa j query 6th
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs
 
Apache solr소개 20120629
Apache solr소개 20120629Apache solr소개 20120629
Apache solr소개 20120629
 
채팅 소스부터 Https 주소까지
채팅 소스부터  Https 주소까지채팅 소스부터  Https 주소까지
채팅 소스부터 Https 주소까지
 
3-2. selector api
3-2. selector api3-2. selector api
3-2. selector api
 
웹개발자가 알아야할 기술
웹개발자가 알아야할 기술웹개발자가 알아야할 기술
웹개발자가 알아야할 기술
 
Android 기초강좌 애플리캐이션 구조
Android 기초강좌 애플리캐이션 구조Android 기초강좌 애플리캐이션 구조
Android 기초강좌 애플리캐이션 구조
 
엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육
 
Php faker 를 활용한 의미있는 테스트 데이타 생성
Php faker 를 활용한 의미있는 테스트 데이타 생성Php faker 를 활용한 의미있는 테스트 데이타 생성
Php faker 를 활용한 의미있는 테스트 데이타 생성
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
 
Android UI Test (Espresso/Kakao)
Android UI Test (Espresso/Kakao)Android UI Test (Espresso/Kakao)
Android UI Test (Espresso/Kakao)
 
JSP 프로그래밍 #05 HTML과 JSP
JSP 프로그래밍 #05 HTML과 JSPJSP 프로그래밍 #05 HTML과 JSP
JSP 프로그래밍 #05 HTML과 JSP
 
Software Architect day - 웹 프레임워크 종결 - metaworks3
Software Architect day - 웹 프레임워크 종결 -  metaworks3Software Architect day - 웹 프레임워크 종결 -  metaworks3
Software Architect day - 웹 프레임워크 종결 - metaworks3
 

Más de Seong Bong Ji

Hacosa js study 4주차
Hacosa js study 4주차Hacosa js study 4주차
Hacosa js study 4주차Seong Bong Ji
 
Hacosa js study 2주차
Hacosa js study 2주차Hacosa js study 2주차
Hacosa js study 2주차Seong Bong Ji
 
Hacosa js study 1주차
Hacosa js study 1주차Hacosa js study 1주차
Hacosa js study 1주차Seong Bong Ji
 

Más de Seong Bong Ji (9)

Hacosa j query 7th
Hacosa j query 7thHacosa j query 7th
Hacosa j query 7th
 
Hacosa j query 3th
Hacosa j query 3thHacosa j query 3th
Hacosa j query 3th
 
Hacosa js study 8th
Hacosa js study 8thHacosa js study 8th
Hacosa js study 8th
 
Hacosa js study 7th
Hacosa js study 7thHacosa js study 7th
Hacosa js study 7th
 
Hacosa js study 6th
Hacosa js study 6thHacosa js study 6th
Hacosa js study 6th
 
Hacosa js study 5th
Hacosa js study 5thHacosa js study 5th
Hacosa js study 5th
 
Hacosa js study 4주차
Hacosa js study 4주차Hacosa js study 4주차
Hacosa js study 4주차
 
Hacosa js study 2주차
Hacosa js study 2주차Hacosa js study 2주차
Hacosa js study 2주차
 
Hacosa js study 1주차
Hacosa js study 1주차Hacosa js study 1주차
Hacosa js study 1주차
 

Hacosa j query 11th

  • 1. HACOSA jQuery STUDY #11. HTML 폼의 기능 강화하기(플러그인 사용)
  • 2. 폼 유효성 검사하기 • Vaildation 플러그인 사용 ‒ 기본 메서드 → required : 이 메서드로 지정이 되면 반드시 입력되어야 하는 필드로 검사 → equalTo : 주로 비밀번호 확인 (Confirm Password)에 사용 → email, url, date, dateISO, dateDE, number, numberDE, digits, creaditcard : 로케일( local)과 관련한 작은 차이를 반영하며 특정 데이터 형식 검사 → min, max, range : 숫자의 값을 검사 → minlength, maxlength, rangelength : 문자의 개수 검사 → accept : file input 사용시 파일 확장자 검사 ‒ 사용자 정의 메서드 →특화된 요구 사항에 따라 플러그인을 확장 할 수 있는 방법 $.validator.addMethod(Alias, VaidateFunction, ErrorMessage);
  • 3. 폼 유효성 검사하기 ‒ 규칙 → 클래스와 어트리뷰트를 메타데이터로 사용 <input type=“text” name=“userID" class=“required" /> → Rule Option 사용 $("#myform").validate({ rules: { name: { required : true, minlength : 2 }, email : “require” } });
  • 4. 폼 유효성 검사하기 ‒ 오류 메시지 → 인라인으로 지정 : title 어트리뷰트 이용 <input name=“email” title=“A valid email address is required” /> → message 옵션으로 지정 $("#myform").validate({ message: { email : { required : “Required” , email : “Not a valid email address” } } }); ‒ 지역화 → Validation 플러그인은 현재 41개의 지역화를 제공 → messages_xx.js 파일을 참조하는 방식으로 사용
  • 5. 폼 유효성 검사하기 ‒ 오류 요소 → 기본적으로 오류메세지는 유효성 검사 대상 요소의 id 를 for 어트리뷰트로 가 지는 label 요소로 추가 됨. → 다른 요소 형식 지정 방법 $(“#myform”).validate({ errorElement : “em” }); →추가된 오류 메시지의 위치 변경 : • errorPlacement 옵션 사용 $(“#myform”).validate({ errorPlacement : function(error, element){ error.appendTo(element.parent(“td”).next(“td”); } });
  • 6. 폼 유효성 검사하기 → 폼 상단에 메시지를 표기 : errorContainer 옵션 사용 $(“#myform”).validate({ errorContainer : “#messageBox1” }); → errorContainer + errorLabelContainer 옵션 사용 : 오류 label 요소가 input 요소 다음에 놓여지는 것이 아니라, errorContainer 로 지정한 요소에 추가 됨 → errorContainer + wrapper 옵션 사용 var contanier = $(“div.container”); $(“#myform”).validate({ errorContainer : container, errorLabelContainer : $(“ul”, container), wrapper : “li” });
  • 7. 폼 유효성 검사하기 ‒ 전송 처리하기 → 기본적으로 유효성 검사를 통과할 경우 일반적인 폼 전송과 마찬가지로 동작 → submitHandler 옵션으로 수동으로 submit 할 수도 있다. $(“#myform”).validate({ submitHandler : function(form){ if( confirm(“정말 전송 하겠수?”)) $(form).submit(); } }); ‒ 기타 자세한 정보는 http://docs.jquery.com/Plugins/Validation 에서 확인 가능
  • 8. 마스크 기능을 제공하는 input 필드 만들기 • Masked Input Plugin ‒ http://digitalbush.com/projects/masked-input-plugin/#demo ‒ 각 변수 문자에 대해 “ _ “ 를 보여줌 $(“#phone”).mask(“(999) 999-9999”) (_ _ _) _ _ _ - _ _ _ _ ‒ 정의된 마스크 A : [a-z],[A-Z] 9 : [0-9] * : [a-z],[A-Z],[0-9] ? : 이후 모든 문자는 선택적임을 의미 ‒ 사용자 정의마스크 $.mask.definitions['~']='[+-]'; $("#eyescript").mask("~9.99 ~9.99 999");
  • 9. 텍스트 필드 자동 완성하기 • jQuery Ui의 autocomplete 위젯 ‒ 데이터를 자바스크립트 배열을 이용하여 출력 var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; $(“#month”).autoComplete({ source : months }); ‒ 데이터를 서버측의 자원으로 부터 가져와서 출력 $(“#month”).autoComplete({ source : “addresses.php” });
  • 10. 값의 범위 선택하기 • jQuery UI의 Slide 위젯 ‒ 범위 슬라이더를 사용하여 두 개 텍스트 input 요소 값을 변경 할 수 있다 $(“#slider”).slide(); var slider = $("#slider-range").slider({ range: true, min: 0, max: 500, values: [75, 300], slide: function(event, ui) { $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]); } }); $("#amount").val('$' + slider.slider("values", 0) + ' - $' + slider.slider("values", 1));
  • 11. 범위가 제한 된 값 입력하기 • jQuery UI의 Spinner 위젯 사용 $(“#value”).spinner(); ‒ Spinner 플러그인을 사용하면 값을 증가/감소 시키기 위한 버튼을 추가 할 수 있으며, 위/아래 버튼을 클릭하거나 input 요소에 포커스를 준 다음 커서 키를 위/아래로 눌러서 값을 변경 할 수 있다. ‒ 기본 옵션 • min : 하한 값 설정 • max : 상한 값 설정 • stepping : 증가값 설정 var currency = $("#currency").change(function() { $("#amount").spinner("option", "currency", $(this).val()).blur(); }); $("#amount").spinner({ currency: currency.val(), min: 5, max: 1000, step: 5 });
  • 12. 백그라운드에서 파일 업로드하기 • jQuery의 Form 플러그인 ‒ Ajax 기반의 백그라운드 업로드 <form id=“uploadform”> <input type=“file” id=“fileupload” name=“fileupload” /> <input type=“submit” value=“Upload!” /> </form> $(“#uploadform”).ajaxForm({ success: function(){ alert(“Upload completed!”); } });
  • 13. 텍스트 입력 길이를 제한하기 • Maxlength 플러그인 ‒ textarea 요소 앞이나 뒤에 “Characters left : x” 라는 표시기를 추가 <form action="/comment"> <p>Characters left: <span class="charsLeft">10</span></p> <textarea name="commentbody" maxlength="10"></textarea> </form> $(“textarea”).maxlength();
  • 14. Input 필드 위에 라벨 나타내기 • Watermark 플러그인 ‒ HTML5의 placeholder 기능과 비슷 $(“#search”).watermark(“Search”);
  • 15. 콘텐트에 따라 input 요소 크게 만들기 • Elastic 플러그인 ‒ 처음에는 기본적인 높이로 시작하지만, 사용자가 텍스트를 어느 정도 입력 하면 높이가 자동으로 증가 <textarea id=“commentbody”></text> $(“#commentbody”).elastic();
  • 16. 날짜 선택하기 • jQuery UI의 Datepicker 플러그인 <label for="startAt">Start at:</label> <input type="text" name="startAt" id="startAt" /> $(“#startAt”).datepicker(); ‒ from ~ to 형식의 날짜 선택 만들기 <label for="from">From</label> <input type="text" id="from" name="from" class="hasDatepicker"> <label for="to">to</label> <input type="text" id="to" name="to" class="hasDatepicker"> var dates = $('#from, #to').datepicker({ defaultDate: "+1w", // 기본 날짜 설정 changeMonth: true, // 월 변경 가능 여부 설정 numberOfMonths: 3, // 한번에 출력할 월 갯수 onSelect: function(selectedDate) { // 날짜선택 시 발생되는 이벤트 var option = this.id == "from" ? "minDate" : "maxDate"; dates.not(this).datepicker("option", option, new Date(selectedDate)); } });
  • 17. 날짜 선택하기 ‒ showOn 옵션 → focus (default) : Input 요소가 focus를 받을 때 달력을 보여줌 → button : 버튼을 클릭해야 달력을 보여줌 → both : focus, button 방식 모두 허용 $(“#datepicker”).datepicker({ showOn : ‘button’, buttonImage : ‘image/calendar.gif’, buttonImageOnly : true }); ‒ 지역화 → ui.datepicker-xx.js 파일로 41개의 로케일 지원
  • 18. END