Heim > Artikel > Web-Frontend > Detailliertes Beispiel dafür, wie H5 die automatische Überprüfung der Benutzerregistrierung durchführt
Detailliertes Beispiel dafür, wie H5 die automatische Überprüfung der Benutzerregistrierung durchführt
- Y2JOriginal
- 2017-05-24 13:27:072511Durchsuche
Html5Implementierung der BenutzerregistrierungBeispielcode für die automatische Verifizierungsfunktion
05-24 10:49:46 Autor: PHP Chinesische Website
Ich habe mir die Zeit genommen, eine HTML5-Benutzerregistrierungsdemo mit automatischer Verifizierungsfunktion zu schreiben. HandlebarsVorlagentechnologie und MobiltelefonVerifizierungscode werden zur Verifizierung verwendet.
Das Folgende ist ein Screenshot des Effekts:
1. Seitencode:userRegister.hbs
>
<html lang="en">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset =utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>用户注册title >
<div class="main" >
<div style="height：5px;text-align:center ;font-size:25px"> 欢迎您注册！div>
-
<Formular id="my-form" class="myform">
🎜>Label>用户名:
Label- >
<Eingabe id="Benutzername" Name="Benutzername" Typ ="text" /> div >
- <
div>
label
>-
<input
id - =
"pass" Name="Passwort" Typ="Text" /> div> <div>
-
<label>
邮箱: - =
"E-Mail" Name="E-Mail" . 🎜>Datenideal="required email" type="email" />
- div
>
🎜>label>电话:
label- >
<Eingabe id="Telefon" Typ="Text" Name= "phone" data-ideal="phone" /> div>
- <
>div >
label><input
id - div
- =
"vCode " type="text" name="vCode" data-ideal="vCode" /> div> <Label>真实姓名:
Label><input
id - =
"trueName" type="text" name
= "trueName" -
data-ideal="trueName" /> div> <div> <label>手机验证码:
label><input
id - =
"telCode" type="text" name
= "telCode" -
data-ideal="telCode" />
div>
< div style="margin-bottom:5px;">
-
>"button" style="margin-left:160px; margin-right:auto;" & gt; ;hr style="margin-top:5px; margin-bottom:5px;" /> ; 🎜> & lt;!- & lt; div
& gt; - Label<
- select
id="sex" name=
"sex" - >
">
男 >女Option> auswählen
>-
><div>
><input id="nickName" type="text" name="nickName" data-ideal="nickName" /> <div>
-
nbsp; <Label>年龄:
- Label
><Eingabe
id = - "Alter"
Typ="Text" name="age" data-ideal="age" /> div>-->
div>
< ;script type="text/javascript">
var options = {
onFail : function() {
alert($myform.getInvalid().length + ' ungültige Felder.')
},
Eingaben : {
'Passwort ' : {
Filter : 'erforderlicher Bestanden'
},
'Benutzername' : {
Filter : 'erforderlicher Benutzername'
},
'E-Mail' : {
Filter : 'erforderliche E-Mail-Adresse'
}, 'Telefon' : {
Filter : 'erforderliches Telefon'
},
'trueName' : {
Filter : 'erforderlich'
},
-
'vCode' : {
Filter : 'erforderlich'
},
'telCode ' : {
Filter : 'erforderlich'
}
/*
'Alter' : {
>🎜> min : 16,
- max : 70
- },
- 'Datei' : {
- Filter : 'Erweiterung',
- Daten : {
- Erweiterung : [ 'jpg' ]
- }
- },
- 'Kommentare' : {
- Filter : 'min max',
- Daten : {
- min : 50,
- }
- }, 🎜> Daten : {
- exclude : [ 'default' ] },
- Fehler
: {
exclude : '选择国籍.'
}
},
'langs[]' : {
Filter : 'min max',
Daten : {
Min.: 2,
max : 3
},
Fehler : {
min : 'Überprüfen Sie mindestens <strong>2strong> Optionen.',
max : 'Nicht mehr als <stark>3stark > Optionen allegeschuldet.'
}
}
🎜>
- }
- };
- $('#getTelCode').click(function() {
- var
Telefon = document.getElementById("telephone").value; //手机号码
- if (
telephone == null || . Telefon == ""){
- 🎜>
}
-
else { - type : "GET",
- dataType : "
json
", -
URL : " ../api
/getTelCode? telephone - ="+ telephone,
- }, alert("获取手机校验码失败！" + e);
🎜>
- });
- var $
myform
= $('#my -form').idealforms(options).data('idealforms'); - $('#submit').click(function() {
-
var Benutzername
= Dokument - .getElementById("Benutzername").value; //Benutzername
- var
Passwort = Dokument.getElementById("pass") .value; //Passwort
- var
E-Mail = Dokument .getElementById("email").value; //E-Mail-Adresse
- var
telephone = document.getElementById("telephone ").value; //Mobiltelefonnummer
- var
vCode = document.getElementById("vCode").value; // Firmen-V-Code
- var
telCode = document.getElementById("telCode").value; //Mobiltelefon-Bestätigungscode
- var
trueName = document.getElementById("trueName").value; //Echtname
- $.ajax({ GET",
. >="+ Passwort +"
E-Mail - =
"+ E-Mail + "
Telefon - =
"+ Telefon +"
vCode - =
"+ vCode +"telCode= "+ telCode +"trueName="+ trueName , j/ share/meun.jsp 🎜> // Holen Sie sich die Verzeichnis nach der Hostadresse, wie zum Beispiel: uimcardprj/share/meun.jsp 🎜> window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
// Holen Sie sich die Hostadresse, wie zum Beispiel: http://localhost:8083
-
var localhostPaht = curWwwPath.substring(0, pos): > =
pathName . - substr
ing(0, pathName.substr(1).indexOf(' /') + 1); window.location.href
= Projektname - + "/login";
🎜> }, ert( „Registrierung fehlgeschlagen!“ + e); > $('#reset').click(function() {
- $myform.reset().fresh().focusFirst();
}); 🎜>
< ;/ body
>- html
>
- 2.jq-Eingabeüberprüfung: jquery .idealforms.js
-
Die ursprüngliche Version dieser js-Verifizierung stammt von Cedric Ruiz, ich habe sie leicht modifiziert. Die Regeln für die - Teilüberprüfung lauten wie folgt: erforderlich: „Dies ist erforderlich.“
- Nummer: „Muss eine Zahl sein.“,Ziffern: 'Muss eine eindeutige Zahl sein.'
- Name: 'Muss mindestens 3 Zeichen lang sein und darf nur Buchstaben enthalten.'Benutzername: 'Benutzername muss mindestens 5 Ziffern haben lang, die maximale Länge beträgt 30 Zeichen, bitte verwenden Sie englische Buchstaben, Zahlen, chinesische Zeichen und Unterstriche. Das erste Zeichen des Benutzernamens muss Buchstaben, Zahlen, chinesische Zeichen sein, nicht alle Zahlen. Die maximale Länge chinesischer Zeichen beträgt 21 Zeichen. '
- pass: ' Das Passwort muss zwischen 6 und 15 Zeichen lang sein und mindestens eine Zahl, einen Großbuchstaben und einen Kleinbuchstaben enthalten. '
strongpass: 'muss mindestens 8 sein Zeichen lang und enthalten mindestens einen Großbuchstaben und einen Kleinbuchstaben sowie eine Zahl oder ein Sonderzeichen.'email: 'muss eine gültige E-Mail-Adresse sein (Beispiel : '">user @gmail.com)'
- phone: 'Muss eine gültige Mobiltelefonnummer sein. (Beispiel: 18723101212)< /em>'
Das Folgende ist die gesamte Codedatei: XML/HTML-Code
Kopieren Sie den Inhalt in die Zwischenablage /*------------------------------------ --------------------------------------
jq-idealforms 2.1
* Autor: Cedric Ruiz
* Lizenz: GPL oder MIT
* Demo: http://elclanrs.github.com/jq-idealforms/
*
------- -------------------------------------------------- -----------------*/
;(function ( $, window, document, undefiniert ) {
'use strict';
// Globaler Ideal Forms-Namespace
$.idealforms = {}
$.idealforms.filters = {}
$.idealforms.errors = {}
$.idealforms.flags = {}
$.idealforms. ajaxRequests = {}
-
/*--------------- ---------------------------------------------*/
/**
* @namespace Eine Truhe für verschiedene Utils
*/
var Utils = {
/**
* Ermitteln Sie die Breite des breitesten Elements in der Sammlung.
* @memberOf Utils
* @param {jQuery object} $elms
* @returns {number}
*/
getMaxWidth: function( $elms ) {
var maxWidth = 0
$elms.each(function() {
var width = $(this).outerWidth()
if ( width > maxWidth ) {
maxWidth = width
}
})
return maxWidth
},
/**
* Hacky-Methode, WENIGER Variablen zu erhalten
* @memberOf Utils
* @param {string} name Der Name der LESS-Klasse.
* @param {string} prop Die CSS-Eigenschaft, in der die Daten gespeichert werden.
* @returns {number, string}
*/
-
getLessVar: function( name, prop ) {
var value = $('<p class="' + name + '">p>').hide().appendTo('body ').css( prop )
$('.' + name).remove()
return ( /^d+/. test( Wert ) ? parseInt( Wert, 10 ) : Wert )
},
/**
* Wie ES5-Objekt.Schlüssels
*/
getKeys: function( obj ) {
var keys = []
for(var key in
}
}
Eingabetasten
},
// Länge eines Objekts abrufen
getObjSize: function( obj ) {
-
var
size = - 0
, key;
-
for ( key in Größe++;
} - }
- Rückgabegröße;
- },
- 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 +'" - ]') //nach_Name
: $('#' + str) // by id
return $el.length -
? $el
: $.error('Das Feld "'+ str + '" existiert nicht.') },
getFieldsFromArray: function( fields ) {
var f = []
for ( var i = 0, l = fields.length; i < l; i++ ) {
f.push( Utils.getByNameOrId( fields [i] ).get(0) )
}
return $( f )
},
convertToArray: function( obj ) {
return Object.prototype.toString.call( obj ) === ' [object Array]'
? obj : [ obj ]
},
/**
* Bestimmen Sie den Typ eines beliebigen Idealforms-Elements
* @param $input jQuery $input-object
-
*/
getIdealType: function( $el ) {
var type = $el.attr('type') || $el[0].tagName.toLowerCase()
return (
/(text|password|email|number|search|url |tel|textarea)/.test( type ) && 'text' |
/file/.test( type ) ||
/select/.test( type ) && 'select' |
/(radio|checkbox)/.test( type ) |
/(button|submit|reset)/.test( type ) && 'button' || /hd/.test( type ) && 'heading' |
/hr/.test( type ) && 'separator' |
/hidden/.test ( type ) && 'hidden'
)
},
/**
* Erzeugt eine Eingabe
* @param name `name` Attribut der Eingabe
* @param type `type` oder `tagName` der Eingabe
*/
makeInput: function( Name, Wert, Typ, Liste, Platzhalter ) {
Var-Markup,
Elemente = [], item, i, len function splitValue( str ) {
var item, value, arr
if ( /::/.test( str ) ) {
arr = str.split('::')
item = arr[ 0 ]
value = arr[ 1 ]
} else {
item = value = str
}
return { item: item, value: value }
}
// Text & Datei
if ( /^(text|password|email|number|search|url|tel|file|hidden)$/.test(type) )
markup = '
'type= "'+ type +'" '+
'id="'+ name +'" '+
'name="'+ name +'" '+
' value="'+ value +'" '+
(placeholder && 'placeholder="'+ Platzhalter +'"') +
'/>'
// Textarea
if ( /textarea/.test( type ) ) {
markup = '
}
// Select
if ( /select/.test( type ) ) {
items = []
for ( i = 0, len = list.length; i < len; i++ ) {
item = splitValue( list[ i ] ).item
value = splitValue( list[ i ] ).value
items.push('<option value="'+ value +'" >'+ Element +'Option>')
}
Markup =
'
items.join( '') +
'auswählen>'
}
// Radiocheck
if ( /(radio|checkbox)/.test( type ) ) {
items = []
for ( i = 0, len = list.length; i len; i++ ) {
-
item = splitValue( list[ i ] ).item
-
value = splitValue ( list[ i ] ).value
- items.push(
- '
<label>'+
- '
<Eingabe Typ="'+ type +'" name="'+ name +'" value="'+ value +'" />'+
- item +
- '
Label>'
- )
- }
-
markup = items.join('')
- }
- return markup
- }
- }
- /**
- * Benutzerdefinierte Registerkarten für Ideale Formulare
- */
- $
.fn.idealTabs = function (container) {
- var
- // Elemente
$Inhalt = dieser,
$ContainerContainer = container,
$wrapper = $('<ul class="ideal-tabs-wrap"/>'),
$tabs = ( function () {
var tabs = []
$contents.each(function () {
var name = $(this).attr('name')
var html =
'
'<span>' + name + 'span>'+
'<i class="ideal-tabs-tab-counter ideal-tabs-tab-counter-zero">0i> '+
'li>'
tabs.push(html)
})
return $(tabs.join(''))
}()),
Actions = {
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()
}
},
/**
* Öffentliche Methoden
*/
Methoden = {
/**
* 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()
},
nächstesTab: Funktion () {
var idx = Actions.getCurIdx() + 1
idx > $tabs.length - 1
? Methods.firstTab()
: Methods.switchTab(idx)
},
prevTab: 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('ideal-tabs-tab-counter-zero')
if (!text) {
$counter.addClass('ideal-tabs-tab-counter-zero')
}
$counter.html(text)
}
}
// Anhängen Methoden
for (var m in Methoden)
$contents[m] = Methoden[m]
// Init
$tabs.first()
.addClass('ideal-tabs-tab-active')
.end()
.click(function () {
-
var name = $(this).text()
🎜> $wrapper.append($tabs).appendTo($container)
$contents.addClass('ideal-tabs-content')
$contents.each(function () {
-
var $
this = $(this), - name
= $(this).attr('name')
$this.data('ideal-tabs-content-name', name)
.removeAttr('name') })
$contents.hide().first( ).show() // Neu starten
return $contents
}
/ **
-
* Ein benutzerdefiniertes
< - wählen> Menü-jQuery-Plugin
- * @example `$('select').idealSelect()`
-
*/ $
.fn.idealSelect = - function
() {
-
return this.each(function () {
-
var $
select = $(this) , - $
- options
&nbnbsp;= $select.find('option')
/**
* Markup generieren und Elemente der benutzerdefinierten Auswahl zurückgeben * @memberOf $.fn.toCustomSelect
-
* @returns {object} Alle Elemente des neuen select-Ersatzes
*/
-
var
idealSelect = (function () { - var
- $
- wrap
= $('<
ul - class
=
"ideal-select '+ $select .attr('name') +'" - />
'), $menu = $( '<
li - >
<
span - class
="ideal-select-title">' + $options.filter(':selected ').text() + 'span
> - li
- >
' ), Elemente = (function () {
var - items
= []
$options.each(function ( ) {
var $this = $(this)
items.push('<li class="ideal-select-item">' + $this.text() + 'li>')
})
Artikel zurückgeben
}())
$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 Methoden der benutzerdefinierten Auswahl
* @memberOf $.fn.toCustomSelect
*/
var Aktionen = {
getSelectedIdx: function () {
return idealSelect.items
.filter('.ideal-select-item-selected').index()
},
/**
* @private
*/
init: (function () {
-
$ select.css ({
-
Position : 'Absolute',
-
links: '-999px'
})
idealSelect.sub.hide()
idealSelect.select.insertAfter($ select)
idealSelect.select.css(
'min-width',
Utils.getMaxWidth(idealSelect.items)
)
idealSelect.items
.eq($options.filter(':selected').index())
.addClass('ideal-select-item-selected ')
}()),
noWindowScroll: function (e) {
-
if (e.which === 40 || e.which === 38 || e.which === 13) {
-
e.preventDefault ()
-
}
-
},
-
// Fokusverlust beim Scrollen
behoben //
-
setTimeout(function () {
$select.trigger('focus')
}, 1)
},
focus: function () {
idealSelect.select.addClass('ideal-select-focus')
-
$(document).on('keydown.noscroll', Actions.noWindowScroll)
},
blur: 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 (),
-
MenüHeight = idealSelect.sub.outerHeight(),
isInView = (function () {
-
// Relative Position zum Untermenü
-
var elpos = $ selected.position (). Top+itemHeight
-
return dir === 'down'
? elPos <= menuHeight
: elPos > 0
}())
if ( !isInView) {
itemHeight = (dir === 'down')
? itemHeight // nach unten gehen
: -itemHeight // nach oben gehen
idealSelect.sub
.scrollTop(idealSelect.sub.scrollTop() + itemHeight)
}
},
-
scrollToItem: function () {
var idx = Actions.getSelectedIdx(),
height = idealSelect.items.outerHeight(),
nItems = idealWählen .items.length,
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())
-
Aktionen.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-selected')
- },
- change: function (idx) {
var text = idealSelect.items.eq(idx).text()
Aktionen. select(idx)
idealSelect.title.text(text)
$options.eq(idx).prop('selected', true)
$select.trigger('change')
},
keydown : Funktion (Taste) {
var
idx = Aktionen.getSelectedIdx() ,
isMenu = idealSelect.select.is('.ideal-select-menu'),
isOpen = idealSelect.select.is('.ideal-select-open')
/**
* @namespace Taste gedrückt
*/
var keys = {
-
9: function () { // TAB .
if (isMenu) {
Actions.blur() Actions.hideMenu()
}
},
13: function () { // ENTER
if (isMenu)
isOpen
Actions.hideMenu()
: Actions.showMenu()
Actions.change(idx)
-
},
27: function () { / ESC .
- if (isMenu) Actions.hideMen u()
- },
- 40: function () { / DOWN .
-
<
$options.length - 1) { isOpen
- ? Actions.select(idx + 1)
: Actions.change(idx + 1)
}
Actions.scrollIntoView('down' )
- >
wenn ( idx
> 0) { - isOpen
? Actions.select(idx - 1)
: Actions.change(idx - 1)
}
Actions.scrollIntoView('up')
},
'default': function { // Buchstabe
var
-
Buchstabe = - String
.fromCharCode(key),
$matches = idealSelect.items
-
.filter(function () { return /^w+$/i.test( letter ) && // Modifizierertasten nicht zulassen (Strg, cmd, meta,
super ... ) -
nmatches = $ übereinstimmt. 🎜>.select.data('counter') + 1 || 0,
-
curKey = - idealSelect
.select.data('key') || Schlüssel,
// Keine Übereinstimmungen
return false -
// Bei mehr Übereinstimmungen mit demselben Buchstaben 🎜> if (curKey
=== key) { if(counter < nMatches) {
idealSelect.select.data('counter ' , Zähler)
}
else {
idealSelect.select.data('counter ', 0)
- // Wenn neuer Buchstabe
- &nnbsp;idealSelect.select.data('counter', 0)
- newIdx
= $matches.eq(0).index()
}
if (isOpen) - Aktionen.select (newIdx)
- else
- Actions.change(newIdx)
- idealSelect .select.data('key', key )
- Actions.scrollToItem()
- Actions.focusHack()
- }
- }
- keys[key]
- ? keys[key]()
- : keys['default']()
- }
- }
- /**
- * @namespace Hält alle Ereignisse der benutzerdefinierten Auswahl für "Menümodus" und "Listenmodus"
- * @memberOf $.fn. toCustomSelect
- */
- var Ereignisse
- = {
- focus: Actions.focus,
'blur.menu': function () {
- Actions.blur ()
- Actions.hideMenu()
- },
- 'blur.list' : function () {
Actions.blur()
},
keydown: Funktion (e) {
Actions.keydown(e.which)
},
'clickItem.menu': function () {
Actions.change($(this).index())
Actions.hideMenu()
},
'clickItem.list': function () {
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()
}
}
// Ereignisse zurücksetzen
var disableEvents = Funktion () {
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')
}
// Menümodus
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'])
-
})
// Listenmodus
idealSelect.select.on('list', function () {
disableEvents()
idealSelect.select.addClass('ideal-select-list')
Actions.showMenu()
$select.on({
'blur.list': events['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) {
// Standardmäßiges Keydown-Ereignis verhindern
// um Fehler mit „Ideal Select events“ zu vermeiden.
if (e.which !== 9) e.preventDefault()
})
// Zurücksetzen
idealSelect.select.on('reset', function(){
Actions.change(0)
})
idealSelect.select.trigger('menu') // Standardmäßig auf "Menümodus"
})
}
/*
* idealRadioCheck: jQuery plguin für Kontrollkästchen und Radioersatz >=
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', '') // Fix Klick-Label in iOS
$this.css({ position: 'absolute', left: '-9999px' }) // ausblenden durch Verschieben left
// Events
$this.on({
change: 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('focus') },
click: function() { $ (this).trigger('focus') }
})
})
}
;(function( $ ) {
// Browser unterstützt HTML5 mehrere Dateien?
var multipleSupport = typeof $('<input/ >')[0].multiple !== 'undefiniert',
isIE = /msie/i.test( navigator.userAgent )
$.fn.idealFile = function() {
return this.each (function() {
-
var $file = $(this).addClass('ideal-file'), // die ursprüngliche Dateieingabe
-
// Label, das für den IE-Hack verwendet wird >
div - class
="ideal-file-wrap">'),
$input = $('<input type="text" class="ideal-file-filename" />'),
// Schaltfläche, die in Nicht-IE-Browsern verwendet wird
$button = $('<button type="button" class="ideal-file-upload">Öffnen< ;/Button>'),
// Hack für IE
$label = $('<label class="ideal-file-upload" for="'+ $file[0].id +'">Openlabel>> Triggerereignisse
$file.css({ - Position: 'absolute',
- left: '-9999px'
- })
- $wrap.append( $input, ( isIE ? $label : $button ) ) .insertAfter( $file )
- // Fokus verhindern
- $file.attr('tabIndex', -1)
- $button.attr('tabIndex', -1)
- $button.click(function () {
- $file.focus().click() // Dialog öffnen
- })
- $file.change(function( ). 🎜 >extract
- // alle Dateinamen aus dem Dateiarray
- if ( multipleSupport ) {
-
fileArr = $file[0].files
- for ( var
i = 0
, len - =
fileArr
.length; i < -
len
; i++ ) { files.push( fileArr[i].name )
}
Dateiname =" > & = $file. val().split('\').pop()
} - $input.val( filename ) // Legen die value
- .attr( 'title', filename ) / Dateiname in Titelzeile anzeigen
- })
$input.on({
focus: function () { $file.trigger('change') },
blur: function () { $file.trigger('blur') },
keydown: function( e ) {
if (
e.which === 13 ) { // Enter - if ( !isIE ) { $file.trigger('click') }
- } else if (
- e.which
=== 8 ||
e.which === 46 ) { // Rücktaste & Entf - // In einigen Browsern ist der Wert schreibgeschützt
// mit diesem Trick entfernen wir die alte Eingabe und fügen hinzu 🎜>
$file.replaceWith( $- file
= $file.val('').clone( true ) )
$file.trigger('change' ) $input.val('')
} else if (
e.which === 9 ). 🎜> Rückgabe falsch -
-
-
})
})
}
}(jQuery))
-
/**
* @namespace Errors
* @locale en
*/
$.idealforms.errors = {
erforderlich: „Dies ist erforderlich.“,
Zahl: „Muss eine Zahl sein.“,
Ziffern: „Muss eine eindeutige Zahl sein.“ ,
Name: 'Muss mindestens 3 Zeichen lang sein und darf nur Buchstaben enthalten.',
Benutzername: ' Die Mindestlänge von Der Benutzername ist 5 Zeichen lang und die maximale Länge beträgt 30 Zeichen. Das erste Zeichen des Benutzernamens muss aus Buchstaben, Zahlen und chinesischen Zeichen bestehen. Die maximale Länge beträgt Das chinesische Schriftzeichen besteht aus 21 Zeichen.‘,
Pass: „Das Passwort muss zwischen 6 und 15 Ziffern sein und mindestens eine Zahl, einen Großbuchstaben und einen Kleinbuchstaben enthalten.“,
Strongpass: „Muss mindestens 8 Zeichen lang sein und mindestens einen Großbuchstaben und einen Kleinbuchstaben sowie eine Zahl oder ein Sonderzeichen enthalten.“,
-
E-Mail: „Muss eine gültige E-Mail-Adresse sein. /em>', phone: 'Muss eine gültige Mobiltelefonnummer sein <em
> - (Beispiel: 18723101212)
em>', > zip: 'Muss eine gültige US-Postleitzahl sein ;/em>',
- url: ' Muss eine gültige URL sein.
<em>(z. B. www.google.com)em >',
- minChar: 'Muss mindestens /
stark sein> Zeichen lang.', minOption: 'Überprüfen Sie mindestens < stark
> {0} - strong> Optionen.', maxChar: 'Nicht mehr als < ;strong> {0}
- strong> Zeichen lang.' , maxOption: 'Nicht mehr als <strong> {0}
- < /
strong> Optionen zulässig.', Bereich: 'Muss eine Zahl zwischen sein {0} und {1}.',
Datum: 'Muss ein gültiges Datum sein 🎜>< em> (z. B. {0})em>',
dob: 'Es muss sich um ein gültiges Geburtsdatum handeln.',
exclude: '"{0}" ist nicht verfügbar.',
excludeOption: '{0}',
equalto: 'Muss derselbe Wert sein wie < stark>"{0}"stark>',
Erweiterung: 'Datei(en) müssen eine gültige Erweiterung haben. <em>(z. B. "{0}")em >',
ajaxSuccess: '<strong>{0}strong> ist nicht verfügbar.',
ajaxError: 'Serverfehler...'
}
/**
* Alle Standardfilter abrufen
* @returns object
*/
var getFilters = function() {
var filters = {
erforderlich: {
Regex: /.+/,
Fehler: $.idealforms.errors.required
},
Zahl: {
regex: function( i, v ) { return !isNaN(v) },
Fehler: $.idealforms.errors.number
},
Ziffern: {
regex: /^d+$/,
error: $.idealforms.errors.digits
},
Name: {
regex: /^[A-Za-z]{3,}$/,
Fehler: $.idealforms.errors.name
},
Benutzername: {
regex: /^[a-z](?=[w.]{4,30}$)w*.?w*$/i,
-
error: $.idealforms.errors.username
},
pass: {
-
regex: /(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
Fehler: $.idealforms.errors.pass
},
strongpass: {
Regex: /(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(? =.*[a-z]).*$/,
error: $.idealforms.errors.strongpass
-
},
E-Mail: {
regex: /^([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})?$/,
error: $.idealforms.errors.email
},
Telefon: {
//regex: /^((13[0-9])|(15[0-9])|(17[0-9 ])|(18[0-9]))\d{8}$/,
regex: /^(0|86|17951)?(13[0-9 ]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
Fehler: $ .idealforms.errors.phone
},
zip: {
regex: / ^d{5}$|^d{5}-d{4}$/,
error: $.idealforms.errors.zip
-
},
url: {
regex: /^(?:(ftp|http|https)://) ?(?:[w-]+.)+[a-z]{2,6}([:/?#].*)?$/i,
error: $ .idealforms.errors.url
},
min: {
-
regex: Funktion ( Eingabe, >
min = - input
.userOptions.data.min,
isRadioCheck = $input.is('[ - type
="checkbox"], [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 )
Rückgabewert. Länge - >
= min
}
}, max: {
regex: function( input, value) {
-
var $
input - input
= input.input,
-
- = $input.is('[
type="checkbox"], [type
= " radio" - ]')
if ( isRadioCheck ) {
this.error = $.idealforms.errors.maxOption.replace( '{0} ', max )
return $input.filter(':checked').length <= max
}
this.error = $.idealforms.errors.maxChar.replace( '{0}', max )
return value.length <= max
}
},
range: {
regex: 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]
}
},
Datum: {
regex: function( input, value) {
var
userFormat =
input.userOptions.data && input.userOptions.data.date
? input.userOptions.data.date
: 'MM/TT/JJJJ', // Standardformat
Trennzeichen = /[^mdy]/.exec( userFormat )[0],
theFormat = userFormat.split(delimiter),
theDate = value.split(delimiter),
isDate = Funktion( Datum, Format ) {
var m, d, y
für ( var i = 0, len = format.length; i < len; i++ ) {
if ( /m/.test( format[i]) ) m = Datum[i]
-
if ( /d/.test( format[i]) ) d = Datum[i]
if ( / y/.test( format[i]) ) y = Datum[i]
}
return (
m > 0 && m < 13 &&
y && y.length === 4 &&
d > 0 && d <= ( new Date( 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/tt/jjjj', // Standardformat
// Simulieren eine Datumseingabe
- dateInput
= {
input: input.input,
userOptions: {
data: { date: userFormat }
}
- // Verwenden Sie den internen Datumsfilter, um das Datum zu validieren 🎜>filters
- .date.regex( dateInput, value ),
// DOB
theYear = /d{4}/.exec( value ),
maxYear = new Date().getFullYear(), // Current Jahr
minYear = maxYear - 100
this.error = $.idealforms.errors.dob
return isDate && theYear >= minYear && theYear <= maxYear
}
},
exclude: {
regex: function( input, value ) {
var $ inputinput = input.input,
exclude = input.userOptions.data.exclude,
type="radio"], select') this.error = isOption
? $.idealforms.errors.excludeOption.replace( '{0}', value )
: this.error- = $.idealforms.errors.exclude.replace ( '{0}', value )
- return $.inArray( value, exclude ) === -1
}
- },
- equalto: {
- regex: function( input, value) {
- var $ equals
- = $( input.userOptions.data.equalto ),
- $
inputinput
= input.input, name = $equals.attr('name') || $equals.attr('id'),
-
isValid = $equals.parents('.ideal-field')
- .filter(function(){ return $(this).data('ideal-isvalid') === true })
.length
- if ( !isValid ) { return false }
this.error = $.idealforms.errors.equalto.replace( '{0}', name )
return $input.val() === $equals.val()
}
},
Erweiterung: {
regex: function( input, value ) {
nbsp;var Dateien = input.input[0].files || [{ name: value }],
> re = new
RegExp( '\.'+ extensions.join('|') +'$', 'i' ),-
gültig = falsch
für ( var i = 0
, len- =
files.length; i < len; i++ ) { valid = re
.test( files[i].name ); }
this.error- = $.idealforms.errors.extension.replace( '{0}' , extensions.join('", "') )
- return valid
}
- },
- ajax: {
- regex: function( input, value, showOrHideError ) {
var self- =
this
var $inputinput
= input. inputvar userOptions = input
.userOptionsvar Name = $input.attr('name')
- var $
field = $input.parents('.ideal-field')
- var
valid = false
var customErrors = userOptions
.errors && userOptions.errors.ajaxself.error = {}
-
self. error.success = customErrors
&& customErrors.success ? customErrors.success
: $.idealforms.errors.ajaxSuccess.replace( '{0}', value )
self .error.fail = customErrors && customErrors.error
? customErrors.error
: $.idealforms.errors.ajaxError
// Eingabename als $_POST[Name] senden
var data = {}
data[ name ] = $.trim( value )
// Vom Benutzer definierte Ajax-Optionen
var userAjaxOps = input.userOptions.data .ajax
-
var ajaxOps = {
-
Typ: 'post',
dataType: 'json',
data: data,
success: function( bzw. {
console.log(resp)
showOrHideError( self.error.success, true )
$input.data({
'ideal-ajax-resp': resp,
': selbst .error.success
})
$input.trigger('change') // zum Zähler aktualisieren
$field.removeClass('ajax')
// Benutzerdefinierten Erfolgsrückruf ausführen
if( userAjaxOps._success ) {
userAjaxOps._success( resp, text, xhr )
}
} ,
-
Fehler: Funktion (xhr, text, error) {
-
if (text! == 'abort') {
showOrHideError( self.error.fail, false )
$input.data( 'ideal-ajax-error', self.error.fail )
$field.removeClass('ajax')
// Benutzerdefinierten Fehlerrückruf ausführen
if ( userAjaxOps._error ) {
userAjaxOps. _error( xhr, text, error )
}
}
- }
- }
- $.extend( ajaxOps, userAjaxOps )
- // Init .
- $input.removeData('ideal-ajax-error')
- $input.removeData('ideal-ajax-resp')
- $field.addClass('ajax')
- // Anfrage ausführen und speichern, um sie abbrechen zu können
- # }
- }
- }
- Rückgabefilter
- }
- $
.idealforms.flags
= { - noerror: function (i) {
i.parent().siblings('.ideal-error').hide()
- },
- noicons: function (i) {
- i.siblings('.ideal-icon-valid, .ideal-icon-invalid').hide()
- },
- novalidicon: function (i) {
- i.siblings('.ideal -icon-valid').hide()
- },
- noinvalidicon: function (i) {
- i.siblings('.ideal-icon-invalid').hide()
- },
- noclass: Funktion (i) {
- i.parents('.ideal-field').removeClass('valid invalid')
- },
- novalidclass: function (i) {
- i.parents('.ideal-field').removeClass('valid')
- },
- noinvalidclass: function (i) {
- i.parents('. ideal-field').removeClass('invalid')
- }
- }
- /*
- * Ideales Formular-Plugin
- */
var _defaults = {
Eingaben: {},
customFilters: {},
customFlags: {},
globalFlags: '',
onSuccess : function(e) { alert('Thank you...') },
onFail: function() { alert('Invalid!') },
responsiveAt: 'auto',
disableCustom: ''
}
// Konstruktor
var IdealForms = Funktion( Element, Optionen ) {
-
var self = this
self.$form = $( element )
self.opts = $.extend( {}, _defaults, options )
self.$tabs = self.$form.find('section')
// Lokalisierte Filter festlegen
$. extension( $.idealforms.filters, getFilters() )
self._init()
}
// Plugin
$.fn.idealforms = Funktion( Optionen ) {
return this.each(function() {
if ( !$.data( this, 'idealforms' ) ) {
$.data( this, 'idealforms', new IdealForms( this, options ) )
}
})
}
// WENIGER Variablen abrufen
var LessVars = {
fieldWidth: Utils.getLessVar( 'ideal-field-width', 'width' )
}
/*
* Private Methoden
*/
$.extend ( IdealForms.prototype, {
_init: function() {
var self = this
var o = self.opts
var formElements = self._getFormElements()
self.$form.css( 'visibility', 'visible' )
.addClass('ideal-form')
.attr( 'novalidate', 'novalidate' ) // HTML5-Validierung deaktivieren
// Markieren
formElements.inputs
.add( formElements.headings )
.add( formElements.separators )
.each(function(){ self._doMarkup( $(this) ) })
// Registerkarten generieren
if ( self.$tabs.length ) {
var $tabContainer = $('<div class="ideal-wrap ideal-tabs ideal-full-width"/>')
self.$form.prepend( $tabContainer )
self.$tabs.idealTabs( $tabContainer )
}
// Datumsauswahl immer unter der Eingabe anzeigen
if ( jQuery.ui ) {
$.datepicker._checkOffset = function( a,b,c ) { return b }
}
form.find('[data-ideal]').each(function() { - var
- userInput
=
o .inputs[ this.name ] - o.inputs[ this.name ] = userInput || { filters: $(this).data('ideal') }
})
// Responsive - if ( o.responsiveAt ) {
- $(window).resize(function(){ self._responsive() })
- self._responsive()
- }
- // Form events
- self.$form.on({
- keydown : function( e ) {
- / Senden beim Drücken der Eingabetaste verhindern
- // Textbereiche ausschließen .
- if (
- e.which
=== 13 && e.target.nodeName !== 'TEXTAREA' ) {
e.preventDefault()
}
}, - submit: function( e ) {
-
-
-
- self.focusFirstInvalid()
- } else {
- o .onSuccess( e )
- }
}
})
self._adjust()
-
self._attachEvents()
self.fresh() / Neu starten
},
_getFormElements: function() {
return {
inputs: this.$form.find('input, select , textarea, :button'),
labels: this.$form.find('div > label:first-child '),
text: this.$form.find('input:not([type="checkbox"], [ type="radio"], [type="submit"]), textarea'),
select: this.$form.find('select'),
radiocheck: this.$form.find('input[type="radio"], input[type="checkbox"]'),
Schaltflächen: this.$form.find(':button'),
Datei: this.$form.find('input[type="Datei "]'),
Überschriften: this.$form.find('h1, h2, h3, h4, h5, h6'),
Trennzeichen: 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 self = this
var isNumber = !isNaN( nameOrIdx )
if ( isNumber ) {
return self.$tabs.eq( nameOrIdx )
}
return self.$tabs.filter(function() {
var re = new RegExp( nameOrIdx, 'i' )
return re.test( nbsp;$(this).data('ideal- 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 invalid = self.getInvalidInTab( i ) .length
self.$tabs.updateCounter( i, invalid )
})
},
_adjust: function() {
var self = this
var o = self.opts
var formElements = self._getFormElements()
var curTab = self._getCurrentTabIdx()
// Autocomplete verursacht einige Probleme...
formElements.inputs.attr('autocomplete', 'off')
🎜> // Beschriftungen anpassen
-
var
labels = - formElements
.labels
Beschriftungen. removeAttr('style').width( Utils.getMaxWidth( labels) ) // Überschriften und Trennzeichen anpassen
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()
// Berechnung, Tabs ausblenden abgeschlossen
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 Daten = userInput && userInput.data && userInput.data.date
var Format = Daten ? data.replace( 'yyyy', 'yy' ) : 'mm/dd/yy'
$(this).datepicker({
dateFormat: format,
vorAnzeigen: Funktion( Eingabe) {
$( input ).addClass ('open')
},
onChangeMonthYear: function() {
-
// Hack zur Behebung von IE9 nicht die Größe
-
var $ this = $ (this)
-
🎜> var
w = $ this.outerwidth () // - cache
zuerst! 🎜>
$this.datepicker('widget').css( 'width', w ) - }, 1)
- },
- onClose: function() { $(this).removeClass('open') }
- })
- })
- // Breite anpassen
- $datepicker.on('focus keyup ', function() {
-
var t = $(this), w =
t .outerWidth( ) - t.datepicker('widget').css( 'width', w )
- })
- }
- },
- _doMarkup: function( $element ) {
-
var o =
this .opts -
var elementType =
Utils .getIdealType( $element ) - // Validierungselemente
var $field = $('<span class="ideal -field"/>')
var $error = $('< span class="ideal-error" />')
var $valid = $('<i class="ideal-icon ideal-icon-valid" />')
var $invalid = $('<i class="ideal-icon ideal-icon-invalid"/>')
. click(function(){
$(this).parent().find('input:first, textarea, select').focus()
})
// Grundlegendes Markup
$element.closest('div').addClass('ideal- wrap')
.children('label:first-child').addClass('ideal-label')
var idealElements = {
_defaultInput: function() {
$element.wrapAll( $field ).after( $valid , $invalid )
.parent().after( $error )
},
- // Radios und Schecks mehr als einmal verpacken.
- 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()
}
},
Taste: function() {
if ( !/button/.test( o.disableCustom ) ) {
$element.addClass('ideal-button')
}
},
hidden: function() {
$element.closest('div').addClass('ideal-hidden')
},
heading: function() {
$element.closest('div').addClass('ideal-full-width')
$element.parent( ).children().wrapAll('<span class="ideal-heading"/>')
},
Trennzeichen: function() {
.closest('div').addClass('ideal-full-width')
$element.wrapAll('<div class="ideal-separator"/>')
}
}
// Markup für den aktuellen Elementtyp generieren idealElements[ elementType ]() : $.noop()
$error.add( $valid ).add( $invalid ).hide() // Neu starten
},
/** Validiert eine Eingabe und zeigt oder versteckt Fehler und Symbol
* @memberOf Actions
* @param {object} $input jQuery-Objekt
* @param {string} e Das JavaScript-Ereignis
*/
_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[ name ]
var isRadioCheck = $input.is('[type="checkbox "], [type="radio"]')
var inputData = {
-
// If is radio oder self.$form.find('[
name = - "' + name + '"
]') : $input, userOptions : userOptions
}
// Validierungselemente
-
var $
Feld = $input.parents('.ideal-field') -
var $
error = $field.siblings('.ideal-error') -
var $
ungültig = - isRadioCheck
? $input.parent().siblings('.ideal-icon-invalid')
: $input.siblings('.ideal-icon-invalid')
-
var $
gültig = - isRadioCheck
? $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()
}
Funktion showOrHideError ( Fehler, gültig ) {
resetError()
gültig ? $valid.show() : $invalid.show()
$field.addClass( valid ? 'valid' : 'invalid' )
$field.data( 'ideal-isvalid', valid )
if ( !valid ) {
$error.html( Fehler ).toggle( $field.is('.ideal-field-focus') )
}
}
-
// Verhindern Sie die Validierung beim Eingeben, jedoch nicht neuer Zeichen
-
// Dies wird hauptsächlich dazu dient, mehrere AJAX -Anforderungen zu verhindern
var oldValue = $input.data('ideal-value') || 0
$input.data( 'ideal-value', value )
if ( e.type = == 'keyup' && value === oldValue ) { return false }
// Validieren
if ( userFilters ) {
$.each( userFilters, function( i, filter ) {
var theFilter = $.idealforms.filters[ filter ]
var customError = userOptions.errors && userOptions.errors[ filter ]
var Fehler = ''
// Wenn das Feld leer und nicht erforderlich ist
if ( !value && filter !== ‘required’ ) return false
}
if ( theFilter ) {
// Ajax abbrechen falls es vorhanden ist eine ausstehende Anfrage Anfrage. abort()
$field.removeClass('ajax')
}
/ / AJAX
if ( - filter
=== 'ajax' ) {
nbsp; showOrHideError( error, false) // auf ungültig setzen, bis die Antwort zurückkommt
$error.hide()
-
if (
z.B .Type === 'KeyUp') { -
theFilter.regex (inputData, Wert, ShoworhideError) // Fährt den AJAX -Rückruf
- aus.
} else {
-
var
ajaxError = $input.data('ideal-ajax-error') if ( ajaxError ) {
-
showOrHideError( ajaxError, $input.data('ideal-ajax-resp') || fal se )
}
}
- }
- // Alle anderen Filter derFilter. regex ) && theFilter.regex.test( value ) ||
- >Fehler
=
customError || theFilter.error // Assign-Fehler nach dem Aufruf von „regex()“ { return false } }
} - })
}
// Zurücksetzen, wenn keine Filter vorhanden sind - else {
- resetError()
- }
- // Flags
- 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 ) }
})
}
-
// Aktualisierungszähler
if ( self.$tabs.length ) {
self._updateTabsCounter( self._getCurrentTabIdx() )
}
},
_attachEvents: function() {
var self = this
self._getUserInputs().on('keyup change focus blur', function(e) {
var $this = $(this)
var $field = $this.parents('.ideal-field')
var isFile = $this.is('input[type=file]')
// Trigger on change if Typ=Datei cuz benutzerdefinierte Datei
// deaktiviert den Fokus auf die Eingabe der ursprünglichen Datei (tabIndex = -1)
if ( e.type === 'focus' || isFile && e.type === 'change' ) {
$field.addClass('ideal-field-focus')
}
if ( e.type === 'blur' ) {
$field.removeClass('ideal-field-focus')
}
self._validate( $this, e )
})
-
},
_responsive: function() {
var formElements = this._getFormElements()
var maxWidth = LessVars.fieldWidth + formElements.labels.outerWidth()
var $emptyLabel = formElements.labels.filter(function() {
return $(this).html () === ' '
})
var $customSelect = dies .$form.find('.ideal-select')
this.opts.responsiveAt === 'auto'
? this.$form.toggleClass( 'stack', this.$form.width() < maxWidth )
: this. $form.toggleClass( 'stack', $(window).width() < this.opts.responsiveAt )
var isStack = this.$form.is('.stack')
$emptyLabel.toggle( !isStack )
$customSelect.trigger( isStack ? 'list' : 'menu' )
// DatePicker ausblenden
var $datePicker = this.$form.find('input.hasDatepicker')
if ( $datePicker.length ) { $datePicker.datepicker('hide') }
}
})
/*
* Öffentliche Methoden
*/
$.extend( IdealForms.prototype , {
getInvalid: function() {
return this.$form.find('.ideal-field').filter( function() {
return $(this).data('ideal-isvalid') === false
})
},
getInvalidInTab: function( nameOrIdx ) {
return this._getTab( nameOrIdx ) .find('.ideal-field').filter(function() {
-
return $(this).data('ideal-isvalid') === false
})
},
isValid: function() {
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()
}
return this
},
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()
dieses zurückgeben
},
switchTab: function( nameOrIdx ) {
this.$tabs.switchTab( nameOrIdx )
return this
},
nextTab: function() {
this.$tabs. nextTab()
return this
},
prevTab: function() {
this.$tabs.prevTab()
return this
-
},
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')
dieses zurückgeben
},
freshFields: function( fields ) {
fields = Utils.convertToArray( fields )
$.each( fields, function( i ) {
var $input = Utils.getByNameOrId( fields[ i ] )
$ input.change().parents('.ideal-field').removeClass('valid invalid')
})
return this
},
reload: function() {
this._adjust()
this._attachEvents()
return this
},
reset: function() {
var formElements = this._getFormElements()
formElements.text.val('') // Texteingaben
-
formElements.radiocheck.removeAttr('checked') // radio & check
// Auswählen und benutzerdefinierte Auswahl
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 ( Typ === 'radiocheck' ) {
$input.removeAttr('checked') // radio & check
}
if ( type === 'select' ) {
$input.find('option'). first().prop( 'selected', true )
$input.next('.ideal-select').trigger('reset')
}
$input.change()
})
this.freshFields( Felder )
return this
},
toggleFields: function( Felder ) {
Felder = Utils.convertToArray( Felder )
var self = this
-
var $fields = Utils.getFieldsFromArray( fields )
$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, { filters: dataFilters } )
})
dieses zurückgeben
},
setOptions: function( options ) {
$.extend( true, this.opts, options )
this.reload().fresh()
$.extend( true, this.opts.inputs[ name ], options )
this.reload().freshFields([ name ])
-
dieses zurückgeben
},
addFields: function( fields ) {
-
fields = - Utils
.convertToArray( fields )
-
var
self = - this
// Speichern Sie die Namen aller Eingaben im Array
-
// um Methoden zu verwenden, die Namen annehmen, z. fresh() var
allNames = [] - // Eine Eingabe zum DOM hinzufügen
- function add( ops ) {
-
var
name = - ops
.name
-
nbsp; var
userOptions = { filters: ops.filters || '',
data: ops.data || {}, Fehler: 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>'+ label +':
label- >
'+ Utils.makeInput( name, value, type, list, placeholder ) +
'div>')
var $ input = $field.find('input, select, textarea, :button')
// Eingaben mit Filtern zur Liste hinzufügen
// von zu validierenden Benutzereingaben
if ( userOptions.filters ) { self.opts.inputs[ name ] = userOptions }
-
self._domarkup ($ input)
-
// In DOM
-
if (ops.addafter) {
- einfügen {
- $field.insertAfter(
- $( Utils.getByNameOrId( ops.addAfter ) ).parents('.ideal-wrap')
- )
- } else if ( ops.addBefore ) {
- $field.insertBefor e(
- $(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() )
- }
- // Der aktuelle Feldname in die Liste der Namen
- Allnames.push (Name)
hinzufügen
- }
- // Jede Eingabe durchlaufen
- $.each( fields, function( i, ops ) { add( ops ) })
- self.reload()
- self.freshFields( allNames )
- self._responsive()
- return this
- },
- removeFields: function( fields ) {
fields
= Utils - .convertToArray( fields )
var $fields
= Utils - .getFieldsFromArray( fields )
- $fields.parents('.ideal-wrap').remove ()
- this.reload()
- return this
- } })
}( jQuery, Fenster, Dokument ))
【Verwandte Empfehlungen】
1. Kostenloses HTML5-Video-Tutorial
2. Detaillierte Erläuterung der lokalen HTML5-Datenbankinstanz
3. Lernen Sie, wie Sie ein H5-Mikroszenario implementieren
4 . Detaillierte Erläuterung der benutzerdefinierten Attributdaten von H5-*
5 H5-Codebeispiel für die Implementierung von Textfeld-Eingabeaufforderungen
label><input
idOption> <Option Wert
="女"Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel dafür, wie H5 die automatische Überprüfung der Benutzerregistrierung durchführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen