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 までご連絡ください。

          

          ホットAIツール

          

          Undresser.AI Undress

          リアルなヌード写真を作成する AI 搭載アプリ

          

          AI Clothes Remover

          写真から衣服を削除するオンライン AI ツール。

          

          Undress AI Tool

          脱衣画像を無料で

          

          Clothoff.io

          AI衣類リムーバー

          

          AI Hentai Generator

          AIヘンタイを無料で生成します。

          もっと見る

          

          人気の記事

          R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

          2週間前 By 尊渡假赌尊渡假赌尊渡假赌

          レポ：チームメイトを復活させる方法

          4週間前 By 尊渡假赌尊渡假赌尊渡假赌

          ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

          4週間前 By 尊渡假赌尊渡假赌尊渡假赌

          スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

          3週間前 By DDD

          R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

          3週間前 By DDD

          もっと見る

          

          ホットツール

          

          メモ帳++7.3.1

          使いやすく無料のコードエディター

          

          SublimeText3 中国語版

          中国語版、とても使いやすい

          

          ゼンドスタジオ 13.0.1

          強力な PHP 統合開発環境

          

          ドリームウィーバー CS6

          ビジュアル Web 開発ツール

          

          SublimeText3 Mac版

          神レベルのコード編集ソフト（SublimeText3）

          もっと見る

          

          ホットトピック

          Gmailメールのログイン入り口はどこですか？

          7322

          9

          Java チュートリアル

          1625

          14

          CakePHP チュートリアル

          1350

          46

          Laravel チュートリアル

          1262

          25

          PHP チュートリアル

          1209

          29

          もっと見る

          Related knowledge

          HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

          HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

          HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

          これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

          HTML 左マージン Sep 04, 2024 pm 04:48 PM

          HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

          HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

          HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

          Bitget Wallet 取引所に登録できないのはなぜですか? Sep 06, 2024 pm 03:34 PM

          BitgetWallet 取引所に登録できない理由は、アカウント制限、サポートされていない地域、ネットワークの問題、システム メンテナンス、技術的障害などさまざまです。 BitgetWallet 取引所に登録するには、公式 Web サイトにアクセスして情報を入力し、規約に同意して登録を完了し、本人確認を行ってください。

          HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

          HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

          Deepseekの公式ウェブサイトの入り口と最新のプロモーションアクティビティ Feb 19, 2025 pm 05:15 PM

          Deepseekの公式Webサイトは現在、ユーザーにショッピングエクスペリエンスを提供するための複数の割引アクティビティを開始しています。新規ユーザーはサインアップして10ドルのクーポンを取得し、視聴者全員に15％の限定時間割引を享受します。友人は報酬を獲得することもできます。また、買い物時に贈り物を償還するためにポイントを蓄積することができます。イベントの締め切りは違う。

          HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

          HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

          See all articles

          

          福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

          私たちについて 免責事項 Sitemap

          © php.cn All rights reserved