H5によるユーザー登録の自動認証を完了する例を詳しく解説

Html5実装ユーザー登録自動検証機能サンプルコード

05-24 10:49:46 Author:php中国語サイト

自動検証機能を備えたHtml5ユーザー登録のデモを書きました。認証には Handlebarsテンプレートテクノロジーと携帯電話認証コードを使用します。

以下はエフェクトのスクリーンショットです:

1. ページコード: usersRegister.hbs

XML/HTMLコードコンテンツをクリップボードにコピーします

1. >

5. < ;html lang="ja">

7. <頭 >

8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8 「>」 ;

9. <meta http-equiv="X-UA互換" content="IE=edge" />

10. < ;title>用户注册title>

12. <div class="main" >

13. <div style="身長：5px;text-align:center;font-size:25px"> 欢迎您注册！div>

15. <フォーム id="私のフォーム" クラス=「マイフォーム」>

16. <div>

17. <ラベル>用户名:ラベル>< input id="username" name="username" type="text" />

18. div>

19. <div>

21. <

    ラベル>密码:ラベル>< ;input id=「パス」 名前=「パスワード」 type=「テキスト」 />

22. div>
23. <

    div >

24. <

    ラベル>邮箱:ラベル> <input id=「メール」 名前=「メールアドレス」

25. data-ideal

    =「メールアドレスが必要」 " type="email" />

< /

26. div>

27. <div>

28. <ラベル&g t;電话:label><input id="電話" type="text" name="電話" data-ideal="電話" />

29. < /div>

30. <div>

31. <label>供应商V码: label><input id="vCode" type="text" name="vCode" data-ideal= 「vコード」 />

32. div>

33. <div>

34. <ラベル> ;真实姓名:label><input id="trueName" type="text" name =「本当の名前」 data-ideal="trueName" />

35. div>

36. <div>

37. <label>手机验证码:label><input id=「電話コード」 type= "text" name="telCode" data-ideal="telCode" />

38. "margin-bottom:5px;">

    <
39. ボタン

    id="getTelCode" type="ボタン" スタイル=" margin-left

    :160px;
margin-right
40. :auto; "

    >携帯電話認証コードを取得ボタン> margin-top:5px; :5px ;「/> --<div > <ラベル>性別:ラベル

>

41. id=「性別」 名前=「性別」 > オプション>

42. select ＆gt;＆lt;/

    div
43. ＆gt;

44. <label>昵称:label><input id="ニックネーム" タイプ=" text" name="nickName" data-ideal="nickName" />

45. div >

46. div>

47. nbsp;     <label>年龄:label><input id="age" type =「テキスト」 名前=「年齢」 data-ideal=「年齢」 />

48. div> ;-->

50. div>

51. <script type="text/javascript">

52. var

    オプション = {

53. onFail : function() {

alert($myform.getInvalid().length + ' 無効なフィールドです。')
},
入力 : {
'パスワード' : {
フィルター : '必須 パス'

58. },

59. 「ユーザー名」: {

60. フィルター : 「必須のユーザー名」

61. },

62. 'メール' : {

63. フィルター : '必須のメールアドレス'

64. },

65. '電話': {

66. フィルタ : '必須の電話'

},
「本当の名前」 ' : {
フィルター : '必須'
},
'vコード' : {
フィルター : '必須'
'telCode ' : {
フィルター : '必須'
}
/*
「年齢」 : {

78. フィルター : 「必須の digit」、

79. データ : {

80. 最小: 16、

81. 最大: 70

82. }

83. }、

84. 「ファイル」 : {

85. フィルタ : 「拡張子」,

86. データ : {

87. 拡張子 : [ 'jpg' ]

88. }

89. },

90. 」コメント': {

91. フィルタ : '最小 最大'、

92. データ : {

93. 最小: 50,

94. 最大: 200

95. }

96. }、

97. 「状態」: {

98. フィルター : 「除外」,

99. データ : {

100. 除外: [ 'デフォルト' ]

},
エラー
102. : {
     除外: 「选择国籍」。     

103. }

104. },

105. 'langs[]' : {

106. フィルタ : 「最小 最大」、

107. データ : {

108. 最小: 2,

109. 最大: 3

110. },

111. エラー : {

112. min : 「少なくとも <strong」をチェックしてください>2strong> オプション。」、

113. 最大 : 「以下」 強い>3強い> オプション すべてを負っています。」     

114. }

115. }

116. */

117. }

118. };     

