/*------------------------------------------ ----------------------------
jq-idealforms 2.1
* 著者: Cedric Ruiz
-
* ライセンス: GPL または MIT
* デモ: http://elclanrs.github.com/jq-idealforms/
*
------------- -------------------------------------------------- -----------*/
;(function ( $, window, document, unknown ) {
'use strict';
// Global Ideal Forms namespace
$.idealforms = {}
$.idealforms.filters = {}
$.idealforms.errors = { }
$.idealforms.flags = {}
$.idealforms.ajaxRequests = {}
/*--------------------------- -----------------------------------------------*/
/**
* @namespace さまざまな ユーティリティのためのチェスト
*/
var Utils = {
- /**
- * コレクション内の最も幅の広い要素の幅を取得します。
- * @memberOf Utils
- * @param {jQuery
object} $elms
- * @
returns {number}
- */
- getMaxWidth: function( $el ms ) {
- var
maxWidth = 0
$elms.- each
(function() {
var - width
= $(this).outerWidth()
if ( 幅 - >
maxWidth ) {
- maxWidth
= width
} - })
- return maxWidth
- },
- /**
- * LESS 変数を取得するハッキーな方法
- * @memberOf Utils
- * @param {string} name LESS クラスの名前。
- * @param {string} prop データが 保存される CSS プロパティ 。
- * @returns {number, string}
- */
- getLessVar: function( name, prop ) {
var value = $('<p class="' + name + '">p&gて；'）。 Hide().appendTo('body').css( prop )
$('.' + name).remove()
return ( /^d+/.test( value ) ? parseInt( value , 10 ) : 値 )
},
/**
* ES5 オブジェクトのようなkeys
*/
getKeys: function( obj ) {
-
var keys = []
for(var key in obj) {
if ( obj.hasOwnProperty( key ) ) {
keys.push( key )
}
}
リターンキー
},
// オブジェクトの長さの取得
getObjSize: function( obj ) {
var size = 0, キー;
for ( key in obj ) {
if ( obj.hasOwnProperty( key ) ) {
size++;
}
}
サイズを返す。
},
isFunction: function( obj ) {
return typeof obj === nbsp;'function'
},
isRegex: function( obj ) {
return obj instanceof RegExp
},
isString: function( obj ) {
return typeof obj === 'string'
},
-
getByNameOrId: function( str ) {
- var $
el = $('[name="'+ str +'"]').length
- ？ $('[
name="'+ str +'"]') // 名前別
- : $('#'+ str) // ID別
- return $el.length
- ? $el
- : $.error('フィールド "'+ str + '" が存在しません。')
},
getFieldsFromArray: function( fields ) {
var f = []
for ( var i = 0, l = フィールド.length; i < l; i++ ) {
f.push( Utils.getByNameOrId( fields[i] ).get(0) )
}
戻る$( f )
},
convertToArray: function( obj ) {
- return Object.prototype.toString.call( obj ) === '[object配列]'
- ? obj : [ obj ]
- },
- /**
- * 任意の Ideal Forms 要素
- * @param $input jQuery $input オブジェクト
- */
- getIdealType: function( $el ) {
- var
type = $el.attr('タイプ') || $el[0].tagName.toLowerCase()
- return (
- /(text|password|email|number|search|url|tel|textarea)/.test( type ) && 'text' | |
- /file/.test( type ) && 'file' ||
- /select/.test( type ) && 'select' ||
- /(ラジオ|チェックボックス)/.test （タイプ）&& 'RadioCheck' || |
- /hr/.test( type ) && '区切り文字' ||
- /hidden/.test( type ) && 'hidden'
- )
- }、
- /**
- * 入力を生成します
- * @param name 入力の`name` 属性
- * @param type `type` または `tagName`置く
- */
- makeInput: function( name, value, type, list, placeholder ) {
- var markup,
items
= [], item, i, len - function splitValue( str ) {
var item, value, arr
- if ( /::/.test( str ) ) {
arr = str.split('::')
item = arr[ 0 ]
値 = arr[ 1 ]
} else {
item = value = str
}
return { item: item, value: value }
}
// テキスト & ファイル
if ( /^(text|password|email|number|search|url|tel|file|hidden)$/.test(type) )
マークアップ = '+
'type="'+ type +'" '+
'id="'+ name +'" '+
'名前= "'+ 名前 +'" '+
'値="'+ 値 +'" '+
(プレースホルダー && 'プレースホルダー) =「'+ プレースホルダー +'」 ') +
'/>'
// Textarea
- if ( /textarea/.test( type ) ) {
-
マークアップ = '< textarea id="'+ name +'" name="'+ name +'" value="'+ value +'">textarea >'
- }
- // Select
- if ( /select/.test( type ) ) {
-
アイテム = []
- for (
i = 0, len = list.length; 私は レン; i++ ) {
-
item = splitValue( list[ i ] ).item
- value
= splitValue( list[ i ] ).value
-
items.push('<オプション value="'+ value +'">'+ item +'オプション& GT;」 )
}
マークアップ =
'="'+ 名前 +'"> '+
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 () { - 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)
} - idx
= Actions.getSelectedIdx(),
- 高さ
= idealSelect.items.outerHeight(),
- nItems
= idealSelect.items.length,
- allHeight
= height * nItems,
- curHeight
= height * (nItems - idx)
idealSelect.sub .scrollTop(allHeight - curHeight) -
},
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: 関数(キー) { -
- 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) { : 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()
} - アクション.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 { - }
})
},
'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
}) -
$select.keydown(function (e) { - // デフォルトのキーダウン イベント
- // 理想的な選択イベントのバグを避けるため
- if (e.that !== 9) e. plainSelect.select.on('reset', function(){
Actions.change(0)
})
idealSelect.select.trigger('menu') // デフォルトは「メニューモード」
})
- }
/* - 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 ) - onclick
', '') // iOS でのラベルのクリックを修正します
$this.css({ position: 'absolute', left: '-9999px' }) // 左にシフトして隠す - this
= $(this)
if ( $this.is('input[- type
="radio"]') {
$this.parent().siblings('label').find('.ideal-radio').removeClass('checked') -
} - multipleSupport
= typeof $('<input/>')[0].multiple !== '未定義',
- isIE
= / msie/i.test( navigator.userAgent )
$- .fn.idealFile
= function() {
return this.each(function() { )
- ファイル
= $(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> ;')
- // 左に移動して非表示にすることで、
// 引き続き イベントをトリガーできる
- $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
= $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.digits -
名前: {
-
ユーザー名: { -
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 ) { - range
= input。 userOptions.data.range,
- val
= +value
- this.error
= $.idealforms.errors.range
.replace( '{0}', range[0] ) - >
= range[0] && val <= range[ 1]
} - userFormat
=
- input
.userOptions.data && input.userOptions.data.date
? input.userOptions.data.date - delimiter
= /[^mdy]/.exec( userFormat ) [0]、
- theFormat
= userFormat.split(区切り文字),
- theDate
= value.split(区切り文字),
- isDate
= function( 日付, 形式 ) {
var m, d, y - 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', // デフォルトの形式
- // 日付入力をシミュレートする
- = {
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
- = 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('", "') )
返品有効
- 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({ $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) {
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( this, 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 ) {}
-
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) -
})
-
// 幅を調整
-
$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 ()
-
}, -
}, - class
="ideal-Heading"/>') },
separator: function() { -
$element.closest('div').addClass( 'ideal-full-width') - <div
- class
="ideal-separator"/>') }
} -
/* * 入力を検証し、エラーとアイコンを表示または非表示にします - * @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 ) { // 入力時に検証を防ぎますが、新しい文字は導入しません
// これは主に 複数の 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 = ''
// フィールドが空であり、必須ではない場合 - resetError()
return false
}
if ( theFilter ) {
// 中止して ajaxをリセットする保留中のリクエストがある場合
if (
e.type ajaxRequest.abort()
- $field.removeClass('ajax')
- }
- // AJAX
if ( - filter
=== 'ajax' ) {
nbsp; showOrHideError( error, false ) // 応答が返されるまで 無効に設定します
- 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 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') - 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('')
} - 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
// すべての入力の名前を配列に保存 - allNames
= []
// DOMに入力を追加 - name
= ops.name
nbsp; var - userOptions
= {
filters: ops.filters || ''、 - 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._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 ))
4.
5.
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
