집 > 기사 > 웹 프론트엔드 > H5가 사용자 등록 자동 인증을 완료한 상세 예시

H5가 사용자 등록 자동 인증을 완료한 상세 예시

Y2J원래의: 2017-05-24 13:27:072491검색

Html5 사용자 등록자동 확인 기능 구현 예시 코드

05-24 10:49:46 작성자: php 중국어 사이트

자동 확인 기능이 포함된 HTML5 사용자 등록 데모를 작성하는 시간을 가졌습니다. 검증에는 한dlebars템플릿 기술과 휴대폰인증코드가 사용됩니다.

다음은 효과 스크린샷입니다:

1. 페이지 코드: usersRegister.hbs

XML /HTML 코드클립보드에 콘텐츠 복사

>
<html lang="en">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset =utf-8">
<메타 http-equiv="X-UA 호환" 콘텐츠="IE=edge" />
<제목>용户注册제목 >
<양식 id="my-form" class="myform">
<div>
<라벨>용도명:라벨><입력 id="사용자 이름" 이름="사용자 이름" 유형 ="텍스트" />
div >
<div>
<레이블>密码:레이블><입력 id="pass" 이름="비밀번호" 유형="텍스트" />
div>
div & gt;
& lt; 레이블 & gt; 邮箱:라벨><입력 ID="이메일" 이름="이메일"
데이터에 이상적
="필수이메일" 입력="이메일" />
div>
<div>
<라벨>电话:라벨><입력 ID="전화" 유형="텍스트" 이름= "전화" 데이터에 이상적="전화" />
div>
<div >
<라벨>供应商V码:라벨><입력 id="vCode " 유형="텍스트" 이름="vCode" 데이터 이상적="vCode" />
div>
<div>
<라벨>真实姓name:라벨><입력 id="trueName" type="text" name="trueName" 데이터 이상적="trueName" />
div>
div>
<레이블>핸드机验证码:라벨><입력 ID= "telCode" 유형="텍스트" 이름="telCode" 데이터 이상적="telCode" />
div>
& lt; div 스타일="여백-하단:5px;">
<버튼 id="getTelCode" type="버튼" 스타일="왼쪽 여백:160px; 오른쪽 여백:auto;" >获取机校验码버튼>
< ;시간 스타일="margin-top:5px; margin-bottom:5px;" /> ;
div>
div>
< ;스크립트 유형="text/javascript">
var 옵션 = {
onFail : function() {
alert($myform.getInvalid(). 길이 + ' 잘못된 필드.')
},
입력 : {
'비밀번호 ' : {
필터 : '필수 패스'
},
'사용자 이름' : {
필터 : '필수 사용자 이름'
},
'이메일' : {
필터 : '필수 이메일'
},
'전화' : {
필터 : '필수 전화'
},
'trueName' : {
필터 : '필수'
},
'vCode' : {
필터 : '필수'
}
/ *
'연령': {
필터 : '필수 digit',
데이터 : {
분 : 16,
최대 : 70
필터 : '확장자',
데이터 : {
확장자: [ 'jpg' ]
}
},
'댓글' : {
필터 : '최소 최대',
데이터 : {
분 : 50,
최대 : 200
}
},
'상태' : {
},
: {
제외 : '选择國籍.'
}
},
'langs[]' : {
필터 : '최소 최대',
데이터 : {
분 : 2,
최대 : 3
},
오류 : {
<
<🎜 이상 확인하세요. >강함>2강함> 옵션.', 최대 : '
강함>3강함 > 옵션 모두갚아야 합니다.' }
}
*/
}
};
$('#getTelCode').click(function() {
var
전화
문서.getElementById("telephone").value; // 手机号码 if (전화
==
||
전화 == ""){ alert("手机号码不能为空!");
else
{
$.ajax({
유형 : "GET",
dataType : "
json
api
/getTelCode?전화="+ 전화,
성공 : 함수(msg) { },
오류: 기능(e) {
alert("获取手机校验码失败!" + e);
🎜>
myform
= $('#my -form').idealforms(options).data('idealforms');
$('#submit').click(function() {
var 사용자 이름 =
문서
비밀번호
= 문서.getElementById("pass") .value; //비밀번호
이메일
= 문서 .getElementById("email").value; //이메일 주소
telephone
= document.getElementById("telephone ").value; //휴대폰번호
vCode
= document.getElementById("vCode").value; // V사 코드
telCode
= document.getElementById("telCode").value //휴대폰 인증 코드
trueName
= document.getElementById("trueName").value; //실명
>="+ 비밀번호 +"
이메일
"+ 이메일 + "
전화
"+전화 +"
vCode
"+ vCode +"
telCode= "+ telCode +"trueName="+ trueName , | > ~ // 호스트 주소 뒤의 디렉터리: uimcardprj/share/meun.jsp 🎜> window.document.location.pathname
var pos = curWwwPath.indexOf(pathName);
// 호스트 주소를 가져옵니다. 예: http://localhost:8083
var localhostPaht = curWwwPath.substring(0, pos) ; // "/"를 사용하여 프로젝트 이름을 가져옵니다. 예: /uimcardprj > =
pathName
substr
ing(0, pathName.substr(1).indexOf(' /') + 1); window.location.href
=
+ "/login";
🎜> }, ert( "등록 실패!" + e);
$('#reset').click(function() {
$myform.reset().fresh().focusFirst()
}); 🎜>
< ;/
>

html

2.jq 입력 확인: jquery .idealforms.js
이 js 검증의 초기 버전은 Cedric Ruiz에서 가져온 것이며 약간 수정했습니다.
부분 확인 규칙은 다음과 같습니다.
필수: '필수입니다.'
숫자: '숫자여야 합니다.',
자리 : '고유한 숫자여야 합니다.'
name: '3자 이상이어야 하며 문자만 포함할 수 있습니다.'username: '사용자 이름은 5자리 이상이어야 합니다. 최대 길이는 30자이며, 영문, 숫자, 한자, 밑줄을 사용하시기 바랍니다. 🎜>pass: ' 비밀번호는 6~15자 사이여야 하며 숫자, 대문자, 소문자를 각각 하나씩 포함해야 합니다. 'strongpass: '8자 이상이어야 합니다. 하나 이상의 대문자, 소문자,
숫자 또는 특수 문자
email: '유효한 이메일 주소여야 합니다. 🎜>'">사용자 @gmail.com)'phone: '유효한 휴대전화 번호여야 합니다. (예: 18723101212)전체 코드 파일은 다음과 같습니다.
XML/HTML 코드
클립보드에 내용 복사
/*-------------------------------------- --------------------------------------
JQ-IDEALFORMS 2.1

*저자 : Cedric Ruiz <🎜

*라이센스 : gpl 또는 mit <🎜

<🎜 🎜 >  * 데모: http://elclanrs.github.com/jq-idealforms/
  *
------- ------------------------------------- -----------------*/
;(함수 ( $, 창, 문서, 정의되지 않음 ) {

  '엄격한 사용';
  // 전역 이상적인 양식 네임스페이스
  $
.idealforms = {}
  $
.idealforms.filters = {}
  $
.idealforms.errors = {}
  $
.idealforms.flags = {}
  $
.idealforms. ajaxRequests = {}
/*----------------------------- --------------------------------*/

/**
* @namespace 다양한 유틸리티를 담는 상자
*/
var
Utils = {
  /**
   * 컬렉션에서 가장 넓은 요소의 너비를 가져옵니다.
   * @memberOf Utils
   * @param {jQuery
객체} $elms
   * @
반환s {number}
   */
  getMaxWidth: function( $elms ) {
    var
maxWidth = 0
    $elms.
각(function() {
      var
width = $(this).outerWidth()
      if ( width
> maxWidth ) {


최대 너비 = 너비

      }

    })

    maxWidth 반환

  },

  /**

   * 더 적은 변수를 가져오는 해키 방식

   * @memberOf Utils

   * @param {string} 이름 LESS 클래스의 이름입니다.

   * @param {string} prop 데이터가 저장되는 CSS 속성입니다.

   * @returns {숫자, 문자열}

   */

  getLessVar: function( name, prop ) {

    var 값 = $('<p 클래스="' + 이름 + '">p>').hide().appendTo('body ').css( prop )

    $('.' + name).remove()

    반환 ( /^d+/. test( value ) ? parseInt( value, 10 ) : value )

  },

  /**

   * ES5 객체와 같습니다.
keys

   */

  getKeys: function( obj ) {

    var
keys = []

    for(var key in obj) {

      if ( obj.hasOwnProperty( key ) ) {

        keys.p 어( 키 )
      }
    }
    반환 키
  },
  // 객체의 길이 가져오기
  getObjSize: function( obj ) {
    var
size
= 0, key;

    for ( key in obj ) {

      if ( obj.hasOwnProperty( key ) ) {

        크기++;

      }

    }

    반품 크기;

  },

  isFunction: function( obj ) {

    반환 유형
obj
=== nbsp;'function'
  },

  isRegex: function( obj ) {

    RegExp의 obj 인스턴스 반환

  },

  isString: function( obj ) {

    반환 유형:
obj
=== 'string'
  },

  getByNameOrId: 함수 ( str ) {

    var $
el
= $('[
이름="'+ str +'"]').length
      ? $('[
이름
=
"'+ str +'"]') // 이름별
      : $('#' + str) // ID별

    $el.length를 반환

      ? $el

      : $.error('''+ str + '" 필드가 존재하지 않습니다.')

  },

  getFieldsFromArray: function( fields ) {

    var f = []

    for ( var i = 0, l = fields.length; i < l; i++ ) {
      f.push( Utils.getByNameOrId( fields [i] ).get(0) )
    }
    반환 $( f )
  },
  convertToArray: function( obj ) {
    return Object.prototype.toString.call( obj ) === ' [객체 배열]'
      ? obj : [ obj ]
  },
  /**
   * 이상적인 양식 요소의 유형 결정
   * @param $input jQuery $input 객체

   */
  getIdealType: function( $el ) {
    var
type = $el.attr('type') || $el[0].tagName.toLowerCase()
    return (
      /(text|password|email|number|search|url |tel|textarea)/.test( type ) && 'text' ||
      /file/.test( type ) && 'file' ||
      /select/.test( type ) && 'select' ||
      /(radio|checkbox)/.test( type ) && 'radiocheck' ||
      /(버튼|제출|재설정)/.test( 유형 ) && '버튼'||
      /hd/.test( 유형 ) && '제목' ||
      /hr/.test( type ) && '구분 기호' ||
      /hidden/.test ( 유형 ) && '숨김'
    )
  },
  /**
   * 입력 을 생성
   * @param name `name` 속성을 입력의
   * @param 입력의 'type' 또는 'tagName' 유형
   */
  makeInput: function( name, value, type, list, placeholder) {
    var 마크업,
항목 = [], item, i, len
    function splitValue( str ) {
      var item, value, arr
      if ( /::/.test( str ) ) {
        arr = str.split('::')
        항목 = arr[ 0 ]
        값 = arr[ 1 ]
      } else {
        항목 = 값 = str
      }
      반품 { 항목: 항목, 값: 값 }
   }
    // 텍스트 & 파일
    if ( /^(text|password|email|number|search|url|tel|file|hidden)$/.test(type) )

      마크업 = '<입력 '+
        '유형= "'+ 유형 +'" '+
        'ID="'+ 이름 +'" '+
        '이름="'+ 이름 +'" '+
        ' 값="'+ 값 +'" '+
        (자리 표시자 && '자리 표시자="'+ 자리표시자 +'"') +
        '/>'

    // 텍스트 영역

    if ( /textarea/.test( type ) ) {

      마크업 = '+ 이름 +'" 이름="'+ 이름 +'" 값="'+ 값 +'" >텍스트 영역>'

    }

    // 선택

    if ( /select/.test( type ) ) {

항목 = []

      for ( i = 0, len = 목록.length; 나 < len; i++ ) {
        항목 = splitValue( list[ i ] ).item
값 = splitValue( list[ i ] ).value
        items.push('<옵션 값="'+ 값 +'" >'+ 항목 +'옵션>')

      }

      마크업 =

        '+ 이름 +'" 이름="'+ 이름 +'">'+

         items.join( '') +

        '선택>'

    }

    // Radiocheck

    if ( /(radio|checkbox)/.test( type ) ) {

      항목 = []

      for ( i = 0, len = list.length; i < len; i++ ) {
항목 = splitValue( list[ i ] ).item
        값 = splitValue ( list[ i ] ).value
        items.push(
         '<label>'+

            '<입력 유형="'+ 유형 +'" 이름="'+ 이름 +'" 값="'+ 값 +'" />'+

            항목 +

          ' 라벨>'

        )

      }

      마크업 = 항목.join('')

    }

반환 마크업

  }

}

/**

* 이상적인 양식을 위한 맞춤 탭

*/

$.fn.idealTabs = 기능 (컨테이너) {

  var

  // 요소

  $내용 = 이,

  $컨테이너컨테이너 = 컨테이너,

  $래퍼 = $('<ul 클래스="ideal-tabs-wrap"/>'),

  $탭 = ( 함수 () {

    var 탭 = []

    $contents.each(function () {

      var 이름 = $(this).attr('name')

      var html =

        ''+

          '<스팬>' + 이름 + '스팬>'+

          '<i class="ideal-tabs-tab-counter ideal-tabs-tab-counter-zero">0i> '+

        '리>'

      tabs.push(html)

    })

    return $(tabs.join(''))

  }()),

  액션s = {

getCuridx : function () {

return $ tabs

.filter ( '. 이상적인 tabs-tab-Active ')

        .index()

    },

    getTabIdxByName: 함수 (이름) {

      var
re = new RegExp(이름, 'i')

      var $
tab = $tabs.filter(function () {

        return re.test($(this).text())

}))

return $ tab.index ()

}

  },

  /**

   * 공개 방법

   */


방법
= {

    /**

     * 스위치 탭

     */

    switchTab: function (nameOrId 엑스) {

      var idx = Utils.isString(nameOrIdx)

        ? Actions.getTabIdxByName(nameOrIdx)

        : nameOrIdx

      $tabs.removeClass('ideal-tabs-tab-active')

      $tabs.eq(idx).addClass('ideal-tabs-tab-active')

      $contents.hide().eq( idx).show()

    },

    다음탭: 함수 () {

      var idx = 작업.getCurIdx() + 1

      idx > $tabs.length - 1

        ? methods.firsttab ()

: methods.witchtab (idx)

},

이전탭: 함수 () {

      Methods.switchTab(Actions.getCurIdx() - 1)

    } ,

    firstTab: function () {
      Methods.switchTab(0)

    } ,

    lastTab: function () {

      Methods.switchTab($tabs.length - 1)

    },

    updateCounter: 함수(nameOrIdx, text) {

      var
idx
= !isNa 엔 (nameOrIdx) ? nameOrIdx : Actions.getTabIdxByName(이름),
         $
counter
= $tabs.eq(idx).find('.ideal-tabs-tab-counter' )
      $counter.removeClass('ideal-tabs-tab-counter-zero')

      if (!text) {

        $counter.addClass('ideal-tabs-tab-counter-zero')

      }

  for (var m in Methods)

    $contents[m] = Methods[m]

  // 초기화

  $tabs.first()

    .addClass('ideal-tabs-tab-active')

    .end()

    .click(function () {

      var
이름
= $(this).text()

      $contents.switchTab(이름)

    })

  // DOM 및 이벤트에 삽입

  $wrapper.append($tabs).appendTo($container)

  $contents.addClass('ideal-tabs-content')

  $contents.each(function () {

    var $this = $(this), name = $(this).attr('name')

    $this.data('ideal-tabs-content-name', name)

      .removeAttr('name')

  })

  $contents.hide().first( ).show() // 새로 시작

  $contents 반환

}

/ **

* 맞춤 <선택> 메뉴 jQuery 플러그인

* @example `$('select').idealSelect()`

*/

$.fn.idealSelect = 기능 () {

  return this.each(function () {

    var

    $선택 = $(this) ,

    $옵션&nbnbsp;= $select.find('option')

    /**

     * 마크업 생성 및 맞춤 선택 요소 반환

    * @memberOf $.fn.toCustomSelect

     * @returns {object} 새로운 선택 대체의 모든 요소

     >/ >
      $
wrap
= $('
<ul

class
=
"ideal-select '+ $select .attr('이름') +'"
/>

'),
      $메뉴 = $(             '<리
>

<스팬

class
=
"ideal-select-title">' +              $options.filter(':selected ').text() +             '범위>
li
>
'
      ),           항목 = (함수() {
        var
항목
= []

        $options.each(함수 ( ) {

          var $this = $(this)

          items.push('<li class="ideal-select-item">' + $this.text() + 'li>')

        })

        반품 항목

      }())

      $menu.append('<ul class="ideal-select-sub">' + items.join('') + 'ul >')

      $wrap.append($menu)

      반환 {

        선택: $wrap,

        제목: $menu.find('.ideal-select-title'),

        하위: $menu.find('.ideal-select-sub'),

        항목: $menu.find('.ideal-select-item')

      }

    }())

    /**

     * @namespace 사용자 정의 선택 방법

     * @memberOf $.fn.toCustomSelect

     */

    var 작업 = {

      getSelectedIdx: 함수() {

        return IdealSelect.items

          .filter('.ideal-select-item-selected').index()

      },

      /**

       * @private

       */

      init: (함수 () {

$select.css({

          위치: '절대',

          왼쪽: '-9999px'

        })

        idealSelect.sub.hide()

        idealSelect.select.insertAfter( $ 선택)

        idealSelect.select.css(

         '
최소 너비',

          Utils.getMaxWidth(idealSelect.items)

       )

        idealSelect.items

          .eq($options.filter(':selected').index())

          .addClass('ideal-select-item-selected ')

      }()),

      noWindowScroll: 기능(e) {

if (e.which === 40 || e.which === 38 || e.which === 13) {

          e.preventDefault()

        }

      },

      // 스크롤할 때 포커스가 사라지는 문제 수정

      // 키보드로 항목 선택

      focusHack: 함수() {

        설정
Timeout(function () {

         $select.trigger('focus')

        }, 1)

      },

      초점: 기능 () {

        idealSelect.select.addClass('ideal-select-focus')
        $(document).on('keydown.noscroll', Actions.noWindowScroll)

      },
      흐림: () {
        idealSelect.select

          .removeClass('ideal-select-open ideal-select-focus')
        $(document).off('.noscroll')
      },
      scrollIntoView: 기능 (
dir
) {

        var
        $
선택됨
= idealSelect.items.filter('.ideal-select-item-selected'),


itemHeight
= idealSelect.items.outerHeight(),


menuHeight
= IdealSelect.sub.outerHeight(),


isInView
=(함수 () {

         // 하위 메뉴의 상대적 위치
         var
elPos
= $selected.position().top + itemHeight
          반품
dir
=== '아래로'
            ? elPos
<
= menuHeight
            : elPos > 0
       }())

        만약에 ( !isInView) {


itemHeight = (dir === 'down')

            ? itemHeight // 아래로 이동

            : -itemHeight // 위로 이동

         idealSelect.sub

>>

      scrollToItem: function () {
        var
idx
=
Actions
.getSelectedIdx(),

높이
= idealSelect.items.outerHeight(),


n항목
= 이상적인 선택 .items.length,


allHeight
= height * nItems,

curHeight
=
높이 * (nItems - idx)
        idealSelect.sub.scrollTop(allHeight - curHeight)

      },
      showMenu: 기능 () {

        idealSelect.sub.fadeIn('fast')

        idealSelect.select.addClass('ideal-select-open')

        Actions.select(Actions.getSelectedIdx())

        Actions.scrollToItem()

      },

      hideMenu: 기능 () {

        idealSelect.sub.hide()

        idealSelect.select.removeClass('ideal-select-open')

      },

      선택: 기능 (idx) {

        idealSelect.items

          . RemoveClass('ideal-select-item-selected')

        idealSelect.items

          .eq(idx).addClass('ideal- 항목 선택')

      },

      변경: 기능(idx) {

        var text = idealSelect.items.eq(idx).text()

        작업. select(idx)

        idealSelect.title.text(text)

        $options.eq(idx).prop('selected', true)

$ select.trigger ( 'change')

},

키 다운 : 함수 (키) {

        var


idx
=
Actions
.getSelectedIdx( ) ,
isMenu
=
idealSelect
.select.is('.ideal-select-menu'),
isOpen
=
idealSelect
.select.is('.ideal-select-open')             /**

         * @namespace 키를 누름

         */

        var
키
= {
          9: 기능 () { // TAB

           if (isMenu) {

             Actions.blur()
              Actions.hideMenu()
            }
         },
          13: 기능 () { // 입력
            if (isMenu)

             isOpen

                ? Actions.hideMenu()

               : Actions.showMenu()

           Actions.change(idx)

          },

          27: 기능 () { // ESC

            if (isMenu) Act ions.hideMenu()

          },

          40: 기능 () { // DOWN

            if (idx
<
$options.length - 1) {
             isOpen
                 ? Actions.select(idx + 1)
               : Actions.change(idx + 1)
           }
            Actions.scrollIntoView('down' )
          },
          38: 기능 () { // UP
            만약 ( idx > 0) {

              isOpen

                ? Actions.select(idx - 1)

               : Actions.change(idx - 1)

           }

           Actions.scrollIntoView('up')

         },

          '기본값': 기능 () { // 편지

            var

           letter = String.fromCharCode(key),

           $일치 = idealSelect.items

             .filter(function () {

               return /^w+$/i.test( letter ) && // 수정자 키( ctrl, cmd, meta, super... )

                 new RegExp('^' + letter, 'i').test( $(this).text() ) // 첫 번째 일치 찾기

              }),

            n일치 = $matches.length,

            카운터 = 이상적인 선택.select.data('counter') + 1 || 0,

           curKey = idealSelect.select.data('key') || 키,

           newIdx = $matches.eq(counter).index()

            if (!nM 어치) // 일치 항목 없음

              false 반환

          // 동일 문자와 일치하는 항목이 더 많은 경우

if (
curKey === key) {

             if (카운터 < n일치) {
              idealSelect.select .data('카운터' , 카운터)
              }
              그 외 {
               idealSelect.select.data('counter ', 0)
               newIdx = $matches.eq(0).index()
             }
            }
          // 새 편지인 경우
            그렇지 않으면 {
             &nnbsp;idealSelect.data('counter', 0)

newIdx = $matches.eq(0).index()
            }
           (isOpen)인 경우
             Actions.select(newIdx)
            else
             Actions.change(newIdx)
            idealSelect.select.data('key', 키 )
           Actions.scrollToItem()
          Actions.focusHack()
          }
        }
        키[키]
          ? 키[키]()
          : 키['기본값']()
      }
    }
    /**
     * @namespace '메뉴 모드' 및 '목록 모드'에 대한 맞춤 선택의 모든 이벤트를 보관합니다.
     * @memberOf $.fn. toCustomSelect
     */
    var
이벤트
= {
      초점: Actions.focus,
      'blur.menu': 기능 () {
        Actions.blur ()
        Actions.hideMenu()
     },
      '흐림 .목록' : 함수 () {
        Actions.blur()
      },
      keydown: 기능 (e) {

        Actions.keydown(e.which)
      },
      'clickItem.menu': 기능 () {
        Actions.change($(this).index())
        Actions.hideMenu()
      },
      'clickItem.list': function () {
        Actions.change($(this ).index())
      },
      'clickTitle.menu': 기능 () {
        Actions.focus()
        Actions.showMenu()
        $select.trigger('focus')

      },
      'hideOutside.menu': 기능 () {
        $select.off( 'blur.menu')
        $(document).on('mousedown.ideal', function (evt) {
          if ( !$(evt.target).closest(idealSelect.select).length) {
            $(document).off('mousedown.ideal')
           $select.on('blur.menu', events['blur.menu'])
          } else {
           Actions.focusHack()
          }
        })   🎜>
      },
      'mousedown.list': function () {
        Actions.focusHack()
      }
    }
    // 이벤트 재설정
    var
disableEvents
=
기능
() {
      idealSelect.select.removeClass('ideal-select-menu ideal-select-list')

      $select.off('.menu .list')
      idealSelect.items.off('.menu .list')
      idealSelect.select.off('.menu .list')
      idealSelect.title.off('.menu .list')
    }
    // 메뉴 모드
    idealSelect.select.on('메뉴', 기능 () {
      disableEvents()
      idealSelect.select.addClass('ideal-select-menu')
      Actions.hideMenu()
      $select.on({
        'blur.menu': events['blur.menu'],
        '초점. menu': events.focus,
        'keydown.menu': events.keydown
      })
      idealSelect.select.on('mousedown.menu', events['hideOutside.menu'])
      idealSelect.items.on('click.menu', events ['clickItem.menu'])
      idealSelect.title.on('click.menu', events['clickTitle.menu'])

    })
    // 목록 모드
    idealSelect.select.on('list', function () {

      disableEvents()
      idealSelect.select.addClass('ideal-select-list')
Actions.showMenu()
      $select.on({
        'blur.list': 이벤트['blur.list'],
        'focus.list': events.focus,
        'keydown.list': events.keydown
      })
      idealSelect.select.on('mousedown.list', events['mousedown.list'])
      idealSelect.items.on('mousedown.list', events['clickItem.list'])
    })
    $ select.keydown(function (e) {
      // 기본 키다운 이벤트 방지
      // 이상적인 선택 이벤트로 버그를 방지하기 위해
      if (e.which !== 9) e.preventDefault()
    })
    // 재설정
    idealSelect.select.on('reset', function(){
      Actions.change(0)
    })
    idealSelect.select.trigger('menu') // 기본값은 '메뉴 모드'입니다.
  })
}
/*
* idealRadioCheck: jQuery plguin 체크박스 및 라디오 교체용
* 사용법: $('input[
type=checkbox], input[type=라디오]').idealRadioCheck()
*/
$
.fn.idealRadioCheck = 함수() {
  return this.each(function() {
    var $
이것 = $(이것)
    var $span = $('<span/>')

    $span.addClass('ideal-'+ ( $this.is(':checkbox') ? 'check': 'radio' ) )

    $this.is(':checked') && $span.addClass('checked') // init

    $span.insertAfter($this)

    $this.parent('label').addClass('ideal-radiocheck-label')

      .attr('onclick','') // iOS에서 라벨 클릭 수정

    $this.css({ position: 'absolute', left: '-9999px' }) // Shift로 숨기기 왼쪽

    // 이벤트

    $this.on({

      변경: 기능( ) {

        var $this = $(this)

        if ( $this.is('input[ 유형="라디오"]') ) {

          $this.parent().siblings('label').find( '.ideal-radio').removeClass('checked')

        }

        $span.toggleClass( 'checked', $this .is(':checked') )

      },

     초점: function() { $span.addClass('focus') },

      흐림: function() { $span.removeClass('focus') },

      클릭: function() { $ (this).trigger('focus') }

    })

  })

}

;(function( $ ) {

  // 브라우저는 HTML5 여러 파일을 지원합니까?

  var 다중 지원 = 유형 $('<입력/ >')[0].multiple !== '정의되지 않음',

      isIE = /msie/i.test( navigator.userAgent )

  $.fn.idealFile = 함수() {

    return this.each (function() {

      var $file = $(this).addClass('ideal-file'), //원본 파일 입력

          // IE 해킹에 사용될 라벨

         $wrap = $('<div class="ideal-file-wrap">'),

          $입력 = $('<입력 입력="text" 클래스="ideal-file-filename" />'),

          // IE 이외의 브라우저에서 사용되는 버튼

         $버튼 = $('<버튼 유형="버튼" 클래스="이상적인 파일 업로드">열기< ;/버튼>'),

         // IE 해킹

         $라벨 = $('<라벨 클래스="ideal-file-upload" for="'+ $file[0].id +'">열기라벨>')

      // 왼쪽으로 이동하여 숨기세요. 이벤트 트리거

      $file.css({

        위치: '절대',

왼쪽: '-9999px'

      })

      $wrap.append( $input, ( isIE ? $label : $button ) ) .insertAfter( $file )

      // 포커스 방지

      $file.attr('tabIndex', -1)

      $button.attr('tabIndex', -1)

      $button.click(function () {

        $file.focus().click() // 대화상자 열기

      })

      $file.change(function( ) {

        var
files
= [], fileArr, filename

        // 여러 개가 지원되는 경우
추출

        //파일 배열에서 모든 파일 이름

        if ( multipleSupport ) {


fileArr
= $file[0].files

          for ( var
i
=
0
, len = fileArr.length; 나 < len; i++ ) {
            files.push( fileArr[i].name )
         }
          파일 이름 = files.join(', ')
        // 지원되지 않는 경우 그냥 값을 사용하세요.
       // 경로를 삭제하여 파일 이름만 표시
       } 그렇지 않으면 {
         파일 이름 = $file. val().split('\').pop()
        }
        $input.val( 파일 이름 ) // 설정 값
          .attr( 'title', filename ) // 제목에 파일 이름 표시
      })
      $input.on({
        초점: 기능 () { $file.trigger('change') },
        blur: function () { $file.trigger('blur') },
        keydown: function( e ) {
if (
e.which === 13 ) { // Enter
           if ( !isIE ) { $file.trigger('click') }
          } 그렇지 않으면 (
e.which === 8 || e.which === 46 ) { // Backspace & Del
            // 일부 브라우저에서는 값이 읽기 전용입니다
           // 이 트릭을 사용하면 이전 입력을 제거하고
          // 모든 원본 이벤트가 첨부된 깨끗한 클론
           $file.replaceWith( $
file = $file.val('').clone( true ) )
            $file.trigger('change' )
           $input.val('')
         } if if (
e.which === 9 ){ // TAB
            return
         } 그 외 { // 다른 모든 키
false 반환
          }
        }
      })
})
}
}(jQuery))

/**
* @namespace 오류
* @locale en
*/
$.idealforms.errors = {
필수: '필수입니다.',
number: '숫자여야 합니다.',
digits: '고유한 숫자여야 합니다.' ,
이름: '3자 이상이어야 하며 문자만 포함할 수 있습니다.',
사용자 이름: ' 사용자 이름은 5자, 최대 30자까지 가능합니다. 영문, 숫자, 한자, 밑줄을 사용하세요. 사용자 이름의 첫 글자는 영문자, 숫자, 한자여야 하며 최대 길이는 숫자일 수 없습니다. 한자는 21자입니다.',
pass: '비밀번호는 6~15자리여야 하며 숫자, 대문자, 소문자를 각각 하나씩 포함해야 합니다.',
Strongpass: '8자 이상이어야 하며 대문자 1개, 소문자 1개, 숫자 또는 특수 문자 1개 이상을 포함해야 합니다.',

이메일: '유효한 이메일 주소여야 합니다. <em>(예: user@gmail.com)< /em>',

전화: '유효한 휴대폰 번호여야 합니다. <em >(예: 18723101212)em>', >
zip: '유효한 미국 우편번호여야 합니다. ;/

em
>', url: ' 유효한 URL이어야 합니다. <em>(예: www.google.com)
em
>', minChar: '적어도 /강해야 합니다> 자 길이입니다.',

minOption: '최소
< 강함>{0} 이상을 선택하세요. 강함> 옵션.',

maxChar: '최대
< ;강하게>{0}강하게>자 길이입니다.' ,

maxOption: '최대
<강함>{0}< /강함> 옵션이 허용됩니다.',

범위: '다음 사이의 숫자여야 합니다. {0} 및 {1}.', 날짜: '유효한 날짜여야 합니다. 🎜><em> (예: {0})
em
>
',

  dob: '유효한 생년월일이어야 합니다.',

  제외: ''{0}'은(는) 사용할 수 없습니다.',

  excludeOption: '{0}',

  equalto: '<와 동일한 값이어야 함 강함>"{0}"강함>',

  확장자: '파일에는 유효한 확장자가 있어야 합니다. <em>(예: "{0}")em >',

  ajaxSuccess: '<강함>{0}강함> 을(를) 사용할 수 없습니다.',

  ajaxError: '서버 오류...'

}

/**

* 모든 기본 필터 가져오기

* @returns 객체

*/

var getFilters = 함수() {

  var 필터 = {

    필수: {

      정규식: /.+/,

      오류: $.idealforms.errors.required

},

숫자 : {

regex : function (i, v) {return! isnan (v)},
      오류: $.idealforms.errors.number
    },
    숫자: {
      정규식: /^d+$/,
      오류: $.idealforms.errors.digits
    },
    이름: {
      정규식: /^[A-Za-z]{3,}$/,
      오류: $.idealforms.errors.name
    },
    사용자 이름: {
      정규식: /^[a-z](?=[w.]{4,30}$)w*.?w*$/i,

      오류: $.idealforms.errors.username
    },
    통과: {

      정규식: /(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
오류: $.idealforms.errors.pass
    },
    strongpass: {
정규식: /(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(? =.*[a-z]).*$/,
      오류: $.idealforms.errors.strongpass
    },

    이메일: {

      정규식: /^([a-zA-Z0-9]*[-_.]?[a-zA-Z0-9]+)*@([a-zA-Z0 -9]*[-_]?[a-zA-Z0-9]+)+[\.][A-Za-z]{2,3}([\.][A-Za-z]{ 2})?$/,

      오류: $.idealforms.errors.email

    },

    전화: {

      //regex: /^((13[0-9])|(15[0-9])|(17[0-9 ])|(18[0-9]))\d{8}$/,

      정규식: /^(0|86|17951)?(13[0-9 ]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,

      오류: $ .idealforms.errors.phone

},

zip : {

regex :/ ^d{5}$|^d{5}-d{4}$/,

      오류: $.idealforms.errors.zip

    },

    url: {

      정규식: /^(?:(ftp|http|https)://) ?(?:[w-]+.)+[a-z]{2,6}([:/?#].*)?$/i,

      오류: $ .idealforms.errors.url

},

min : { Regex : 기능 : 기능 (입력, 값) {

        var $
input

input = input.input,

분
=
입력.userOptions.data.min,

isRadioCheck
= $input.is('[
유형="체크박스"], [유형="라디오"]')
        if ( isRadioCheck ) {


this.error
= $.idealforms.errors.minOption.replace('{0}', min )

          return $input.filter(':checked').length
>
= min
        }


this.error
= $.idealforms.errors.minChar.replace('{0}', min )
        반환 값. 길이
>
= 분
      }

    },

최대: {

      정규식: 함수( 입력, 값 ) {

        var $
입력

입력 = input.input,

max
=
input.userOptions.data.max,

isRadioCheck
= $input.is('[
type="checkbox"], [type=" 라디오"]')

        if ( isRadioCheck ) {

         this.error = $.idealforms.errors.maxOption.replace('{0} ', 최대 )

          return $input.filter(':checked').length <= max
        }
        this.error = $.idealforms.errors.maxChar.replace( '{0}', max )
        반환 값 길이 <= 최대
      }
    },
<🎜 🎜>
범위 : {<🎜 🎜>
<🎜

regex : 함수 (입력, 값) {<🎜 🎜> <🎜

var
range
=
입력.userOptions.data.range,

val
= +값

this.error
= $.idealforms.errors.range
          .replace( '{0}', range[0] )
          .replace( '{1}', range[1] )
        return val
>
= range[0] && val
<= 범위[1]
      }
    },
날짜: {
      정규식: 함수( 입력, 값 ) {
        var

userFormat
=

입력
.userOptions.data && input.userOptions.data.date
? input.userOptions.data.date
            : 'mm/dd/yyyy', // 기본 형식

구분자
= /[^mdy]/.exec( userFormat )[0],

theFormat
=
userFormat.split(구분자),

theDate
=
value.split(delimiter),

isDate
=
함수( 날짜, 형식 ) {
         var m, d, y
          에 대해 ( 변수
i
=
0, len = format.length; i < len; i++ ) {
            if ( /m/.test( 형식[i]) ) m = 날짜[i]

            if ( /d/.test( 형식[i]) ) d = 날짜[i]
            if ( / y/.test( 형식[i]) ) y = 날짜[i]
         }
          반환 (
            m
> 0 && m < 13 &&
            y &&
y.length === 4 &&
            >

0 && ㄷ
<= ( new Date( y, m, 0 ) ).getDate()
          )

        }

this.error
= $.idealforms.errors.date.replace( '{0}', userFormat )

        return isDate( theDate, theFormat )
      }
    },
    dob: {
      정규식: 함수( 입력, 값 ) {
        var

userFormat
=

입력
.userOptions.data && input.userOptions.data.dob

            ? input.userOptions.data.dob
            : 'mm/dd/yyyy', // 기본 형식
        // 날짜 입력 시뮬레이션

날짜 입력
= {
          입력: input.input,
<🎜
        },
        // 내부 날짜 필터를 사용하여
확인
날짜를 확인하세요. 🎜>필터
.date.regex( dateInput, value ),
        // DOB
        연도 = /d{4}/.exec( 값 ),
        maxYear = new Date().getFullYear(), //현재 연도
        minYear = maxYear - 100
        this.error = $.idealforms.errors.dob
        return isDate && theY 귀 >

= minYear && theYear <= maxYear
      }
    },

    제외: {
     정규식: function( input, value ) {
        var $ 입력입력 = input.input,
            제외 = 입력.userOptions.data.exclude,
            isOption = $input.is('[type="checkbox"], [ 유형="라디오"], 선택')
        this.error = isOption
          ? $.idealforms.errors.excludeOption.replace( '{0}', value )
          : this.error = $.idealforms.errors.exclude.replace ('{0}', 값 )
        return $.inArray( value, exclude ) ===-1
      }
    },
    같음: {
      정규식: 함수( 입력, 값) {
        var $같음 = $( input.userOptions.data.equalto ),
           $입력입력 = input.input,
           이름 = $equals.attr('name') || $equals.attr('id'),
           isValid = $equals.parents('.ideal-field')
             .filter(function(){ return $(this).data('ideal-isvalid') === true })
             .length
        if ( !isValid ) { 반환 false }
        this.error = $.idealforms.errors.equalto.replace('{0}', name )
        반환 $input.val() === $equals.val()
      }
    },
    확장자: {
      정규식: 함수( 입력, 값 ) {
        nbsp;var 파일 = 입력.input[0].files || [{ 이름: 값 }],
           확장 = 입력.userOptions.data.extension,
            re = new RegExp( '\.'+ extensions.join('|') +'$', 'i' ),

           유효함 = 거짓
        for ( var i = 0, len = 파일.length; i < len; i++ ) {
         유효 = 재.test( files[i].name );
        }
        this.error = $.idealforms.errors.extension.replace('{0}' , extensions.join ( ' ","')

반환 유효

}

    },
    ajax: {
      regex: function( input, value, showOrHideError ) {

        var self = 이것
        var $입력입력 = 입력. 입력
        var
userOptions = input.userOptions
        var
이름 = $input.attr('name')
        var $
필드 = $input.parents('.ideal-field')
        var
유효 = false
        var
customErrors
= userOptions.errors && userOptions.errors.ajax

self.error
= {}

자신. error.success
= customErrors && customErrors.success
          ? customErrors.success
          : $.idealforms.errors.ajaxSuccess.replace('{0}', value )
        self .error.fail = customErrors && customErrors.error
          ? customErrors.error
          : $.idealforms.errors.ajaxError
       // 입력 이름을 $_POST[이름]으로 보내기
< 🎜 🎜> <🎜 🎜>
var
data
= {} <🎜 🎜>
데이터 [name] = $.
trim
(value)
        // 사용자가 정의한 Ajax 옵션
       var
userAjaxOps
=
input.userOptions .data .ajax
        var
ajaxOps
= {
          유형: 'post',
          dataType: 'json',
          data: data,
          성공: 함수( resp, text, x시간 ) {
          console.log(resp)
           showOrHideError( self.error.success, true )
            $input.data({
            'ideal-ajax-resp': resp,
             'ide al-ajax-error': 자신 .error.success
            })
           $input.trigger('change') // 카운터 업데이트

           $field.removeClass('ajax')
           // 맞춤 성공 콜백 실행
            if( userAjaxOps._success ) {
             userAjaxOps._success( resp, text, xhr )
           >
          }

              showOrHideError( self.error.fail, false )
             $input.data('ideal-ajax-error', self.error.fail )
             $field.removeClass('ajax')
              // 사용자 정의 오류 콜백 실행
              if ( userAjaxOps._error ) {
                userAjaxOps. _error( xhr, text, error )
             }
           }
          }

        }
        $.extend( ajaxOps, userAjaxOps )
        // 초기화
        $input.removeData('ideal-ajax-error')
        $input.removeData('ideal-ajax-resp')
        $field.addClass('ajax')
        // 요청을 실행하고 저장하여 취소할 수 있도록

        // 그러므로 요청이 버블링되지 않음
        $.idealforms.ajaxRequests[ name ] = $.ajax( ajaxOps )
}
    }
  }
  반환 필터

}
$
.idealforms.flags = {
  오류 없음: 기능 (i) {
    i.parent().siblings('.ideal-error').hide()
  },
  noicons: 기능 (i) {
    i.siblings('.ideal-icon-valid, .ideal-icon-invalid').hide()
  },
  novalidicon: function (i) {
    i.siblings('.ideal -icon-valid').hide()
  },
  noinvalidicon: function (i) {
    i.siblings('.ideal-icon-invalid').hide()
  },
  noclass: 함수(i) {
    i.parents('.ideal-field').removeClass('valid invalid')
  },
  novalidclass: function (i) {
    i.parents('.ideal-field').removeClass('valid')
  },
  noinvalidclass: function (i) {
    i.parents('. Ideal-field').removeClass('invalid')
  }
}
/*
* Ideal Forms 플러그인
*/
var _defaults = {
  입력: {},
  customFilters: {},
  customFlags: {},
  globalFlags: '',
  onSuccess : function(e) { alert('감사합니다...') },
  onFail: function() { alert('잘못됨!') },
  반응형At: 'auto',
  disableCustom: ''
}
// 생성자
var IdealForms = function( element, options ) {

  var self = 이것
  self.$form = $( element )
  self.opts = $.extend( {}, _defaults, options )
  self.$탭 = self.$form.find('section')
  // 현지화된 필터 설정
  $. 확장( $.idealforms.filters, getFilters() )
  self._init()
}
// 플러그인
$.fn.idealforms = 기능( 옵션 ) {
  return this.each(function() {
    if ( !$.data( this, 'idealforms' ) ) {
<

}
// 더 적은 변수 가져오기
var
LessVars
= {
  fieldWidth: Utils.getLessVar( 'ideal-field-width', 'width' )
}
/*
* 비공개 방법
*/
$.extend ( IdealForms.prototype, {
  _init: function() {
    var
self
=
이

    var
o = self.opts
    var
formElements = self._getFormElements()
    self.$form.css('
visibility', 'visible' )
      .addClass('ideal-form')
      .attr('novalidate', 'novalidate') // HTML5 검증 비활성화
    // 마크업 수행
    formElements.inputs
      .add( formElements.headings )
      .add( formElements.separators )
      .each(function(){ self._doMarkup( $(this) ) })
    // 탭 생성
    if ( self.$tabs.length ) {
      var $tabContainer = $('<div class="ideal-wrap ideal-tabs ideal-full-width"/>')

      self.$form.prepend( $tabContainer )

      self.$tabs.idealTabs( $tabContainer )

    }

    // 항상 입력 아래에 날짜 선택기를 표시

    if( jQuery.ui ) {

      $.datepicker._checkOffset = 함수( a,b,c ) { return b }

    }

    //data-ideal로 지정된 입력을 추가합니다.

   // 사용자 입력 목록에

    self.$ form.find('[data-ideal]').each(function() {

      var userInput = o.inputs[ this.name ]

      o.inputs[ this.name ] = userInput || { 필터: $(this).data('ideal') }

    })

   // 반응형

    if ( o.반응형At ) {

      $(window).resize(function(){ self._반응() })

      self._반응()

}

    // 양식 이벤트

    self.$form.on({

      keydown : 함수( e ) {

        // Enter 키를 누를 때 제출을 방지

        // 텍스트 영역은 제외

        if ( e.which === 13 && e.target.nodeName !== 'TEXTAREA' ) {

          e.preventDefault()

        }

      },

      제출: 기능( e ) {

        if ( !self.isValid() ) {

         e.preventDefault()

          o.onFail ()
          self.focusFirstInvalid()
       } 그 외 {

          o.onSuccess( e)

        }

}

})

self._adjust ()

    self._attachEvents()

    self.fresh() // 새로 시작

  },

  _getFormElements: function() {

    return {

      입력: this.$form.find('input, select , textarea, :button'),

      labels: this.$form.find('div
> label:first-child '),

      text: this.$form.find('input:not([
type="checkbox"], [ 유형="라디오"], [유형="제출"]), textarea'),

      선택: this.$form.find('select'),

      radiocheck: this.$form.find('input[
유형="라디오"], 입력[유형="체크박스"]'),

      버튼: this.$form.find(':button'),

      파일: this.$form.find('input[
type="file "]'),

      제목: this.$form.find('h1, h2, h3, h4, h5, h6'),

      구분자: this.$form.find('hr'),

      hidden: this.$form.find('input:hidden')

    }

  },

  _getUserInputs: function() {

    return this.$form.find('[
name="'+ Utils.getKeys( this.opts.inputs ).join('"], [이름="') +'"]')

  },

  _getTab: 함수( nameOrIdx ) {

    var
self = this

    var
isNumber = !isNaN( nameOrIdx )

    if ( isNumber ) {

      return self.$tabs.eq( nameOrIdx )
    }
    return self.$tabs.filter(function() {
      var
re
= new RegExp( nameOrIdx, 'i' )
      return re.test( nbsp;$(this).data('ideal- 탭 콘텐츠 이름') )

    })

  },

  _getCurrentTabIdx: function() {

    return this.$tabs.index( this.$form.find('.ideal-tabs-content:visible') )

  },

  _updateTabsCounter: function() {

    var self = this

    self.$tabs.each(function( i ) {

      var invalid = self.getInvalidInTab( i ) .length

      self.$tabs.updateCounter( i, invalid )

    })

  },

  _adjust: function() {

    var self = 이것

    var o = self.opts

    var formElements = self._getFormElements()

    var curTab = self._getCurrentTabIdx()

    // 자동 완성으로 인해 일부 문제가 발생함...

    formElements.inputs.attr('autocomplete', 'off')

    // 치수 계산을 위한 탭 표시

    if ( self.$tabs.length ) { self.$tabs.show() }

    // 라벨 조정

    var labels = formElements.labels

    레이블 s. RemoveAttr('style').width( Utils.getMaxWidth( labels ) )

    // 제목 및 구분 기호 조정

    if ( self. $tabs.length ) {

      this.$tabs.each(function(){

        $( this ).find('. Ideal-heading:first').addClass('first-child')

      })

    } else {

      self.$form.find('.ideal-heading:first').addClass('first-child')

    }

    self._setDatepicker()

    // 숨기기 탭 계산 완료

    if ( self.$tabs.length ) {

      self.$tabs.hide()

      self.switchTab( curTab )

    }

  },

  _setDatepicker: function() {

    var
o = 이.opts

    var $
datepicker = 이.$form.find( 'input.datepicker')

    if ( jQuery.ui && $datepicker.length ) {

      $datepicker.each(function() {

        var userInput = o.inputs[ this.name ]

        var data = userInput && userInput.data && userInput.data.date

        var format = data ? data.replace('yyyy', 'yy' ) : 'mm/dd/yy'

        $(this).datepicker({

         dateFormat: 형식,

         전표시: 기능( 입력 ) {

            $( 입력 ).addClass ('열기')

          },

         변경 시월 연도: function() {

           // 크기가 조정되지 않는 IE9 수정

          var $
this =$(this)

           var
w = $this.outerWidth() // 캐시 먼저!

            setTimeout(function() {

             $this.datepicker('widget').css( 'width', w )

            }, 1)

          },

          onClose: function() { $(this).removeClass('open') }

        } )
      })
      // 너비 조정
      $datepicker.on('focus keyup ', function() {
        var
t
= $(this), w = t.outerWidth( )

        t.datepicker('widget').css( 'width', w )
      })

      $datepicker.parent().siblings('.ideal-error').addClass('hidden')
    }
  },
  _doMarkup: function( $element ) {
    var
o
= this.opts

    var
elementType
= Utils.getIdealType( $element )

    // 검증 요소

    var $필드 = $('<span class="이상적 -필드"/>')

    var $오류 = $('< 스팬 클래스="이상 오류" />')

    var $유효 = $('<i class="ideal-icon ideal-icon-valid" />')

    var $잘못됨 = $('<i class="ideal-icon ideal-icon-invalid"/>')

      . click(function(){

        $(this).parent().find('input:first, textarea, select').focus()

      })

    // 기본 마크업

    $element.closest('div').addClass('ideal- Wrap')

      .children('label:first-child').addClass('ideal-label')

    var idealElements = {

      _defaultInput: function() {

        $element.wrapAll( $field ).after( $valid , $invalid )

          .parent().after($error )

      },

      텍스트: function() { idealElements._defaultInput() },

      radiocheck: function() {

       // 확인 입력한 경우 이미 포장되었으므로 우리는 라디오를 포장하고 두 번 이상 확인하지 않습니다. 🎜> = $element.parents('.ideal-field').length

        if ( !isWrapped ) {

         $element.parent() .nextAll().andSelf().wrapAll( $field.addClass('ideal-radiocheck') )
          $element.parents('.ideal-field').append( $valid, $invalid ).after( $error )

        }

        if ( !/radiocheck/.test( o.disableCustom ) ) {

         $element.idealRadioCheck()

        }

      },

      선택: function() {

        idealElements._defaultInput()

        if ( !/select/.test( o.disableCustom ) ) {

         $element.idealSelect()

        }

      },

      파일: function() {

        이상적인 요소 ._defaultInput()

        if ( !/file/.test( o.disableCustom ) ) {

          $element.idealFile()

        }

      },

      버튼: function() {

        if ( !/button/.test( o.disableCustom ) ) {

         $element.addClass('ideal-button')

        }

      },

      숨김: function() {

        $element.closest('div').addClass('ideal-hidden')

      },

      제목: function() {

        $element.closest('div').addClass('ideal-full-width')

        $element.parent( ).children().wrapAll('<span class="ideal-heading"/>')

      },

      구분 기호: function() {

        $요소 .closest('div').addClass('ideal-full-width')

        $element.wrapAll('
<div class="이상적인 구분자"/>')

      }

    }

    // 현재 요소 유형에 대한 마크업 생성

    idealElements[ elementType ] ? IdealElements[ elementType ]() : $.noop()

    $error.add( $valid ).add( $invalid ).hide() // 새로 시작

  },

  /** 입력을 확인하고 오류 및 아이콘을 표시하거나 숨깁니다.

   * @memberOf Actions

   * @param {object} $input jQuery object
   * @param {string} e JavaScript 이벤트
   */
  _validate: function( $input, e ) {
    var
self
= 이

    var
o
= 이것.opts

    var userOptions = o.inputs[ $input.attr('name') ]

    var userFilters = userOptions.filters && userOptions.filters.split(/s/)

    var name = $input.attr(' 이름')

    var value = $input.val()

    var ajaxRequest = $.idealforms.ajaxRequests[ name ]

    var isRadioCheck = $input.is('[type="checkbox "], [유형="라디오"]')

    var inputData = {

      // 라디오 또는 체크가 이름별로 관련된 모든 입력의 유효성을 검사하는 경우

      입력: isRadioCheck ? self.$form.find('[이름="' + 이름 + '"]') : $input,

      userOptions : userOptions

    }

    // 검증 요소

    var $
분야 = $input.parents('.ideal-field')

    var $
오류 = $field.siblings('.ideal-error')

    var $
잘못됨 = isRadioCheck

      ? $input.parent().siblings('.ideal-icon-invalid')

      : $input.siblings('.ideal-icon-invalid')

    var $
유효 = isRadioCheck

      ? $input.parent().siblings('.ideal-icon-valid')

      : $input.siblings('.ideal-icon-valid')

    함수 resetError() {

      $field.removeClass('valid invalid').removeData('ideal-isvalid')

      $error.add( $invalid ).add( $valid ).hide()

    }

    함수 showOrHideError (오류, 유효함) {

      resetError()

      유효합니까? $valid.show() : $invalid.show()

      $field.addClass( 유효한 ? '유효' : '유효하지 않은' )

      $field.data( 'ideal-isvalid', valid )

      if ( !valid ) {

        $error.html( error ).toggle( $field.is('.ideal-field-focus') )

      }

    }

    // 입력할 때 유효성 검사를 방지하지만 새 문자를 도입하지 않음

   // 주로 여러 AJAX 요청을 방지하기 위한 것입니다

    var oldValue = $input.data('ideal-value') || 0

    $input.data( '이상적인 가치', 값 )

    if ( e.type = =='keyup'&& ( userFilters ) {
      $.each( userFilters, function( i, filter ) {

        var
theFilter
= $.idealforms.filters[ 필터 ]

        var
customError
=
userOptions
.errors && userOptions.errors[ 필터 ]
        var
오류
=
''            // 필드가 비어 있고 필수가 아닌 경우

>      false를 반환
        }
       if ( theFilter ) {

          // Ajax를 중단하고 재설정합니다. 요청 대기 중

          if (
e.type
==='keyup' && ajaxRequest ) {

            ajaxRequest. 중단()
           $field.removeClass('ajax')

          }

          / / AJAX

          if (
필터
=== 'ajax' ) {
nbsp;           showOrHideError( error, false ) // 응답이 돌아올 때까지 무효로 설정

          $error.hide()

           if (
e .type
=== 'keyup' ) {
             theFilter.regex( inputData, value, showOrHideError ) // ajax 콜백 실행

           } else {

              var
ajaxError
= $input.data('ideal-ajax-error')

             if ( ajaxError ) {

              showOrHideError( ajaxError, $input.data('ideal-ajax-resp') || false )

             }

           }

          }

          // 기타 모든 필터

          그 외 {

           var
유효 = 유틸 .isRegex( theFilter. 정규식 ) && theFilter.regex.test( 값 ) ||

                      Utils.isFunction( theFilter.regex ) && theFilter.regex( inputData, value )


오류 = customError || theFilter.error ///regex() 호출 후 오류 지정 유효함 ) { 반환 false } 🎜>

    }
    // 필터가 없으면 재설정
    else {
ResetError()
    }
    // 플래그
    var
플래그
= (함수(){

      var
f
=
userOptions
.flags && userOptions.flags.split(' ') || [ ]

      if ( o.globalFlags ) {

        $.each( o.globalFlags.split(' '), function( i, v ) { f.push(v) })

      }
      반환 f
}())
    if ( flags.length ) {
      $.each(flags, function( i,f) {
        var
theFlag
= $.idealforms.flags[f]

        if ( theFlag ) { theFlag( $input, e .type ) }

      })

   }

    // 업데이트 카운터

    if ( self.$tabs.length ) {

      self._updateTabsCounter( self._getCurrentTabIdx() )

    }

  },

  _attachEvents: function() {

    var self = this

    self._getUserInputs().on('keyup change focus blur', function(e) {

      var $this = $(this)

      var $필드 = $this.parents('.ideal-field')

      var isFile = $this.is('input[type=file]')

      // 변경 시 트리거 type=file custom file

     // 원래 파일 입력에 초점을 비활성화합니다 (tabIndex = -1)

      if ( e.type === 'focus' || isFile && e.type ==='change') {

        $field.addClass('ideal-field-focus')

     }

      if ( e.type === 'blur' ) {

        $field.removeClass('ideal-field-focus')

      }

      self._validate( $this, e )

    })

  },

  _반응: function() {

    var formElements = 이것._getFormElements()

    var maxWidth = LessVars.fieldWidth + formElements.labels.outerWidth()

    var $emptyLabel = formElements.labels.filter(function() {

      return $(this).html () === ' '

    })

    var $customSelect = 이것 ... >
      ? this.$form.toggleClass( 'stack', this.$form.width()
<

maxWidth )
      : this. $form.toggleClass( 'stack', $(window).width()
< this.opts.ResponseAt )
    var
isStack = 이것.$form.is('.stack')
    $emptyLabel.toggle( !isStack )
    $customSelect.trigger( isStack ? 'list' : 'menu' )
    // datePicker 숨기기
    var $datePicker = this.$form.find('input.hasDatepicker')
    if ( $datePicker.length ) { $datePicker.datepicker('hide') }
  }
})
/*
* 공개 방법
*/
$.extend( IdealForms.prototype , {
  getInvalid: function() {
    return this.$form.find('.ideal-field').filter( function() {
      return $(this).data('ideal-isvalid') === false
    })
  },
  getInvalidInTab: function( nameOrIdx ) {
    return this._getTab( nameOrIdx ) .find('.ideal-field').filter(function() {
      return $(this).data('ideal-isvalid') === false

    })
  },
  isValid: function() {
    반환 !this.getInvalid().length
  },
  isValidField: 함수( 필드) {

    var $input = Utils.getByNameOrId( field )
    return $input.parents(' .ideal-field').data('ideal-isvalid') === true
  },
  focusFirst: function() {
    if ( this.$tabs.length ) {
      this.$tabs.filter(':visible')

        .find('.ideal-field:first')
        .find('input:first, select, textarea').focus()
    } else {
      this.$form.find('.ideal-field:first')
<
  },
  focusFirstInvalid: function() {
    var $
first
=
this
.getInvalid().first().find('input:first, select, textarea')
    var
tabName
= $first.parents('.ideal-tabs-content').data('ideal-tabs-content-name')         if ( this.$tabs.length ) {
      this.switchTab( tabName )
   }
    $first.focus()
    반환 이
  },
<<>
switchTab : function (nameoridx) {<🎜 🎜>

this. $ tabs.switchtab (nameoridx)

return return this
  },
  nextTab: function() {
    this.$tabs. NextTab () <((>

>이 <🎜 🎜 <🎜

}},

prevTab : function () {{<{<{ 🎜>
    this.$tabs.prevTab()
    return this
  },

  firstTab: function() {
    this.$tabs.firstTab()
    return this
  },
  lastTab: function() {
    this.$tabs.lastTab( )) <🎜 🎜>

this

}, <🎜

<🎜 🎜> fresh : function () {

    this._getUserInputs().change().parents('.ideal-field')
      .removeClass('valid invalid')
    return 이것
  },
  freshFields: function( fields ) {

필드
=
유틸리티
.convertToArray( fields )
    $.each( 필드, 함수( i ) {
      var $
입력
=
Utils
.getByNameOrId( fields[ i ] )
      $ input.change().parents('.ideal-field').removeClass('valid invalid')
    })
    return this
  },
  reload: function() {
    this._adjust()
<<>

this._attachevents () <🎜 🎜>

this

},
<🎜 🎜 🎜 >
  재설정: function() {
    var
formElements
=
this
._getFormElements()
>
    // 선택 및 맞춤 선택
    formElements.select.find('option').first().prop( 'selected', true )
    this.$form.find('.ideal-select').trigger('reset')
    if ( this.$ tabs.length ) { this.firstTab() }
    this.focusFirst().fresh()
    return this
  },
  resetFields: function( fields ) {
    필드 = Utils.convertToArray( fields )
    var formElements = this._getFormElements()
    $.each( fields, function( i, v ) {
      var $ 입력 = 유틸리티.getByNameOrId( v )
      var 유형 = 유틸.getIdealType ( $input )
      if ( 유형 ==='text' || 유형 ==='파일' ) {
        $input.val('')
      }
      if ( 유형 === 'radiocheck' ) {
        $input.removeAttr('checked') // 라디오 & 체크
      }
      if (
입력 === '선택' ) {
        $input.find('옵션'). first().prop( 'selected', true )
        $input.next('.ideal-select').trigger('reset')
      }
      $input.change()
    })
this.freshFields( fields )
    return this
  },
  toggleFields: 함수( 필드 ) {

필드
=
Utils.convertToArray( fields )
    var
self
=
이
    var $
fields
=
Utils.getFieldsFromArray( fields )
    $fields.each(function() {
      var $
this
= $(this)

      var
이름
= $this.attr('name') || $this.attr('id')
      var
input
=
self.opts.inputs[ name ]
      var
필터
=
입력 && input.filters
      var
dataFilters
= $this. data('이상적인 필터') || ''
      $this.data( 'ideal-filters', filters )
      $this.closest('.ideal-wrap' ).toggle()
      self.setFieldOptions( name, { filters: dataFilters } )
    })
    return 이것
  },
  setOptions: function( options ) {

    $.extend( true, this.opts, options )
    this.reload().fresh()
이

<🎜

}}, <🎜 🎜>

setfieldOptions : 함수 (이름, 옵션) {<🎜 🎜>

를 반환합니다. $.extend( true, this.opts.inputs[ name ], options )
    this.reload().freshFields([ 이름 ])

반환 <🎜 🎜>

}, <🎜 🎜>

addfields : function (fields) {
<🎜 🎜
<🎜 🎜>
fields
=
Utils
.convertToArray( fields )
    var self =
this

    // 모든 입력의 이름을 배열에 저장
    // 이름을 취하는 메서드를 사용하려면 fresh()
    var
allNames
= []
    // DOM에 입력 추가
    함수 추가( ops ) {
      var
name
=
ops
.name
nbsp;     var userOptions = {
        필터: ops.filters || '',
        데이터: ops.data || {},
        오류: ops.errors || {},
        플래그: ops.flags || ''
      }
      var
label
=
ops
.label || ''
      var type =
ops
.type
      var list =
ops
.list || []
      var placeholder =
ops
.placeholder || ''
      var 값 =
ops
.value || ''
      var $필드 = $('
<
div
> '+               '<
라벨
>
'+ 라벨 +':레이블>'+               Utils.makeInput( 이름, 값, 유형, 목록, 자리 표시자) +
        'div>')

      var $ 입력 = $field.find('input, select, textarea, :button')

      // 목록에 필터가 포함된 입력 추가

// 사용자 입력의 //

if (useroptions.filters) {self.opts.inputs [name] = useroptions}
>
      self._doMarkup( $input )

      // DOM에 삽입

      if ( ops.addAfter ) {

        $field.insertAfter(

         $( Utils.getByNameOrId( ops.addAfter ) ).parents('.ideal-wrap')

        )

     } else if ( ops.addBefore ) {

        $field.insertBefore(

          $(Utils.getByNameOrId( ops.addBefore ))

          .parents('.ideal-wrap')

>

          self._getTab( ops.appendToTab ).find('.ideal-wrap:last-child')

        )

      } else {

        $field.insertAfter( self.$form.find('.ideal-wrap').last() )

      }

      // 이름 목록에 현재 필드 이름 추가

      allNames.push(이름)

    }
    // 각 입력을 통해 실행
    $.each( fields, function( i, ops ) { add( ops ) })
    self.reload()
    self.freshFields( allNames )

    self._Response()
    이것을 반환하세요
  },
  removeFields: function( fields ) {

fields
=
Utils
.convertToArray( fields )
    var $
필드
=
유틸리티
.getFieldsFromArray(필드 )
    $fields.parents('.ideal-wrap').remove ) 🎜>})

}( jQuery, window, document ))

【관련 추천】

1.Html5 무료 동영상 튜토리얼
2.
HTML5 로컬 데이터베이스 인스턴스에 대한 자세한 설명
3.
H5 마이크로 시나리오 구현 방법을 가르쳐줍니다
4 .
H5의 사용자 정의 속성 데이터에 대한 자세한 설명-*
5.
텍스트 상자 프롬프트 구현을 위한 H5 코드 예시

위 내용은 H5가 사용자 등록 자동 인증을 완료한 상세 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이전 기사：h5에서 텍스트 상자 프롬프트를 구현하기 위한 코드 예다음 기사：h5에서 텍스트 상자 프롬프트를 구현하기 위한 코드 예