119. $('#getTelCode').click(function() {

120. var telephone = document.getElementById("telephone").value; / /手机番号番号

121. if (電話 == null || 電話 == ""){

122. alert("携帯番号番号は空ではありません!");

123. }

124. else{

125. $.ajax({

126. type : "GET",

127. dataType : "

     json",

128. url : "../

     api/getTelCode?電話 ="+ 電話、

129. 成功 : function(msg) {

},
error : function(e) {
alert("获取手机校验码失败！" + e );

133. var $('#my-form') .idealforms(オプション).data( 'idealforms');

134. $('#submit').click( function() {

135. ユーザー名

136. var password =

     document
.getElementById("pass").value //パスワード
var
138. email

     = do;キュメント .getElementById(" email "） （vcode "） "+ ユーザー名 +" パスワード

     =
"+ パスワード +"

139. メール="+メール +"電話

     =
"+電話 +"

140. vCode="+vCode +" telCode

     =
" + telCode +"

141. tru​​eName="+ trueName,

     成功: function(msg) {

142. :8083/uimcardprj/share/meun jsp / ディレクトリを取得します。ホスト アドレスの後に次のように追加します。uimcardprj/share/meun.jsp

143. var

     pathName = window.document.location.pathname;

144. localhostPaht
=
145. curWwwPath

     .sub

     string
(0, pos);
146. pathName

     。 substring(0, pathName.substr(1).indexOf('/') + 1); アラート("登録が成功しました!");

147. $('#reset').click(function() {

148. $myform.reset().fresh().focusFirst(); script

>

149. >

150. 2.jq 入力検証: jquery.idealforms.js

151. js 検証の初期バージョンは Cedric Ruiz からのもので、私はそれを少し修正しました。
152. 部分検証のルールは次のとおりです:
     required: 'これは必須です。'
153. number: '数値である必要があります。',
     digitals: '一意の番号である必要があります。'
154. name: '少なくとも 3 文字の長さで、文字のみを含めることができます。'
     ユーザー名:'ユーザー名の最小文字数は 5 文字、最大文字数は 30 文字です。ユーザー名の最初の文字は英字、数字、中国語、アンダースコアを使用してください。 '
155. pass:' パスワードは 6 ～ 15 桁で、少なくとも 1 つの数字と 1 つの大文字を含む必要があります。 '
     strongpass: '長さは 8 文字以上で、少なくとも 1 つの大文字と 1 つの小文字、および数字または
特殊文字
156. を含む必要があります。'
     email: '有効な電子メール アドレスである必要があります。 (例:
'">user@gmail.com)'

157. phone: ' 有効な携帯電話番号である必要があります。(例: 18723101212)
158. 以下はコード ファイル全体です:

159. XML/HTML コード
     コンテンツをクリップボードにコピーします

160. 1. /*------------------------------------------ ----------------------------

     2. jq-idealforms 2.1

     3. * 著者: Cedric Ruiz

     4. * ライセンス: GPL または MIT

     5. * デモ: http://elclanrs.github.com/jq-idealforms/

     6. *

     7. ------------- -------------------------------------------------- -----------*/

     8. ;(function ( $, window, document, unknown ) {

     9. 'use strict';

     10. // Global Ideal Forms namespace

     11. $.idealforms = {}

     12. $.idealforms.filters = {}

     13. $.idealforms.errors = { }

     14. $.idealforms.flags = {}

     15. $.idealforms.ajaxRequests = {}

     16. /*--------------------------- -----------------------------------------------*/

     17. /**    

     18. * @namespace さまざまな ユーティリティのためのチェスト

     19.  */

     20. var Utils = {

     21. /**    

     22. * コレクション内の最も幅の広い要素の幅を取得します。    

     23. * @memberOf Utils

     24. * @param {jQuery

         object} $elms

     25. * @

         returns {number}

     26.    */

     27. getMaxWidth: function( $el ms ) {

     28. var

         maxWidth = 0

     $elms.
     29. each

         (function() {

     var
     30. width

         = $(this).outerWidth()

     if ( 幅
     31. >

         maxWidth ) {

     32. maxWidth

         = width

     }

     33. })

     34. return maxWidth

     35. },

     36. /**    

     37. * LESS 変数を取得するハッキーな方法

     38. * @memberOf Utils

     39. * @param {string} name LESS クラスの名前。    

     40. * @param {string} prop データが 保存される CSS プロパティ 。    

     41. * @returns {number, string}

     42.    */

     43. getLessVar: function( name, prop ) {

     44. var value = $('<p class="' + name + '">p&gて；'）。 Hide().appendTo('body').css( prop )

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

     46. return ( /^d+/.test( value ) ? parseInt( value , 10 ) : 値 )

     47. },

     48. /**    

     49. * ES5 オブジェクトのようなkeys

     50.    */

     51. getKeys: function( obj ) {

     52. var keys = []

     53. for(var key in obj) {

     54. if ( obj.hasOwnProperty( key ) ) {

     55. keys.push( key )

     56. }

     57. }

     58. リターンキー

     59. },

     60. // オブジェクトの長さの取得

     61. getObjSize: function( obj ) {

     62. var size = 0, キー;     

     63. for ( key in obj ) {

     64. if ( obj.hasOwnProperty( key ) ) {

     65. size++;     

     66. }

     67. }

     68. サイズを返す。     

     69. },

     70. isFunction: function( obj ) {

     71. return typeof obj === nbsp;'function'

     72. },

     73. isRegex: function( obj ) {

     74. return obj instanceof RegExp

     75. },

     76. isString: function( obj ) {

     77. return typeof obj === 'string'

     78. },

     79. getByNameOrId: function( str ) {

     80. var $

         el = $('[name="'+ str +'"]').length

     81. ？ $('[

         name="'+ str +'"]') // 名前別

     82. : $('#'+ str) // ID別

     83. return $el.length

     84. ? $el

     85. : $.error('フィールド "'+ str + '" が存在しません。')

     86. },

     87. getFieldsFromArray: function( fields ) {

     88. var f = []

     89. for ( var i = 0, l = フィールド.length; i < l; i++ ) {

     90. f.push( Utils.getByNameOrId( fields[i] ).get(0) )

     91. }

     92. 戻る$( f )

     93. },

     94. convertToArray: function( obj ) {

     95. return Object.prototype.toString.call( obj ) === '[object配列]'

     96. ? obj : [ obj ]

     97. },

     98. /**    

     99. * 任意の Ideal Forms 要素

     100. * @param $input jQuery $input オブジェクト

     101.    */

     102. getIdealType: function( $el ) {

     103. var

          type = $el.attr('タイプ') || $el[0].tagName.toLowerCase()

     104. return (

     105. /(text|password|email|number|search|url|tel|textarea)/.test( type ) && 'text' | |

     106. /file/.test( type ) && 'file' ||

     107. /select/.test( type ) && 'select' ||

     108. /(ラジオ|チェックボックス)/.test （タイプ）&& 'RadioCheck' || |

     109. /hr/.test( type ) && '区切り文字' ||

     110. /hidden/.test( type ) && 'hidden'

     111. )

     112. }、

     113. /**    

     114. * 入力を生成します

     115. * @param name 入力の`name` 属性

     116. * @param type `type` または `tagName`置く

     117.    */

     118. makeInput: function( name, value, type, list, placeholder ) {

     119. var markup,

          items

          = [], item, i, len

     120. function splitValue( str ) {

     121. var item, value, arr

     122. if ( /::/.test( str ) ) {

     123. arr = str.split('::')

     124. item = arr[ 0 ]

     125. 値 = arr[ 1 ]

     126. } else {

     127. item = value = str

     128. }

     129. return { item: item, value: value }

     130. }

     131. // テキスト & ファイル

     132. if ( /^(text|password|email|number|search|url|tel|file|hidden)$/.test(type) )

     133. マークアップ = '+

     134. 'type="'+ type +'" '+

     135. 'id="'+ name +'" '+

     136. '名前= "'+ 名前 +'" '+

     137. '値="'+ 値 +'" '+

     138. (プレースホルダー && 'プレースホルダー) =「'+ プレースホルダー +'」 ') +

     139. '/>'

     140. // Textarea

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

     142. マークアップ = '< textarea id="'+ name +'" name="'+ name +'" value="'+ value +'">textarea >'

     143. }

     144. // Select

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

     146. アイテム = []

     147. for (

          i = 0, len = list.length; 私は レン; i++ ) {

     148. item = splitValue( list[ i ] ).item

     149. value

          = splitValue( list[ i ] ).value

     150. items.push('<オプション value="'+ value +'">'+ item +'オプション& GT;」 )

     151. }

     152. マークアップ =

     153. '名前="'+ 名前 +'"> '+

          items.join('') +

          'select>'

          }

          // ラジオチェック

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

          items = []

          for ( i = 0, len = list.length; 私は < len; i++ ) {

          item = splitValue( list[ i ] ).item

          value = splitValue( list[ i ] ).value

          items.push(

          '

          <

          label>'+

          '

          <

          input type="'+ type +'" name="'+ name +'" value="'+ value +'" />'+ item +

          '

          ラベル>'

          )

          }

          マークアップ

          =

          アイテム.join('')

          }

          return マークアップ

          }

          }

          /**    

          * 理想的なフォームのカスタムタブ

           */

          $

          .fn.idealTabs

          =

          関数 (コンテナ) {

          var

          // 要素

          $contents = this,

          $

          コンテナコンテナ = コンテナ,

          $

          ラッパー

          = $('<ul クラス= "ideal-tabs-wrap"/>'),

          $

          tabs

          = (function () {

          var

          tabs

          = []

          $contents.each( function () {

          var

          name

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

          var

          html

          =

          '

          '

          +

          '

          <

          スパン>' + 名前 + 'スパン>'+

          '

          <

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

          '

          li>' tabs.push(html)

          })

          return $(tabs.join(''))

          }()),

          Action

          s = {

          getCurIdx: function () {

          return $tabs

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

          .index()

          },

          getTabIdxByName: function (name) {

          var

          re

          =

          new RegExp(name, 'i' )

          var $

          tab

          = $tabs.filter(function () {

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

          })

          return $ tab.index()

          }

          },

          /**    

          * パブリック メソッド

             */

          メソッド

          = {

          /**

          * Switch tab

          */

          switchTab: function (nameOrIdx) {

          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()

          },

          next

          Tab: function () {

          var

          idx

          = Actions.getCurIdx() + 1

          idx

          >

          $tabs.length - 1

          ?? Methods.firstTab()

          : Methods.switchTab(idx)

          },

          prev

          Tab: function () {

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

          },

          firstTab: function () {

          Methods.switchTab(0)

          },

          lastTab: function () {

          Methods.switchTab ($tabs.length - 1)

          },

          updateCounter: function (nameOrIdx, text) {

          var

          idx

          = !isNaN(nameOrIdx) ? nameOrIdx : Actions.getTabIdxByName(name),

          $

          counter

          = $tabs.eq(idx).find('.ideal-tabs-tab-counter')

          $counter.removeClass('理想的な-tabs-tab-counter-zero')

          if (!text) {

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

          }

          $counter.html(text)

          }

          }

          // メソッドを添付

          for (var m inメソッド)

          $contents[m] = メソッド[m]

          // Init

          $tabs.first()

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

          .end ()

          .click(関数() {

          var

          name

          = $(this).text()

          $contents.switchTab(name)

          })

          // DOM & イベントに挿入

          $wrap per.append($tabs).appendTo($container)

          $ content.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() // 新たに開始

          return $contents

          }

          /**    

          * カスタム

          <select> menu jQuery plugin

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

           */

          $

          .fn.idealSelect = function () {

          return this.each(function () {

          var

          $

          select = $(this),

          $

          オプション&nbnbsp;= $select.find('option')

          /**    

          * マークアップを生成し、カスタム選択の要素を返す

          * @memberOf $.fn.toCustomSelect

          * @returns {object} すべての要素新しい 選択の 置換

               */

          var

          idealSelect = (function () {

          var

          $

          ラップ = $ ('<ul class="ideal-select '+ $select.attr('name') +'"/>'),

          $

          menu = $(

          '

          <li><スパン class="ideal-select-title"> ' +

          $options .filter(':selected').text() +

          '

          span>li>'

          )、

          items = (function () {

          var

          items = []

          $options.each(function () {

          var $this = $(this)

          items.push('<li class=" 「>」 + $this .text() + 'li>')

          })

          返品商品

          }())

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

          $wrap.append($menu)

          return {

          select: $wrap,

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

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

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

          }

          }() )

          /**    

          * @namespace カスタム選択のメソッド

          * @memberOf $.fn.toCustomSelect

               */

          var

          Actions

          = {

          getSelectedIdx: function () {

          return idealSelect.items

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

          },

          /**    

          * @private

                 */

          init: (function () {

          $select.css ({

          位置

          : '絶対',

          左: '-9999px'

          })

          idealSelect.sub.hide()

          idealSelect.select.insertAfter ($select)

          idealSelect.select.css(

          '

          最小幅

          ',

          ユーティリティ.getMaxWidth(idealSelect.items)

          )

          idealSelect.items

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

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

          }()),

          noWindowScroll: function (e) {

          if (

          e.that === 40 || e.that === 38 || e.that === 13) {

          e.preventDefault()

          }

          },

          // フォーカスが失われる問題を修正スクロール

          // キーボードで アイテムを選択

          focusHack: function () {

          set

          Timeout(function () {

          $select.trigger('focus')

          }, 1)

          },

          focus: function () {

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

          $(document).on('keydown.noscroll', Actions.noWindowScroll)

          }、

          ぼかし: function () {

          idealSelect.select

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

          $(document).off('.noscroll')

          },

          scrollIntoView: function (

          dir) {

          var

          $

          selected = idealSelect.items.filter('.ideal-select-item-selected') ,

          itemHeight = idealSelect.items.outerHeight(),

          menuHeight = idealSelect.sub.out erHeight(),

          isInView = (function () {

          // サブメニューに対する相対位置

          var

          elPos = $selected.position().top + itemHeight

          return

          dir === 'down'

          ?? elPos

          <= menuHeight

          : elPos > 0

          }())

          if (!isInView) {

          itemHeight = (dir === 'down')

          ? itemHeight // 下がる

          : -itemHeight // 上がる

          idealSelect.sub

          .scrollTop(idealSelect.sub.scrollTop() + itemHeight)

          }

          } 、

          scrollToItem: function () {

          var

          idx

          = Actions.getSelectedIdx(),

          高さ

          = idealSelect.items.outerHeight(),

          nItems

          = idealSelect.items.length,

          allHeight

          = height * nItems,

          curHeight

          = height * (nItems - idx)

          idealSelect.sub .scrollTop(allHeight - curHeight)

          },

          showMenu: function () {

          idealSelect.sub.fadeIn('fast ')

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

          Actions.select(Actions.getSelectedIdx())

          Actions.scrollToItem()

          },

          hideMenu: function () {

          idealSelect。 sub.hide()

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

          },

          select: function (idx) {

          idealSelect.items

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

          idealSelect.items

          .eq(idx).addClass('ideal-select-item-select編')

          },

          変更: 関数 (idx) {

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

          Actions.select(idx)

          idealSelect.title.text(テキスト)

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

          $select.trigger('change')

          },

          keydown: 関数(キー) {

          var

          idx

          = Actions.getSelectedIdx(),

          isMenu

          =

          idealSelect.select.is('.ideal-select-メニュー')、

          はOpenです

          =

          IdealSelect.select.is('.ideal-select-open')

          /**    

          * @namespace キーが押されました

                   */

          var

          keys

          = {

          9: 関数 () { // TAB

          if (isMenu) {

          Actions.blur() A ctions.hideMenu()

          }

          },

          13: function () { / / ENTER

          if (isMenu)

          isOpen

          ?? Actions.hideMenu()

          : Actions.showMenu()

          Actions.change(idx)

          },

          27: function () { // ESC

          if ( isMenu) Actions.hideMenu()

          40: function () { // DOWN

          if (idx

          <

          $options.length - 1) {

          isOpen

          ? Actions.select(idx + 1)

          : Actions.change(idx + 1)

          }

          Actions.scrollIntoView('down ')

          },

          38: function () { // UP

          if (idx > 0) {

          は開いています

          ?? Actions.select(idx - 1)

          : Actions.change(idx - 1)

          }

          Actions.scrollIntoView('up')

          },

          'デフォルト': function () { // Letter

          var

          letter = String.fromCharCode(key),

          $matches = idealSelect.items

          。 filter(function () {

          return /^w+$/i.test( letter ) && // 修飾キー ( ctrl, cmd, meta, super... )

          新しい RegExp( '^' + letter, 'i').test( $(this).text() ) // 最初の一致を見つける

          }),

          nMatches = $matches.length,

          counter = idealSelect.select.data('counter') + 1 || 0,

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

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

          if (!nMatches) // 一致なし

          return false

          // さらに一致する場合同じ 文字

          if (

          curKey === key) {

          if (counter < nMatches) {

          idealSelect.select.data('counter', counter)

          }

          else {

          idealSelect.select。 data('counter', 0)

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

          }

          }

          // 新しい 手紙の場合

          else {

          &nnbsp;idealSelect.select.data('counter', 0)

          newIdx

          = $matches.eq(0).index()

          }

          if ( isOpen)

          Actions.select(newIdx)

          else

          アクション.change(newIdx)

          idealSelect.select.data('key', key)

          Actions.scrollToItem ()

          Actions.focusHack()

          }

          }

          keys[キー]

          ? キー[キー]()

          : キー['デフォルト']()

          }

          }

          /**    

          * @namespace 「メニューモード」および「リストモード」のカスタム選択のすべてのイベントを保持します

          * @memberOf $.fn.toCustomSelect

               */

          var

          イベント

          = {

          focus: Actions.focus,

          'blur.menu': function () {

          Actions.blur()

          Actions.hideMenu()

          },

          'blur.list': function () {

          Actions.blur()

          },

          keydown: function (e) {

          Actions.keydown(e.that)

          },

          'clickItem。 menu': function () {

          Actions.change($(this).index())

          Actions.hideMenu()

          },

          'clickItem.list': 関数() {

          Actions.change($(this).index())

          },

          'clickTitle.menu': function () {

          Actions.focus()

          Actions.showMenu()

          $select.trigger('focus')

          },

          'hideOutside.menu': function () {

          $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

          =

          function

          () { 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('menu', function () {

          disableEvents()

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

          Actions.hideMenu()

          $select.on({

          'blur.menu': events['blur .menu'],

          'focus.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.that !== 9) e. plainSelect.select.on('reset', function(){

          Actions.change(0)

          })

          idealSelect.select.trigger('menu') // デフォルトは「メニューモード」

          })

          }

          /*

          * idealRadioCheck: チェックボックス用のjQuery プラグインおよびラジオの交換

          * 使用法: $('input[

          type

          =

          checkbox

          ], input[

          type

          =

          radio

          ]').idealRadioCheck()

          */

          $

          .fn.idealRadioCheck

          =

          function

          () {

          return this.each(function() { var $this = $(this)

          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' }) // 左にシフトして隠す

          // イベント

          $this.on({

          変更: function() {

          var $

          this

          = $(this)

          if ( $this.is('input[

          type

          ="radio"]') {

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

          }

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

          },

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

          blur: function () { $span.removeClass ('フォーカス') },

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

          })

          })

          }

          ;(function( $ ) {

          // ブラウザは HTML5 複数の ファイルをサポートしていますか?     

          var

          multipleSupport

          = typeof $('<input/>')[0].multiple !== '未定義',

          isIE

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

          $

          .fn.idealFile

          = function() {

          return this.each(function() {

          )

          var $

          ファイル

          = $(this).addClass('ideal-file'), // 元のファイル入力

          // IE ハックに 使用されるラベル

          $

          wrap

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

          $input = $('<input type="text" class="理想的なファイル名" /> ')、

          // IE 以外のブラウザで使用されるボタン

          $ボタン = $('<ボタン type= 「ボタン」 クラス=「理想-ファイルアップロード">開くボタン>'),

          // IE用のハック

          $

          ラベル = $('< label class="ideal-file-upload" for="'+ $file[0].id +'">Openlabel> ;')

          // 左に移動して非表示にすることで、

          // 引き続き イベントをトリガーできる

          $ file.css({

          position: '絶対',

          左: '-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, ファイル名

          // 複数がサポートされている場合は、

          抽出

          // ファイル配列からすべてのファイル名

          if ( multipleSupport ) {

          fileArr

          = $file[0].files

          for ( var

          i

          =

          0, len = fileArr.length; 私は< レン; i++ ) {

          files.push( fileArr[i].name )

          }

          ファイル名 = ファイルs.join(', ')

          // サポートされていない場合は、値

          // パスを削除すると、ファイル名だけが表示されます

          } else {

          ファイル名 = $file.val().split('\').pop()

          }

          $input.val( filename ) // 値を設定する

          .attr( 'title', filename ) // ファイル名を表示タイトル トゥーリップ

          })

          $ input.on({

          focus: function () { $file.trigger('change') },

          blur: function () { $file.trigger('blur') },

          : !isIE ) { $file.trigger('click') }

          } else if（

          e.which=== 8 ||e。wich=== 46）{// Backspace＆del

          //

          // この トリックを使用して 古い 入力 を削除し

          // 元の イベントがすべて添付された クリーンな クローン

          $file.replaceWith( $

          file

          = $file.val('' ).clone( true ) )

          $file.trigger('change')

          $input.val('')

          } else if (

          e.that === 9 ) { // TAB

          return

          } else { // その他すべての キー

          return false

          }

          }

          })

          })

          }

          }( jQuery ))

          /**    

          * @namespace エラー

          * @locale en

           */

          $ .idealforms.errors = {

          が必要です: 'これは必須です。'、

          番号: '数字である必要があります。'、

          数字: '一意の番号である必要があります。'、

          名前: '少なくとも 3 文字である必要がありますは長く、「

          ユーザー名:」の文字のみを含めることができます。ユーザー名は最短で 5 桁、最長で 30 ビットです。英語の文字、数字、中国語、および下位行を使用してください。完全な数字。中国語は最大 21 単語。'、

          pass:' パスワードの数は 6 ～ 15 ビットで、少なくとも 1 つの数字、大文字、および小文字を使用する必要があります。'、

          Strongpass: '長さは 8 文字以上で、少なくとも 1 つの大文字、1 つの小文字、および 1 つの数字または特殊文字が含まれている必要があります。'、

          email: '有効なメール アドレスである必要があります <。 em>(例: user@gmail.com)em>'、

          電話: '<em >(例: 18723101212)em>',

          zip: '<em > (例: 33245 または 33245-0003)em>',

          url: '有効な URL である必要があります & lt;em> ;(例：www .google.com)em>',

          minChar: '少なくとも 0} strong> 文字の長さである必要があります。', minOption: '少なくとも strong

          > ;

          オプションを確認してください。'、

          maxChar: '<strong>{0} ',

          maxOption: '

          <strong>{0}strong> オプション以上は許可されません。 '、

          range : '{0} から {1} までの数値である必要があります。'、 date: '有効な日付である必要があります >'、

          dob: 「有効な生年月日である必要があります。」、

          exclude: 「{0}」は利用できません。’,

          excludeOption: 「{0}」,

          equalto： ''と同じ値でなければなりません。有効な内線番号が必要です。 

          <em>(例: "{0}")em>',

          ajaxSuccess: '

          < 強い> {0}strong> は利用できません。',

          ajaxError: 'サーバーエラー...'

          } /**     * すべてのデフォルト フィルタを取得

          * @returns object

            */

          var

          getFilters

          =

          function

          () {

          var

          filters

          = {

          必須: {

          正規表現: /.+/,

          エラー: $.idealforms.errors.required

          },

          number: {

          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,

          error: $.idealforms.errors .username

          },

          pass: {

          regex: /(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{ 6 ,}/,

          error: $.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

          }、

          電話: {

          //正規表現: /^((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: {

          正規表現: /^d{5}$|^d{5}-d{4}$/,

          エラー: $。 Idealforms.errors.zip

          },

          url: {

          regex: /^(?:(ftp|http|https)://)?(?:[w-]+. ）+[a-z] {2,6}（[：/？＃]。*）？$/i、

          エラー：$ .idealforms.errors.url

          }、

          min： {

          regex: function( input, value ) {

          var $

          inputinput = input.input,

          min = input.userOptions.data.min,

          isRadioCheck = $input.is('[type="チェックボックス"], [type="radio"]')

          if ( isRadioCheck ) {

          this.error

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

          return $input.filter(':checked').length

          >

          = min

          }

          this.error

          = $.idealforms.errors.minChar.replace( '{0}', min )

          戻り値.length

          >

          = 分

          }

          },

          max: {

          regex: function( input, value ) {

          var $

          input

          input = input.input,

          max

          =

          input.userOptions.data.max,

          isRadioCheck

          = $input.is('[

          type="チェックボックス"], [type="ラジオ" ]')

          if ( isRadioCheck ) {

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

          return $input.filter(':checked' ).length <= max

          }

          this.error = $.idealforms.errors.maxChar.replace( '{0}', max )

          戻り値.length

          <= 最大

          }

          }、

          範囲: {

          正規表現: function( input, value ) {

          var

          range

          = input。 userOptions.data.range,

          val

          = +value

          this.error

          = $.idealforms.errors.range

          .replace( '{0}', range[0] )

          .replace( '{1}', range[1] )

          return val

          >

          = range[0] && val <= range[ 1]

          }

          },

          date: {

          regex: function( input, value ) {

          var

          userFormat

          =

          input

          .userOptions.data && input.userOptions.data.date

          ? input.userOptions.data.date

          : 'mm/dd/yyyy', // デフォルトの形式

          delimiter

          = /[^mdy]/.exec( userFormat ) [0]、

          theFormat

          = userFormat.split(区切り文字),

          theDate

          = value.split(区切り文字),

          isDate

          = function( 日付, 形式 ) {

          var m, d, y

          for ( var

          i

          = 0, len = format.length; i << レン; i++ ) {

          if ( /m/.test( format[i]) ) m = date[i]

          if ( /d/.test( format[i]) ) d = date[i]

          if ( /y/.test( format[i]) ) y = date[i]

          }

          戻る (

          m > 0 && m < 13 &&

          y &&y.length === 4 &&

          d

          > 0 && d <= ( 新しい 日付( y, m, 0 ) ).getDate()

          )

          }

          this .error

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

          return isDate( theDate, theFormat )

          }

          },

          dob: {

          regex: function( input, value ) {

          var

          userFormat

          =

          input

          .userOptions.data && input.userOptions.data.dob

          ? input.userOptions.data.dob

          : 'mm/dd/yyyy', // デフォルトの形式

          // 日付入力をシミュレートする

          dateInput

          = {

          input: input .input,

          userOptions: {

          data: { date: userFormat }

          }

          },

          // 内部日付フィルターを使用して日付をval

          idate

          isDate

          =

          filters.date.regex( dateInput, value ),

          // 生年月日

          the Year = /d{4}/.exec( value ),

          max Year = new Date().getFull Year(), // Current 年

          分年 = maxyear - 100

          this.error = $.idealforms.errors.dob

          Return isDate && the Year >= min年 && the年 <= max年

          }

          },

          exclude: {

          regex: function( input, value ) {

          var $inputinput = input.input,

          exclude = input.userOptions.data.exclude,

          isOption = $input.is('[type="チェックボックス"], [type= 「ラジオ」]、 select')

          this.error = isOption

          ?? $.idealforms.errors.excludeOption.replace( '{0}', value )

          : this.error = $.idealforms.errors.exclude.replace( '{0}', value )

          $ $ .inarray（value、exclude）===-1

          }}}、

          equalto：{

          regex：function（input、value）{

          var $

          equals

          = $( input.userOptions.data.equalto ),

          $input

          input

          = input.input,

          名前

          = $equals.attr('名前') || $equals.attr('id'),

          isValid

          = $equals.parents('.ideal-field')

          .filter(){ return $(this).data(' Ideal-isvalid') === true })

          .length

          if ( !isValid ) { return false }

          this.error = $.idealforms.errors.equalto.replace( '{0}', name )

          return $input.val() === $equals.val()

          }

          },

          拡張子: {

          正規表現: function( input, value ) {

          nbsp;var

          files = input.input[0].files | | [{ name: value }],

          extensions = input.userOptions.data.extension,

          re = new RegExp( '\.'+ extensions.join('| ') +'$', 'i' ),

          有効 = false

          for ( var

          i = ) 0, len = files.length; 私は < len; i++ ) {

          valid

          = re.test( files[i].name );     

          }

          this.error

          = $.idealforms.errors.extension.replace( '{0}', extensions.join('", "') )

          返品有効

          }

          },

          ajax: {

          regex: function( input, value, showOrHideError ) {

          var

          self

          = this

          var $

          input

          input = input.input

          var

          userOptions

          = input.userOptions

          var

          name

          = $input.attr('name')

          var $

          field

          = $input.parents('.ideal-field')

          var

          valid

          =

          false

          var

          customErrors

          =

          userOptions .errors && userOptions.errors.ajax

          self.error

          = {}

          self.error.success

          =

          customErrors && customErrors.success

          ? CustomErrors.success

          : $.idealforms.errors.ajaxSuccess.replace( '{0}', value )

          self.error.fail = customError s && customErrors.error

          ?? CustomErrors.error

          : $.idealforms.errors.ajaxError

          // 入力した名前を$_POST[名前]として送信します

          var

          data = {}

          データ[ name ] = $.

          trim( value )

          // ユーザーによって定義されたAjaxオプション

          var

          userAjaxOps = input。 userOptions.data.ajax

          var

          ajaxOps = {

          type: 'post',

          dataType: 'json',

          data: data,

          success: function( resp, text, xhr ) {

          console.log(resp )

          showOrHideError( self.error.success, true )

          $input.data({

          'ideal-ajax-resp': resp,

          'ideal-ajax-error' : self.error.success

          })

          $input.trigger('change') // カウンターを更新する

          $field.removeClass('ajax')

          //実行カスタム成功コールバック

          if( userAjaxOps._success ) {

          userAjaxOps._success( resp, text, xhr )

          }

          },

          error: function( xhr, text , error ) {

          if ( text !== 'abort' ) {

          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、（ajaxops、 userAjaxOps )

          // Init

          $input.removeData('ideal-ajax-error')

          $input .removeData('ideal-ajax-resp')

          $field。 addClass('ajax')

          // リクエストを実行して保存すると、中止できるようになります

          // リクエストがバブルにならないようにします

          $.idealforms.ajaxRequests[ name ] = $。 ajax( ajaxOps )

          }

          }

          }

          フィルタを返す

          }

          $.idealforms.flags = {

          noerror: function (i) {

          i.parent().siblings('.ideal-error').hide()

          },

          noicons: function (i) {

          私。兄弟('.ideal-icon-valid, .ideal-icon-invalid').hide()

          },

          novalidicon: function (i) {

          i.siblings(' .理想-icon-valid').hide()

          },

          noinvalidicon: function (i) {

          i.siblings('.ideal-icon-invalid').hide()

          },

          noclass: function (i) {

          i.parents('.ideal-field').removeClass('valid invalid')

          },

          novalidclass: function (i) {

          i.parents('.ideal-field').removeClass('valid')

          },

          noinvalidclass: function (i) {

          私。 parents('.ideal-field').removeClass('invalid')

          }

          }

          /*

          * 理想的なフォームプラグイン

          */

          var _defaults = {

          入力: {},

          customFilters: {}, customFlags: {}、

          globalFlags: '',

          onSuccess : function(e) { alert('Thank you...') },

          onFail: function() { alert('無効!') },

          ResponseAt: 'auto',

          {

          var

          自分

          =

          これ

          self.$

          form

          = $( element )

          self.opts = $.extend( {}, _defaults, options )

          self.$

          tabs = 自分.$form .find('section')

          // ローカライズされたフィルタを設定する

          $.extend( $.idealforms.filters, getFilters() )

          self._init()

          }

          // プラグイン

          $

          .fn.idealforms

          =

          function

          ( options ) {

          return this.each(function() {

          )

          if ( !$.data( this, 'idealforms' ) ) {

          $.data( this, 'idealforms', new IdealForms( t​​his, options ) )

          }

          })

          }

          // LESS 変数を取得する

          var

          LessVars

          = {

          fieldWidth: Utils.getLessVar( 'ideal-field-width', 'width')

          }

          /*

          * プライベート メソッド

          */

          $.extend( IdealForms.prototype, {

          _init: function() {

          var

          自分

          =

          this

          var

          o

          =

          self

          .opts

          var

          formElements

          =

          self

          ._getFormElements()

          self.$form.css( 'visibility

          '、 '可視' )

          。 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.prep終了( $tabContainer )

          self.$tabs.idealTabs( $tabContainer )

          }

          // 常に 下に datepicker を表示入力

          if ( jQuery.ui ) {

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

          }

          // data-ideal で指定された入力を追加

          // ユーザーのリストにinputs

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

          var userInput = o.inputs[ this.name ]

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

          })

          // レスポンシブ

          if ( o.sensitiveAt ) {}

          // フォームイベント

          self .$form.on({

          keydown: function( e ) {

          // Enterキーを押したときに送信されないようにします

          //しかしテキストエリアを除外する

          if (

          e.that

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

          e.preventDefault()

          }

          },

          submit: function( e ) {

          if ( !self.isValid() ) {

          e.preventDefault()

          o.onFail()

          self.focusFirstInvalid()

          } else {

          o.onSuccess( e )

          }

          }

          })

          self._adjust()

          self._attachEvents()

          self.fresh() // 新しく開始

          },

          _getFormElements: function() {

          return {

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

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

          text: this.$form.find('input:not([type="checkbox"], [type ="ラジオ"], [type="送信"]), textarea'),

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

          ラジオチェック: this.$form.find('input[type="ラジオ"], input[type="チェックボックス"]'),

          ボタン: this.$form.find(' :button'),

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

          Headings: 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('"], [name="') +'"]')

          },

          _getTab: function( nameOrIdx ) {

          var 自分 = 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-tabs-content-name') )

          })

          },

          _getCurrentTabIdx: function() {

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

          },

          _updateTabsCounter: function() {

          var self = this

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

          var 無効 = self。 getInvalidInTab( i ).length

          self.$tabs.updateCounter( i, invalid )

          })

          },

          _adjust: function() {

          var

          self = this

          var

          o = self.opts

          var

          formElements = self._getFor mElements()

          var

          curTab = self._getCurrentTabIdx( )

          // オートコンプリートはいくつかの問題を引き起こします...

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

          // タブを表示寸法を計算する

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

          // ラベルを調整

          var

          labels = formElements.labels

          labels.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

          =

          this

          .opts

          var $datepicker

          =

          this

          .$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.replace( 'yyyy', 'yy' ) : 'mm/dd/yy'

          $(this).datepicker({

          dateFormat: format,

          前表示: 関数( input ) {

          $( input ).addClass('open')

          },

          onChangeMonth Year: function() {

          // IE9 のサイズ変更を修正するハック

          var $

          this = $(this)

          var

          w = $this.outerWidth() // cache first!

          setTimeout(function() {

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

          }, 1)

          },

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

          })

          })

          // 幅を調整

          $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 $エラー = $(' <span class="ideal-error" />')

          var $valid = $('i クラス= "ideal-icon ideal-icon-valid" />')

          var $

          invalid = $('<i class="理想のアイコン-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, $無効な )

          .parent().after( $error )

          },

          text: function() { idealElements._defaultInput() },

          radiocheck: function() {

          // 入力がすでにラップされているかどうかを確認するため、

          // ラジオをラップして複数回チェックする

          var

          isWrapped

          = $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()

          }

          },

          select: function() {

          idealElements._defaultInput()

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

          $element.idealSelect()

          }

          },

          file: function() {

          idealElements._defaultInput()

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

          $element.idealFile ()

          }

          }、

          button: function() {

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

          $element.addClass('ideal-button')

          }

          },

          hidden: function() {

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

          },

          Heading: function() {

          $ element.closest（ 'div'）。addclass（ 'ithy-full-width'）

          $ element.parent（）。children（）。

          class

          ="ideal-Heading"/>') },

          separator: function() {

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

          $element.wrapAll('

          <

          div

          class

          ="ideal-separator"/>') }

          }

          // 現在の要素タイプのマークアップを生成します

          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

          =

          this

          var o = this

          .opts

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

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

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

          var value = $input.val()

          var ajaxRequest = $ .idealforms.ajaxRequests[ 名前 ]

          var isRadioCheck = $input.is('[type="チェックボックス"], [type="radio"]')

          var inputData = {

          // ラジオまたはチェックの場合、名前に関連するすべての入力を検証します

          input: isRadioCheck ? self.$form.find('[name="' + name + '"]') : $input,

          userOptions: userOptions

          }

          // 検証 要素

          var $

          field

          = $input.parents('.ideal-field')

          var $

          error

          = $field.siblings('.ideal-error')

          var $

          無効です

          = isRadioCheck

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

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

          var $

          valid

          =

          isRadioチェック

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

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

          function resetError() {

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

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

          }

          function showOrHideError( error, valid ) {

          resetError()

          valid ? $valid.show() : $invalid.show()

          $field.addClass( valid ? 'valid' : 'invalid' )

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

          if ( !valid ) {

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

          }

          }

          // 入力時に検証を防ぎますが、新しい文字は導入しません

          // これは主に 複数の AJAX リクエスト

          var oldValue = $input.data('理想値') | | 0

          $input.data( 'ideal-value', value )

          if ( e.type === 'keyup' && value === oldValue ) { return false }

          // 検証

          if ( userFilters ) {

          $.each( userFilters, function( i, filter ) {

          var

          theFilter = $.idealforms.filters[ filter ]

          var

          customError = userOptions.errors && userOptions.errors[ filter ]

          var

          error = ''

          // フィールドが空であり、必須ではない場合

          if ( !value && filter !== 'required' ) {

          resetError()

          return false

          }

          if ( theFilter ) {

          // 中止して ajaxをリセットする保留中のリクエストがある場合

          if (

          e.type

          === 'keyup' && ajaxRequest ) {

          ajaxRequest.abort()

          $field.removeClass('ajax')

          }

          // AJAX

          if (

          filter

          === '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 )

          }

          }

          }

          // その他のすべてのフィルタ

          else {

          var

          valid = Utils。 isRegex( theFilter.regex ) && theFilter.regex.test( value ) ||     

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

          エラー

          = カスタムエラー || theFilter.error // regex() の呼び出し後にエラーを割り当てる

          showOrHideError( error, valid )

          if ( !valid ) { return false }

          }

          }

          } )

          }

          // フィルタがない場合はリセット

          else {

          resetError()

          }

          // フラグ

          var

          flags

          = (function(){

          var

          f

          =

          userOptions

          .flags && userOptions.flags.split(' ') || [] if ( o.globalFlags ) {

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

          }

          return 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() )

          }

          },

          _attachEvent s: function() {

          var

          self = this

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

          var $

          this = $(this)

          var $

          field = $this .parents(' .ideal-field')

          var

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

          // 変更時にトリガーする if

          タイプ=ファイル cuz カスタム ファイル

          // 元のファイル入力へのフォーカスを無効にします (

          tabIndex = -1)

          if (

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

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

          }

          if (

          e.type === 「ぼかし」 ) {

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

          }

          self._validate( $this, e )

          })

          }、

          _応答: function() {

          var

          formElements = this._getFormElements()

          var

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

          var $

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

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

          })

          var $

          customSelect

          = this.$form.find('.ideal-select')

          this.opts.sensitiveAt

          === 'auto'

          ? this.$form.toggleClass( 'スタック', this.$form.width()

          <

          maxWidth )

          : this.$form.toggleClass( 'スタック', $(ウィンドウ).width( )

          <

          this.opts.ownedAt )

          var

          isStack

          = this.$form.is('.stack')

          $empty Label.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(関数( ) {

          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() {

          return !this.getInvalid().length

          },

          isValidField: function( field ) {

          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')

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

          }

          これを返す

          },

          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 this

          },

          nextTab: function() {

          this .$tabs.nextTab()

          return this

          },

          prevTab: function() {

          this.$tabs.prevTab()

          これを返す

          },

          firstTab: function() {

          this.$tabs.firstTab()

          return this

          },

          lastTab: function() {

          this.$tabs.lastTab()

          return this

          },

          fresh: function() {

          this._getUserInputs().change().parents('.ideal -field')

          .removeClass('valid invalid')

          これを返す

          },

          freshフィールド: function( fields ) {

          fields

          = Utils .convertToArray( fields )

          $.each( fields, function( i ) {

          var $

          input

          =

          Utils.getByNameOrId( fields[ i ] )

          $input.change( ).parents('.ideal-field').removeClass('valid invalid')

          })

          これを返す

          },

          reload: function() {

          this._adjust()

          this._attachEvents()

          return this

          }、

          reset: function() {

          var

          formElements

          =

          this

          。 _getFormElements() formElements.text.val('') // テキスト入力

          formElements.radiocheck.removeAttr('checked') // ラジオ&チェック

          // 選択と カスタム選択

          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 ) {

          fields = Utils.convertToArray( fields )

          var formElements = this._getFormElements()

          $.each( fields, function( i, v ) {

          var $input = Utils.getByNameOrId( v )

          var type = Utils.getIdealType( $input )

          if ( type === 'text' | | type === 'file' ) {

          $input.val('')

          }

          if (

          type

          === 'radiocheck' ) {

          $input.removeAttr('checked') // ラジオ & チェック

          }

          if (

          type

          === select' ) {

          $input.find('オプション')。 first().prop( 'selected', true )

          $input.next('.ideal-select').trigger('reset')

          }

          $input.change()

          })

          this.freshFields( fields )

          return this

          },

          toggleFields: function( fields ) {

          fields

          =

          Utils .convertToArray( fields )

          var

          self

          =

          this

          var $

          fields

          =

          Utils.getFieldsFromArray(フィールド )

          $fields.each(function() {

          var $

          this

          = $(this)

          var

          name

          = $this.attr('name') || $this.attr('id')

          var

          input

          =

          self.opts.inputs[ name ]

          var

          filters

          =

          input && input.filters

          var

          dataFilters

          = $this.data('ideal-filters') || ''

          $this.data( 'ideal-filters', filters )

          $this.closest('.ideal-wrap').toggle()

          self.setFieldOptions( name, {フィルタ: dataFilters } )

          })

          return this

          },

          setOptions: function( options ) {

          $.extend( true, this.opt s, オプション )

          this.reload().fresh( )

          これを返す

          },

          setFieldOptions: function( name, options ) {

          $.extend( true, this.opts.inputs[ name ], options )

          this.reload().freshFields([ name ])

          return this

          },

          addFields: function( fields ) {

          フィールド

          = Utils.convertToArray(フィールド )

          var

          self

          = this

          // すべての入力の名前を配列に保存

          / / 名前を取る メソッドを使用する つまり。 fresh()

          var

          allNames

          = []

          // DOMに入力を追加

          function add( ops ) {

          var

          name

          = ops.name

           nbsp;     var

          userOptions

          = {

          filters: ops.filters || ''、

          data: ops.data || {}、

          エラー: ops.errors || {}、

          flags: ops.flags || ''

          }

          var

          label

          = ops.label || ''

          var

          type

          = ops.type

          var

          list

          = ops.list || []

          var

          placeholder

          = ops.placeholder || ''

          var

          value

          = ops.value || ''

          var $

          field

          = $('<div>'+

          '

          <

          ラベル>'+ ラベル +': label>'+

          Utils.makeInput( name, value, type, list, placeholder ) +

          'div>')

          var $input = $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')

          )

          } else if ( ops.appendToTab ) {

          $field.insertAfter(

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

          )

          } else {

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

          }

          // 現在のフィールド名 を 名前のリストに追加

          allNames.push( name )

          }

          // 各 入力を実行

          $.each( fields, function( i, ops ) { add( ops ) })

          self.reload()

          self.freshFields( allNames )

          self._sensitive()

          return this

          },

          removeFields: function( fields ) {

          fields

          =

          Utils

          .convertToArray( fields ) var $

          fields

          =

          Utils

          .getFieldsFromArray( fields ) $fields.parents('.ideal-wrap').remove()

          this.reload()

          returnこれ

          }

          })

          }( jQuery, window, document ))

          【関連する推奨事項】

          1. Html5 の無料ビデオチュートリアル

          2. HTML5 ローカルデータベースインスタンスの詳細な説明

          3.それを実現するための H5 マイクロシーン

          4.

          H5 のカスタム属性データの詳細な説明 -*

          5.

          テキスト ボックス プロンプトを実装するための H5 コード例

          以上がH5によるユーザー登録の自動認証を完了する例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

          声明：

          この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

          前の記事：h5 でテキスト ボックス プロンプトを実装するコード例次の記事：h5 でテキスト ボックス プロンプトを実装するコード例

          関連記事

          続きを見る

          • AlloyTouch 全画面スクロール プラグインは 30 秒で滑らかな H5 ページを作成します
          • HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）
          • HTML5 Canvas 9での画像描画例を詳しく解説
          • 正規表現と新しい HTML5 要素
          • NodeJS と HTML5 を組み合わせて複数のファイルをドラッグ アンド ドロップしてサーバーにアップロードする方法

          • ホームページ

          • コース

          • に質問

          • 私の

          • ホームページ
          • コース
          • 記事
          • に質問
          • 辞書
          • マニュアル
          • ダウンロード
          • 特集

          ホームページ

          記事

          に質問

          コース

          特集

          ダウンロード

          ゲーム

          辞書

          简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）