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:072522Durchsuche

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

XML /HTML CodeInhalt in die Zwischenablage kopieren

>
<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
=
"pass" Name="Passwort" Typ="Text" /> div> <div>
<label>
邮箱:

label><input

=
"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

=
"vCode " type="text" name="vCode" data-ideal="vCode" /> div> <Label>真实姓名:
Label><input
=
"trueName" type="text" name
=
data-ideal="trueName" /> div> <div> <label>手机验证码:
label><input
=
"telCode" type="text" name
=
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
Label
>性别:Label>
<
select
id="sex" name=
"sex"
>
">
男

Option> <Option Wert

>女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
$.ajax({
type : "GET",
dataType : "
json
",
URL : " ../api
/getTelCode?
="+ telephone,
success : function(msg) {
}, alert("获取手机校验码失败！" + e);
🎜>
});
var $
myform
= $('#my -form').idealforms(options).data('idealforms');
$('#submit').click(function() {
var Benutzername
=
.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 + "
=
"+ Telefon +"
=
"+ 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
=
+ "/login";
🎜> }, ert( „Registrierung fehlgeschlagen!“ + e); > $('#reset').click(function() {
$myform.reset().fresh().focusFirst();
}); 🎜>
body
>
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 = '+ Name +'" Name="'+ Name +'" Wert="'+ Wert +'" >textarea>'

    }

    // 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 =

        '+ Name +'" name="'+ name +'">'+

          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,



isRadioCheck
= $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. 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 = 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 ) {

if (! Self.isvalid ()) {

e.preventDefault ()

o.onfail ()
          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 )
      })

      $datepicker.parent().siblings('.ideal-error').addClass('hidden')
    }
  },
  _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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Codebeispiel für die Implementierung von Textfeld-Eingabeaufforderungen in h5Nächster Artikel：Codebeispiel für die Implementierung von Textfeld-Eingabeaufforderungen in h5

In Verbindung stehende Artikel

Mehr sehen