Maison >interface Web >Tutoriel H5 >Exemple détaillé de H5 effectuant la vérification automatique de l'enregistrement de l'utilisateur
Exemple détaillé de H5 effectuant la vérification automatique de l'enregistrement de l'utilisateur
- Y2Joriginal
- 2017-05-24 13:27:072568parcourir
Html5ImplémentationEnregistrement de l'utilisateurExemple de code de fonction de vérification automatique
24-05 10:49:46 Auteur : site Web chinois php
J'ai pris le temps d'écrire une démo d'enregistrement d'utilisateur Html5 avec fonction de vérification automatique. Handlebarstechnologie de modèle et téléphone portablecode de vérification sont utilisés pour la vérification.
Ce qui suit est une capture d'écran de l'effet :
1. Code de la page : usersRegister.hbs
>
<html lang="fr">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset =utf-8">
<meta http-equiv="Compatible X-UA" content="IE=edge" />
<titre>用户注册titre >
<div class="main" >
<div style="hauteur：5px;text-align:center ;font-size:25px"> 欢迎您注册！div>
-
<formulaire id="my-form" class="myform">
<div>
<étiquette>用户名 :étiquette><input id="username" name="username" type ="texte" />
div >
<div>
<étiquette>密码 :étiquette><entrée id="pass" nom="mot de passe" type="texte" />
div>
<div>
<label>邮箱:étiquette><entrée id="e-mail" nom="e-mail"
idéal pour les données="exigerd email" type="email" />
div>
<div>
<étiquette>电话 :étiquette><entrée id="téléphone" type="texte" nom= "téléphone" data-ideal="téléphone" />
div>
<div >
<étiquette>供应商V码 :étiquette><entrée id="vCode " type="text" name="vCode" data-ideal="vCode" />
div>
<div>
<étiquette>真实姓名 :étiquette><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
style="marge-bas:5px;"
> -
<bouton id="getTelCode" type=
"bouton" - style
="marge-gauche:160px; marge-droite:auto;" >获取手机校验码bouton> & lt ;hr style="margin-top:5px; margin-bottom:5px;"
/> ; - & lt;
- div
& gt;
& lt; - étiquette
>性别 :étiquette
> -
<sélectionner identifiant="sexe" nom=
"sexe" - >
<option valeur="男">男
- option
> <option valeur="女">女
- option
> sélectionner>
- div
> <
- div
>
<étiquette>昵称 :étiquette ><input id="nickName" type="text" nom="nickName" data-ideal="nickName" />
div>
<div>
nbsp; <étiquette>年龄 :étiquette><entrée id="age" type="text" name="age" data-ideal="age" />
div>-->
div
> - div
-
< ;
- script
type="text/javascript">
var options = { onFail : function() { alert($myform.getInvalid().length + ' champs invalides.')
},
entrées : { - 'mot de passe ' : {
- filtres : 'passe-obligatoire'
- },
- 'nom d'utilisateur' : {
- filtres : 'nom d'utilisateur obligatoire '
- },
- 'e-mail' : {
- filtres : 'e-mail obligatoire '
- },
- 'téléphone' : {
- filtres : 'téléphone obligatoire"
- },
- 'trueName' : {
- filtres : 'obligatoires'
- },
- 'vCode' : {
- filtres : 'obligatoires'
- },
- 'telCode ' : {
- filtres : 'obligatoires'
- }
- /*
- 'âge' : {
filtres : 'required digits',
données : {
min : 16,
max : 70
}
-
},
'fichier' : {
filtres : 'extension',
-
données : {
extension : [ 'jpg' ]
}
},
'commentaires' : {
filtres : 'min max',
données : {
min : 50,
max : 200
}
},
'états' : {
filtres : 'exclure',
données : {
exclure : [ 'par défaut' ]
},
erreurs : {
exclure : '选择国籍.'
}
'langs[]' : {
filtres : 'min max',
données : {
min : 2,
max : 3
},
erreurs : {
min : 'Vérifiez au moins <fort>2fort> options.',
max : 'Pas plus que <fort>3fort > options autoriséesdues.'
}
}
*/
}
} ;
$('#getTelCode').click(function() {
var téléphone = document.getElementById("telephone").value; //手机号码
if (téléphone == null || téléphone == ""){
alerte("手 机号码不能为空!");
}
else{
$.ajax({
type : "GET",
dataType : "json",
url : " ../api/getTelCode?telephone="+ telephone,
succès : function(msg) {
},
erreur : fonction(e) {
alert("获取手机校验码失败！" + e);
🎜>
- });
- var $
monformulaire
= $('#mon -form').idealforms(options).data('idealforms'); - $('#submit').click(function() {
-
var nom d'utilisateur
= document - .getElementById("username").value; //Nom d'utilisateur
- var
mot de passe = document.getElementById("pass") .value; //Mot de passe
- var
email = document .getElementById("email").value; //Adresse email
- var
téléphone = document.getElementById("téléphone ").value; //Numéro de téléphone portable
- var
vCode = document.getElementById("vCode").value; // Code V de l'entreprise
- var
telCode = document.getElementById("telCode").value; //Code de vérification du téléphone portable
- var
trueName = document.getElementById("trueName").value; //Vrai nom
- $.ajax({ GET",
>="+ mot de passe +"
e-mail - =
"+ e-mail +. "
téléphone - =
"+ téléphone +"
vCode - =
"+ vCode +"telCode= "+ telCode +"trueName="+ trueName , SUCCÈS : Fonction (msg) { // Obtenez l'URL actuelle, par exemple : http: // localhost: 8083/uIMCARDPRJ/ share/meun.jsp 🎜> // Récupère le répertoire après le adresse de l'hôte, telle que : uimcardprj/share/meun.jsp 🎜> fenêtre.document.location.pathname
var pos = curWwwPath.indexOf(pathName);
// Récupère l'adresse de l'hôte, Par exemple:： http://localhost:8083
-
var localhostPaht = curWwwPath.substring(0, pos) ; // Obtenez le nom du projet avec "/", tel que : /uimcardprj > =
pathName . - substr
ing(0, pathName.substr(1).indexOf(' /') + 1); window.location.href
= projectName - + "/login";
🎜> }, ert( "L'enregistrement a échoué!" > $('#reset').click(function() {
- $myform.reset().fresh().focusFirst();
}); 🎜>
< ;/ corps
>- html
>
- Vérification des entrées 2.jq : jquery .idealforms.js
-
La version initiale de cette vérification js vient de Cédric Ruiz, je l'ai légèrement modifiée. - Les règles de vérification partielle sont les suivantes : obligatoire : 'Ceci est obligatoire.'
- numéro : 'Doit être un nombre.',chiffres : 'Doit être un numéro unique.'
- name: 'Doit comporter au moins 3 caractères et ne peut contenir que des lettres.'username: 'Le nom d'utilisateur doit comporter au moins 5 chiffres, La longueur maximale est de 30 caractères, veuillez utiliser des lettres anglaises, des chiffres, des caractères chinois et des traits de soulignement. Le premier caractère du nom d'utilisateur doit être composé de lettres, de chiffres, de caractères chinois, et non de chiffres. La longueur maximale des caractères chinois est de 21 caractères. 🎜> pass : 'Le mot de passe doit comporter entre 6 et 15 caractères et contenir au moins un chiffre, une lettre majuscule et une lettre minuscule. '
-
strongpass : 'Doit comporter au moins 8 caractères. et contenir au moins une lettre majuscule et une lettre minuscule et un chiffre ou un caractère spécial.'e-mail : 'doit être une adresse e-mail valide (Exemple : <.>'">user @gmail.com)'
téléphone : 'Doit être un numéro de téléphone portable valide. (Exemple : 18723101212)- Ce qui suit est l'intégralité du fichier de code :
Code XML/HTMLCopiez le contenu dans le presse-papiers
/*------------------------------------ --------------------------------------
jq-idealforms 2.1
* Auteur : Cédric Ruiz
* Licence : GPL ou MIT
* Démo : http://elclanrs.github.com/jq-idealforms/
*
------- -------------------------------------------------- -----------------*/
;(fonction ( $, fenêtre, document, undéfini ) {
'utiliser strict';
// Espace de noms Global Ideal Forms
$.idealforms = {}
$.idealforms.filters = {}
$.idealforms.errors = {}
$.idealforms.flags = {}
$.idealforms. ajaxRequests = {}
/*----------------------------- ---------------------------------------------*/
/**
* @namespace Un coffre pour divers utilitaires
*/
var Utils = {
/**
* Obtenir la largeur de l'élément le plus large de la collection.
* @memberOf Utils
* @param {jQuery object} $elms
* @retours {numéro}
*/
getMaxWidth: function( $elms ) {
var maxWidth = 0
$elms.each(function() {
var width = $(this).outerWidth()
if ( width > maxWidth ) {
> > return maxWidth
}, - /**
- * Une manière piratée d'obtenir MOINS de variables
- * @memberOf Utils
- * @param {string} name Le nom de la classe LESS .
- * @param {string} prop La propriété css où les données sont stockées.
- * @returns {number, string}
- */
- getLessVar: function( name, prop ) {
var value = $('<p class="' + nom + '">p>').hide().appendTo('body ').css( prop )
$('.' + name).remove()
return ( /^d+/. test( value ) ? parseInt( value, 10 ) : value )
- },
- /**
- * J'aime l'objet ES5.
cléss
- */
- getKeys : function( obj ) {
- var
keys = []
- for(var key in obj) {
- if ( obj.hasOwnProperty( key ) ) {
- keys.push( key )
- }
- }
- retour des clés
- },
- // Obtenir la longueur d'un objet
- getObjSize: function( obj ) {
- var
taille = 0, clé ;
- pour ( clé dans obj ) {
- if ( obj.hasOwnProperty( key ) ) {
- taille++ ;
- }
- }
- taille de retour ;
- },
- isFunction : function( obj ) {
- retour typede
obj === nbsp;'function'
- },
- isRegex: function( obj ) {
- retourner obj instance de RegExp
- },
- isString : function( obj ) {
- return typeof
obj === 'string'
- },
- getByNameOrId: function ( str ) {
- var $
el = $('[nom="'+ str +'"]').longueur
- ? $('[
nom="'+ str +'"]') // par nom
- : $('#' + str) // par id
- return $el.length
- ? $el
- : $.error('Le champ "'+ str + '" n'existe pas.')
},
getFieldsFromArray : function( fields ) {
var f = []
pour ( var i = 0, l = fields.length; i < l; i++ ) {
f.push( Utils.getByNameOrId( fields [i] ).get(0) )
}
retour $( f )
},
convertToArray: function( obj ) {
return Object.prototype.toString.call( obj ) === ' [object Array]'
? obj : [ obj ]
},
/**
* Déterminer le type de tout élément Ideal Forms
* @param $input jQuery $input object
-
*/
getIdealType : function( $el ) {
var type = $el.attr('type') || $el[0].tagName.toLowerCase()
return (
/(texte|mot de passe|email|numéro|recherche|url |tel|textarea)/.test( type ) && 'text' ||
/file/ type ) && 'file' ||
/select/.test( type ) && 'select' ||
/(radio|checkbox)/.test( type ) && 'radiocheck' ||
/(bouton|soumettre|réinitialiser)/.test( type ) && 'bouton' ||
/hd/.test( type ) && 'titre' ||
/hr/.test( type ) && 'séparateur' ||
/hidden/.test ( type ) && 'masqué'
)
},
/**
* Génère une entrée
* @param name `name` attribut de l'entrée
* @param type `type` ou `tagName` de l'entrée
*/
makeInput: function( nom, valeur, type, liste, placeholder ) {
var balisage, éléments = [], item, i, len
function splitValue( str ) {
var item, value, arr
si ( /::/.test( str ) ) {
arr = str.split('::')
item = arr[ 0 ]
valeur = arr[ 1 ]
} else {
élément = valeur = str
}
return { item: item, value: value }
}
// Texte & file
if ( /^(texte|mot de passe|email|numéro|recherche|url|tel|fichier|caché)$/.test(type) )
balisage = '
'type= "'+ type +'" '+
'id="'+ nom +'" '+
'nom="'+ nom +'" '+
' valeur="'+ value +'" '+
(placeholder && 'placeholder="'+ espace réservé +'"') +
'/>'
// Textarea
if ( /textarea/.test( type ) ) {
markup = '
}
// Sélectionner
si ( /select/.test( type ) ) {
articles = []
pour ( i = 0, len = liste.length; je < len; i++ ) {
item = splitValue( list[ i ] ).item
value = splitValue( list[ i ] ).value
items.push('<option value="'+ value +'" >'+ élément +'option>')
}
balisage =
'
items.join( '') +
'sélectionner>'
}
// Radiocheck
si ( /(radio|checkbox)/.test( type ) ) {
articles = []
pour ( i = 0, len = list.length; i < len; i++ ) {
item = splitValue( list[ i ] ).item
value = splitValue ( list[ i ] ).value
items.push(
'<label>'+
'<entrée type="'+ type +'" nom="'+ nom +'" valeur="'+ valeur +'" />'+
article +
' étiquette>'
)
}
markup = items.join('')
}
return markup
}
}
/**
* Onglets personnalisés pour Ideal Forms
*/
$.fn.idealTabs = fonction (conteneur) {
var
// Éléments
$contents = ce,
$conteneurconteneur = conteneur,
$wrapper = $('<ul class="idéal-onglets-wrap"/>'),
$onglets = ( function () {
var tabs = []
$contents.each(function () {
var nom = $(this).attr('name')
var html =
'
'<span>' + nom + 'span>'+
'<i class="idéal-onglets-onglet-counter ideal-tabs-tab-counter-zero">0i> '+
'li>'
tabs.push(html)
})
return $(tabs.join(''))
}()),
Actionss = {
getCurIdx: function () {
return $tabs
.filter('.ideal-tabs-tab-active ')
.index()
},
getTabIdxByName : fonction (nom) {
var re = nouveau RegExp(name, 'i')
var $tab = $tabs.filter(function () {
return re.test ($(this).text())
})
return $tab.index()
}
},
/**
* Méthodes publiques
*/
Méthodes = {
/**
*/
switchTab : function (nameOrIdx) {
var idx = Utils.isString(nameOrIdx)
-
? ACTIONS.GETTABIDXBYNAME (NOMORIDX)
-
: NameORIDX
-
$ tabs.removeclass ('idéal-tabs-tab-active')
$tabs.eq(idx).addClass('ideal-tabs-tab-active')
$contents.hide().eq( idx).show()
},
suivantOnglet : function () {
var idx = Actions.getCurIdx() + 1
idx > $tabs.length - 1
? Methods.firstTab()
: Methods.switchTab(idx)
},
prevOnglet : 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 (nomOuIdx) ? 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)
}
}
// Joindre méthodes
pour (var m dans Méthodes)
$contents[m] = Méthodes[m]
// Init
$tabs.first()
.addClass('ideal-tabs-tab-active')
.end()
.click(function () {
var nom = $(this).text()
$contents.switchTab(name)
})
// Insérer dans DOM et événements
$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() // Start fresh
return $contents
}
/ **
* Un menu <sélectionnez> menu plugin jQuery
-
* @example `$('select').idealSelect()`
*/
$.fn.idealSelect = fonction () {
-
return this.each(function () {
var
$select = $(this) ,
$options&nbnbsp;= $select.find('option')
/**
* Générer un balisage et retourner des éléments de la sélection personnalisée
* @memberOf $.fn.toCustomSelect
-
* @returns {object} Tous les éléments du nouveau remplacement sélectionné
*/
var idealSelect = (function () {
var
$wrap = $('<ul class="ideal-select '+ $select .attr('name') +'"/>'),
$menu = $(
'<li><span class="idéal-select-title">' +
$options.filter(':selected ').text() +
'span>li>'
),
articles = (function () {
var items = []
$options.each(function ( ) {
var $this = $(this)
items.push('<li class="ideal-select-item">' + $this.text() + 'li>')
})
retourner les articles
}())
$menu.append('<ul class="ideal-select-sub">' + items.join('') + 'ul >')
$wrap.append($menu)
-
retour {
sélectionner : $wrap,
titre : $menu.find('.ideal-select-title'),
sub : $menu.find('.ideal-select-sub'),
éléments : $menu.find('.ideal-select-item')
}
}())
/**
* @namespace Méthodes de sélection personnalisée
* @memberOf $.fn.toCustomSelect
*/
var Actions = {
getSelectedIdx: function () {
retour idealSelect.items
.filter('.ideal-select-item-selected').index()
},
/**
* @private
*/
init : (function () {
$select.css({
position : 'absolue',
gauche : '-9999px'
})
idealSelect.sub.hide()
idealSelect.select.insertAfter($ select)
idealSelect.select.css(
'min-width',
.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()
}
},
- // Correction de la perte de mise au point lors du défilement
- // et de la sélection d'un élément avec le clavier
- focusHack : fonction () {
- set
Timeout(function () {
- $select.trigger('focus')
- }, 1)
- },
- focus : fonction () {
- idealSelect.select.addClass('ideal-select-focus')
- $(document).on('keydown.noscroll', Actions.noWindowScroll)
- },
- flou : fonction () {
- idealSelect.select
- .removeClass('ideal-select-open ideal-select-focus')
- $(document).off('.noscroll')
- },
- scrollIntoView : fonction (
dir) {
- var
- $
selected = idealSelect.items.filter('.ideal-select-item-selected'),
-
itemHeight = idéalSelect .items.outerHeight (),
-
menuHeight = idealSelect.sub.outerHeight(),
-
isInView = (function () {
- /// position relative au sous-menu
- var
elPos = $selected.position().top + itemHeight
- return
dir === 'down'
- ? elPos
<= menuHauteur
: elPos > 0
}())
si ( !isInView) {
itemHeight = (dir === 'down')
? itemHeight // descendre
: -itemHeight // go up
idealSelect.sub
.scrollTop(idealSelect.sub.scrollTop() + itemHeight)
}
},
- scrollToItem: function () {
- var
idx = Actions.getSelectedIdx(),
-
hauteur = idealSelect.items.outerHeight(),
-
nItems = idéalSélectionner .items.length,
-
allHeight = hauteur * nItems,
-
curHeight = hauteur * (nItems-- idx)
- idealSelect.sub.scrollTop(allHeight - curHeight)
- },
- showMenu : function () {
- idealSelect.sub.fadeIn('fast')
- idealSelect.select.addClass('ideal-select-open')
- Actions.select(Actions.getSelectedIdx())
- Actions.scrollToItem()
- },
- hideMenu : function () {
- idealSelect.sub.hide()
- idealSelect.select.removeClass('ideal-select-open')
- },
- sélectionner : fonction (idx) {
- idealSelect.items
- . removeClass('ideal-select-item-selected')
- idealSelect.items
- .eq(idx).addClass('ideal- select-item-selected')
- },
- changer : fonction (idx) {
var text = idealSelect.items.eq(idx).text()
Actions. select(idx)
idealSelect.title.text(text)
$options.eq(idx).prop('selected', true)
$select.trigger('change')
},
keydown : function (touche) {
var
idx = Actions.getSelectedIdx() ,
isMenu = idealSelect.select.is('.ideal-select-menu'),
isOpen = idealSelect.select.is('.ideal-select-open')
/**
* @namespace Touche appuyée
-
* /
-
var touches = {
-
9: function () {// tab
if (isMenu) {
Actions.blur()
Actions.hideMenu()
}
},
13 : fonction () { // ENTER
if (isMenu)
isOpen
? Actions.hideMenu()
: Actions.showMenu()
Actions.change(idx)
-
},
27 : fonction () { //ESC
-
if (isMenu) Actions.hideMenu()
},
40 : fonction () { // DOWN
if (idx < $options.length - 1) {
isOpen
? Actions.select(idx + 1)
: Actions.change(idx + 1)
}
Actions.scrollIntoView('vers le bas' )
},
38 : fonction () { // UP
si ( idx > 0) {
isOpen
? Actions.select(idx - 1)
: Actions.change(idx - 1)
}
Actions.scrollIntoView('up')
'default' : fonction () { // Lettre
var
lettre = String.fromCharCode(key),
$matches = idealSelect.items
.filter(function () {
new RegExp('^' + letter, 'i').test( $(this).text() ) // trouver la première match
-
}),
-
nmatches = $ matches.length, -
compteur = - IdealSelect
.select.data('counter') + 1 || 0,
curKey = - idealSelect
.select.data('key') || clé,
newIdx = $matches.eq(counter).index() if (!nMatches) // Aucune correspondance
retourner false
// Si plus de correspondances avec la même lettre
-
if (
curKey === key) { - < euh' , compteur)
}
autre {- idealSelect.select.data('counter ', 0)
- newIdx
- = $matches.eq(0).index()
- }
- }
// Si nouvelle lettre
- sinon {
- &nnbsp;idealSelect.select.data('counter', 0)
- newIdx
- = $matches.eq(0).index()
- }
- if (estOuvert)
Actions.select( newIdx)
- else
- Actions.change(newIdx)
- idealSelect. select.data('clé', clé )
- Actions.scrollToItem()
- Actions.focusHack()
- }
- }
- touches[clé]
- ? touches[clé]()
- : clés['default']()
- }
- }
- /**
- * @namespace Contient tous les événements de sélection personnalisée pour le "mode menu" et le "mode liste"
- * @memberOf $.fn. toCustomSelect
- */
- var événements
- = {
- focus : Actions.focus,
- 'blur.menu' : function () {
Actions.blur ()
- Actions.hideMenu()
- },
- 'blur.list' : fonction () {
Actions.blur()
},
keydown : function (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()
}
}
// Réinitialiser les événements
var disableEvents = fonction () {
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')
}
// Mode Menu
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'])
-
})
// Mode liste
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) {
// Empêcher l'événement keydown par défaut
// pour éviter les bugs avec les événements Ideal Select
if (e.which !== 9) e.preventDefault()
})
// Réinitialiser
idealSelect.select.on('reset', function(){
Actions.change(0)
})
idealSelect.select.trigger('menu') // Par défaut sur "mode menu"
})
}
/*
* idealRadioCheck : jQuery plguin pour la case à cocher et le remplacement de la radio
* Utilisation : $('input[type=checkbox], input[type=radio]').idealRadioCheck()
*/
$.fn.idealRadioCheck = fonction() {
return this.each(function() {
var $ce = $(ce)
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', '') // Correction du clic sur l'étiquette dans iOS
$this.css({ position : 'absolute', gauche : '-9999px' }) // masquer en déplacement gauche
// Événements
$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') },
flou : function() { $span.removeClass('focus') },
clic : fonction() { $ (this).trigger('focus') }
})
})
}
;(function( $ ) {
// Le navigateur prend en charge plusieurs fichiers HTML5 ?
var multipleSupport = typeof $('<input/ >')[0].multiple !== 'undefined',
isIE = /msie/i.test( navigator.userAgent )
$.fn.idealFile = function() {
retourner this.each (function() {
-
var $file = $(this).addClass('ideal-file'), // l'entrée du fichier d'origine
< > div -
class
= "ideal-file-wrap" >'),
$input = $('<input type="texte" class="idéal-file-filename" />'),
// Bouton qui sera utilisé dans les navigateurs non-IE
$bouton = $('<bouton type="bouton" class="téléchargement de fichiers idéal">Ouvrir< ;/bouton>'),
// Hack pour IE
$label = $('<label class="téléchargement de fichiers idéal" for="'+ $file[0].id +'">Ouvrirétiquette>')
// Masquer en déplacement vers la gauche pour que nous
// pouvons toujours déclencher des événements
$file.css({
position : 'absolue',
gauche : '-9999px'
})
$wrap.append( $input, ( isIE ? $label : $button ) ) .insertAfter( $file )
// Empêcher le focus
$file.attr('tabIndex', -1)
$button.attr('tabIndex', -1)
$button.click(function () {
-
$file.focus().click() // Ouvrir la boîte de dialogue
})
$file.change(function( ) {
var files = [], fileArr, filename
// Si plusieurs sont supportés alors extraire
// tous les noms de fichiers du tableau de fichiers
si ( multipleSupport ) {
fileArr = $file[0].files
pour ( var i = 0, len = fileArr.length; je < len; i++ ) {
files.push( fileArr[i].name )
}
nom de fichier = files.join(', ')
// Si non supporté alors prenez juste la valeur
// et supprimez le chemin pour afficher juste le nom du fichier
} else {
-
nom du fichier = $fichier. val().split('\').pop()
- }
- $input.val( filename ) // Définir le valeur
- .attr( 'title', filename ) // Afficher le nom du fichier dans le titre tootlip
- })
- $input.on({
- focus : function () { $file.trigger('change') },
- flou : function () { $file.trigger('blur') },
- keydown : function( e ) {
- if (
e.which === 13 ) { // Entrer
- if ( !isIE ) { $file.trigger('click') }
- } sinon if (
e.which === 8 || e.which === 46 ) { // Retour arrière & Suppr
- // Sur certains navigateurs, la valeur est en lecture seule
- $file.replaceWith( $
- file
= $file.val('').clone( true ) )
$file.trigger('change' )
$input.val('') - } else if (
- e.which
=== 9 ){ // TAB
retour
} else { // Toutes les autres touches - return false
- }
- }
- })
})
}
}(jQuery))
-
/**
* @namespace Erreurs
* @locale fr
*/
$.idealforms.errors = {
requis : 'Ceci est obligatoire.',
numéro : 'Doit être un numéro.',
chiffres : 'Doit être un numéro unique.' ,
nom : 'Doit comporter au moins 3 caractères et ne peut contenir que des lettres.',
nom d'utilisateur : 'La longueur minimale de le nom d'utilisateur est de 5 caractères et la longueur maximale est de 30 caractères. Veuillez utiliser des lettres anglaises, des chiffres, des caractères chinois et des traits de soulignement. Le premier caractère du nom d'utilisateur doit être composé de lettres, de chiffres, de caractères chinois et ne peut pas être uniquement composé de chiffres. Le caractère chinois comporte 21 caractères.',
pass : 'Le mot de passe doit comporter entre 6 et 15 chiffres et contenir au moins un chiffre, une lettre majuscule et une lettre minuscule.',
strongpass : 'Doit comporter au moins 8 caractères et contenir au moins une lettre majuscule et une lettre minuscule et un chiffre ou un caractère spécial.',
-
email : 'Doit Est une adresse e-mail valide <em>(Exemple : user@gmail.com)< /em>',
-
téléphone : 'Doit être un numéro de téléphone portable valide <em >(Exemple : 18723101212)em>', >
zip : 'Doit être un code postal américain valide ;/ - em
>', url : ' Il doit s'agir d'une URL valide <em>(par exemple, www.google.com)
- em.
>', minChar : 'Doit être au moins /fort> caractères longs.',
- minOption : 'Cochez au moins
< strong>{0} strong> options.',
- maxChar : 'Pas plus de
< ;strong>{0}strong> caractères longs.' ,
- maxOption : 'Pas plus de
<fort>{0}< /fort> options autorisées.',
-
plage : 'Doit être un nombre compris entre {0} et {1}.', date : 'Doit être une date valide 🎜><em> (par exemple {0})
em - >
dob : 'Doit être une date de naissance valide.',
exclure : '"{0}" n'est pas disponible.',
excludeOption : '{0}',
equalto : 'Doit avoir la même valeur que < fort>"{0}"fort>',
extension : 'Le(s) fichier(s) doivent avoir une extension valide. <em>(par exemple "{0}")em >',
ajaxSuccess : '<fort>{0}strong> n'est pas disponible.',
ajaxError : 'Erreur du serveur...'
}
/**
* Obtenir tous les filtres par défaut
* @returns object
*/
var getFilters = fonction() {
var filtres = {
obligatoire : {
regex : /.+/,
erreur : $.idealforms.errors.required
},
numéro : {
regex : function( i, v ) { return !isNaN(v) },
erreur : $.idealforms.errors.number
},
chiffres : {
regex : /^d+$/,
erreur : $.idealforms.errors.digits
},
nom : {
regex : /^[A-Za-z]{3,}$/,
erreur : $.idealforms.errors.name
},
nom d'utilisateur : {
regex : /^[a-z](?=[w.]{4,30}$)w*.?w*$/i,
-
erreur : $.idealforms.errors.username
- },
- pass : {
- regex : /(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
- erreur : $.idealforms.errors.pass
- },
- strongpass : {
- expression régulière : /(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(? =.*[a-z]).*$/,
- erreur : $.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})?$/,
erreur : $.idealforms.errors.email
},
téléphone : {
//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}$/,
erreur : $ .idealforms.errors.phone
},
zip : {
regex : / ^d{5}$|^d{5}-d{4}$/,
erreur : $.idealforms.errors.zip
-
},
url : {
regex : /^(?:(ftp|http|https)://) ?(?:[w-]+.)+[a-z]{2,6}([:/?#].*)?$/i,
erreur : $ .idealforms.errors.url
},
min : {
regex : fonction ( entrée, valeur ) {
var $inputinput = input.input,
min = input.userOptions.data.min,
isRadioCheck = $input.is('[ tapez="checkbox"], [tapez="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 )
valeur de retour. longueur >= min
}
},
max : {
regex: function( input, value ) {
var $inputinput = input.input,
max = input.userOptions.data.max,
-
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 )
valeur de retour.longueur <= max
}
},
plage : {
regex : fonction ( entrée, valeur ) {
var plage = input.userOptions.data.range,
val = +value
this.error = $.idealforms.errors.range
.replace( '{0}', range[0] )
.replace( '{1}', range[1] )
return val >= range[0] && val <= range[1]
}
},
date : {
regex: function( entrée, valeur ) {
var
userFormat =
input.userOptions.data && input.userOptions.data.date
? input.userOptions.data.date
: 'mm/jj/aaaa', // format par défaut
délimiteur = /[^mdy]/.exec( userFormat )[0],
theFormat = userFormat.split(délimiteur),
theDate = value.split(delimiter),
isDate = fonction( date, format ) {
var m, d, y
pour ( var i = 0, len = format.length; i < len; i++ ) {
if ( /m/.test( format[i]) ) m = date[i]
-
si ( /d/.test( format[i]) ) d = date[i]
si ( / y/.test( format[i]) ) y = date[i]
}
retour (
- 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: fonction (entrée, valeur) {
- var
-
userFormat =
-
input.userOptions.data && input.userOptions.data.dob
- ? input.userOptions.data.dob
- : 'mm/jj/aaaa', // format par défaut
- // Simuler une entrée de date
-
dateInput = {
- input : input.input,
- Optionsutilisateur : {
- données : { date : userFormat }
- }
- },
- // Utiliser un filtre de date interne pour val
dater la date
-
isDate = filters.date.regex( dateInput, value ),
- // DOB
theYear = /d{4}/.exec( value ),
maxYear = new Date().getFullYear(), // Current année
minYear = maxYear - 100
this.error = $.idealforms.errors.dob
return isDate && theYear >= minYear && theYear <= maxYear
}
},
exclure : {
regex : function( input, value ) {
- var $
inputinput = input.input,
-
exclude = input.userOptions.data.exclude,
-
isOption = $input.is('[type="checkbox"], [ tapez="radio"], select')
-
this.error = isOption
- ? $.idealforms.errors.excludeOption.replace( '{0}', value )
- :
this.error = $.idealforms.errors.exclude.replace ( '{0}', value )
- return $.inArray( value, exclure ) === -1
- },
- égal à : {
- regex : function( entrée, valeur ) {
- 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 )
retour $input.val() === $equals.val()
}
},
extension : {
regex : fonction ( entrée, valeur ) {
nbsp;var fichiers = input.input[0].files || [{ name: value }],
extensions = input.userOptions.data.extension,
re = new RegExp( '\.'+ extensions.join('|') +'$', 'i' ),
valide = faux
pour ( var i = 0, len = files.length; i < len; i++ ) {
valid = re.test( files[i].name );
}
this.error = $.idealforms.errors.extension.replace( '{0}' , extensions.join('", "') )
retour valide
}
},
ajax : {
regex : function( input, value, showOrHideError ) {
-
var self = cette
var $inputinput = input. input
var userOptions = input.userOptions
var name = $input.attr('name')
var $field = $input.parents('.ideal-field')
-
var valide = 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
// Envoyer le nom d'entrée en $_POST[name]
var data = {}
data[ name ] = $.trim( value )
// Options Ajax définies par l'utilisateur
var userAjaxOps = input.userOptions.data .ajax
-
var ajaxops = {
-
Type: 'Post',
dataType : 'json',
data : data,
succès : function( resp, text, xhr ) {
console.log(resp)
showOrHideError( self.error.success, true )
$input.data({
- 'ideal-ajax-resp': resp,
- 'ideal-ajax-er ror' : soi .error.success
- })
- $input.trigger('change') // pour mettre à jour le compteur
- $field.removeClass('ajax')
- // Exécuter un rappel de réussite personnalisé
- if( userAjaxOps._success ) {
- userAjaxOps._success( resp, text, xhr )
- }
- } ,
- erreur : function( xhr, text, error ) {
- si ( text !== 'abandonner' ) {
- showOrHideError( self.error.fail, false )
$input.data( 'ideal-ajax-error', self.error.fail )
$field.removeClass('ajax')
// Exécuter un rappel d'erreur personnalisé
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')
- // Exécutez la requête et enregistrez-la pour pouvoir l'abandonner
- // pour que les requêtes ne font pas de bulles
- $.idealforms.ajaxRequests[ name ] = $.ajax( ajaxOps )
- }
- }
- }
- filtres de retour
- }
- $
.idealforms.flags = {
- aucune erreur : fonction (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 : function (i) {
- i.parents('.ideal-field').removeClass('valid invalid')
- },
- novalidclass: function (i) {
- i.parents('.ideal-field').removeClass('valid') i.parents('. champ idéal').removeClass('invalid')
- }
- }
- /*
- * Plugin Ideal Forms
- */
var _defaults = {
entrées : {},
customFilters : {},
customFlags : {},
globalFlags : '',
onSuccess : function(e) { alert('Thank you...') },
onFail : function() { alert('Invalid !') },
responsiveAt : 'auto',
disableCustom: ''
}
// Constructeur
var IdealForms = fonction( élément, options ) {
-
var self = this
self.$form = $( element )
self.opts = $.extend( {}, _defaults, options )
self.$tabs = self.$form.find('section')
// Définir des filtres localisés
$. extend( $.idealforms.filters, getFilters() )
self._init()
}
// Plugin
$.fn.idealforms = fonction( options ) {
return this.each(function() {
if ( !$.data( this, 'formes idéales' ) ) {
$.data( this, 'idealforms', new IdealForms( ceci, options ) )
}
})
}
// Obtenir MOINS de variables
var LessVars = {
fieldWidth : Utils.getLessVar( 'ideal-field-width', 'width' )
}
/*
* Méthodes privées
*/
$.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' ) // désactiver la validation HTML5
-
// Do Markup
-
Formements.inputs
-
.add (formations.headings)
.add( formElements.separators )
.each(function(){ self._doMarkup( $(this) ) })
// Générer des onglets
if ( self.$tabs.length ) {
var $tabContainer = $('<div class="ideal-wrap ideal-tabs ideal-full-width"/>')
self.$form.prepend( $tabContainer )
self.$tabs.idealTabs( $tabContainer )
}
// Toujours afficher le sélecteur de date sous l'entrée
if ( jQuery.ui ) {
$.datepicker._checkOffset = fonction( a,b,c ) { return b }
}
// Ajouter des entrées spécifiées par data-ideal
// à la liste des entrées utilisateur
self.$ form.find('[data-ideal]').each(function() {
- var
userInput = o.inputs[ this.name ]
- o.inputs[ this.name ] = userInput || { filters : $(this).data('ideal') }
- })
- // Réactif
- if ( o.responsiveAt ) {
- $(window).resize(function(){ self._responsive() })
- self._responsive()
- }
- // Événements de formulaire
- self.$form.on({
- keydown : function( e ) {
- // Empêcher la soumission en appuyant sur Entrée
- // mais exclure les zones de texte
- if (
e.which === 13 && e.target.nodeName !== 'TEXTAREA' ) {
- e.preventDefault()
- }
- },
- soumettre : function( e ) {
- if ( !self.isValid() ) {
- e.preventDefault()
- o.onFa il ()
- self.focusFirstInvalid()
- } else {
- o. surSuccès( e )
- }
}
})
self._adjust()
-
self._attachEvents()
self.fresh() // Start fresh
},
_getFormElements : function() {
return {
entrées : this.$form.find('input, select , textarea, :button'),
labels : this.$form.find('div > label:premier-enfant '),
texte : this.$form.find('input:not([type="checkbox"], [ type="radio"], [type="submit"]), textarea'),
select : this.$form.find('select'),
radiocheck : this.$form.find('input[type="radio"], saisie[type="case à cocher"]'),
boutons : this.$form.find(':button'),
fichier : this.$form.find('input[type="fichier "]'),
titres : this.$form.find('h1, h2, h3, h4, h5, h6'),
séparateurs : this.$form.find('hr'),
-
masqué : this.$form.find('input:hidden')
}
},
_getUserInputs: function() {
return this.$form.find('[name="'+ Utils.getKeys( this.opts.inputs ).join('"], [nom="') +'"]')
},
_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()
// La saisie semi-automatique provoque quelques problèmes...
formElements.inputs.attr('autocomplete', 'off')
// Afficher les onglets pour calculer les dimensions
if ( self.$tabs.length ) { self.$tabs.show() }
// Ajuster les étiquettes
var labels = formElements.labels
labels. removeAttr('style').width( Utils.getMaxWidth( labels ) )
// Ajuster les titres et les séparateurs
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()
// Fin du calcul masquer les onglets
if ( self.$tabs.length ) {
self.$tabs.hide()
self.switchTab( curTab )
}
},
_setDatepicker: function() {
- var
o = ce.opts
- var $
datepicker = ce.$form.find( 'input.datepicker')
- if ( jQuery.ui && $datepicker.length ) {
- $datepicker.each(function() {
var userInput = o.inputs[ this.name ]
var data = userInput && userInput.data && userInput.data.date
var format = données ? data.replace( 'aaaa', 'aa' ) : 'mm/dd/yy'
$(this).datepicker({
dateFormat : format,
avantAfficher : function( input ) {
$( input ).addClass ('open')
},
onChangeMonthYear: function() {
- var w
- = $ this.outerwidth () //
cache Tout d'abord! 🎜>
$this.datepicker('widget').css( 'width', w ) - },
- onClose : function() { $(this).removeClass('open') }
- })
- })
- // Ajuster la largeur
- $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 ) // Éléments de validation
var $field = $('<span class="idéal -field"/>')
var $erreur = $('< span class="erreur-idéale" />')
var $valid = $('<i class="icône-idéal icône-idéal-valide" />')
var $invalide = $('<i class="icône-idéale icône-idéale-invalide"/>')
. click(function(){
$(this).parent().find('input:first, textarea, select').focus()
})
// Marquage de base
$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 )
},
text : function() { idealElements._defaultInput() },
radiocheck : function() {
// Vérifier si l'entrée est déjà enveloppé, donc nous ne le faisons pas
// envelopper les radios et les chèques plus d'une fois
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()
}
-
},
sélectionnez : function() {
idealElements._defaultInput()
if ( !/select/.test( o.disableCustom ) ) {
$element.idealSelect()
}
},
fichier : function() {
Éléments idéaux ._defaultInput()
if ( !/file/.test( o.disableCustom ) ) {
$element.idealFile()
}
},
bouton : function() {
if ( !/button/.test( o.disableCustom ) ) {
$element.addClass('ideal-button')
}
},
masqué : fonction() {
$element.closest('div').addClass('ideal-hidden')
},
titre : fonction() {
$element.closest('div').addClass('ideal-full-width')
$element.parent( ).children().wrapAll('<span class="titre-idéal"/>')
},
séparateur : function() {
$element .closest('div').addClass('ideal-full-width')
$element.wrapAll('<div classe="séparateur-idéal"/>')
}
}
// Générer un balisage pour le type d'élément actuel
idealElements[ elementType ] ? idéalElements[ elementType ]() : $.noop()
- $error.add( $valid ).add( $invalid ).hide() // Start fresh
- },
- /** Valide une entrée et affiche ou masque l'erreur et l'icône
- * @memberOf Actions
- * @param {object} $input jQuery object
- * @param {string} e L'événement JavaScript
- */
- _validate: function( $input, e ) {
- var
soi = ce
- var
o = ce.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="case à cocher "], [type="radio"]')
var inputData = {
// Si est la radio ou vérifier valider toutes les entrées liées par le nom
entrée : isRadioCheck ? self.$form.find('[name="' + name + '"]') : $input,
userOptions : userOptions
}
// Éléments de validation
var $field = $input.parents('.ideal-field')
var $error = $field.siblings('.ideal-error')
var $invalid = isRadioCheck
? $input.parent().siblings('.ideal-icon-invalid')
: $input.siblings('.ideal-icon-invalid')
var $valid = 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()
}
fonction showOrHideError ( erreur, valide ) {
resetError()
valide ? $valid.show() : $invalid.show()
$field.addClass( valid ? 'valid' : 'invalid' )
$field.data( 'ideal-isvalid', valid )
if ( !valid ) {
$error.html( erreur ).toggle( $field.is('.ideal-field-focus') )
}
}
// Empêcher la validation lors de la saisie, mais sans introduire de nouveaux caractères
// Ceci est principalement pour empêcher plusieurs requêtes AJAX
var oldValue = $input.data('ideal-value') || 0
$input.data( 'ideal-value', value )
if ( e.type = == 'keyup' && value === oldValue ) { return false }
// Valider
si ( userFilters ) {
$.each( userFilters, function( i, filter ) {
var theFilter = $.idealforms.filters[ filter ]
var customError = userOptions.errors && userOptions.errors[ filter ]
var erreur = ''
// Si le champ est vide et pas obligatoire
if ( !value && filter !== 'obligatoire' ) {
resetError()
retour faux
}
if ( le filtre ) {
// Abandonner et réinitialiser aja x s'il y a une demande en attente
if ( e.type === 'keyup' && ajaxRequest ) {
ajaxRe quête. abort()
$field.removeClass('ajax')
}
/ / AJAX
si ( filtre === 'ajax' ) {
nbsp; showOrHideError( error, false ) // set invalid jusqu'à ce que la réponse revienne
$error.hide()
-
si ( e .Type === 'KEYUP') {
-
thefilter.regex (InputData, Value, ShoworHideError) // Exécute le rappel AJAX
-
} else {
var ajaxError = $input.data('ideal-ajax-error')
if ( ajaxError ) {
-
showOrHideError( ajaxError, $input.data('ideal-ajax-resp') | | faux )
}
}
}
// Tous les autres filtres
autre {
- var
valid = Utils.isRegex( le Filtrer. regex ) && theFilter.regex.test( value ) ||
- Utils.isFunction( theFilter.regex ) && theFilter.regex( inputData, value )
- erreur
= customError || theFilter.error // attribuer une erreur après appel regex()
showOrHideError( error, valid ) - if ( !valid ) { return false }
- }
- }
- })
-
} - // Réinitialiser si il n'y a aucun filtre
- sinon {
- 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) })
- }
- retour f
- }())
- if ( flags.length ) {
- $.each(flags, function( i,f ) {
- var theFlag
- = $.idealforms.flags[f]
if ( theFlag ) { theFlag( $input, e .type ) }
- })
- }
- // Mettre à jour le compteur
- 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]')
// Déclencheur en changement si type=fichier car fichier personnalisé
// désactive le focus sur l'entrée du fichier d'origine (tabIndex = -1)
if ( e.type === 'focus' || isFile && e.type === 'change' ) {
$field.addClass('ideal-field-focus')
}
si ( e.type === 'flou' ) {
$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 = ce .$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' )
// Masquer datePicker
var $datePicker = this.$form.find('input.hasDatepicker')
if ( $datePicker.length ) { $datePicker.datepicker('hide') }
}
})
/*
* Méthodes publiques
*/
$.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()
}
retourner ce
},
focusFirstInvalid: function() {
var $first = this.getInvalid().first().find('input:first, select, textarea')
var tabName = $first.parents('.ideal-tabs-content').data('ideal-tabs-content-name')
si ( this.$tabs.length ) {
this.switchTab( tabName )
}
$first.focus()
retourner ce
},
switchTab: function( nameOrIdx ) {
this.$tabs.switchTab( nameOrIdx )
retour this
},
onglet suivant : function() {
this.$tabs. nextTab()
retourner ce
},
prevTab : function() {
this.$tabs.prevTab()
retourner this
-
},
firstTab: function() {
this.$tabs.firstTab()
retourner ce
},
lastTab : function() {
this.$tabs.lastTab( )
retourner ce
},
-
fresh: function() {
this._getUserInputs().change().parents('.ideal-field')
.removeClass('valid invalid')
retourner ce
},
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')
})
retour this
},
reload : function() {
this._adjust()
this._attachEvents()
retourner this
},
reset : function() {
var formElements = this._getFormElements()
formElements.text.val('') // entrées de texte
-
formElements.radiocheck.removeAttr('checked') // radio & check
// Sélectionner et sélectionner personnalisée
formElements.select.find('option').first().prop( 'selected', true )
this.$form.find('.ideal-select').trigger('reset')
if ( this.$ tabs.length ) { this.firstTab() }
this.focusFirst().fresh()
retourner this
},
resetFields : function( fields ) {
fields = Utils.convertToArray( fields )
var formElements = this._getFormElements()
$.each( fields, function( i, v ) {
var $ input = Utils.getByNameOrId( v )
var type = Utils.getIdealType ( $input )
if ( type === 'text' || type === 'file' ) {
$input.val('')
}
if ( type === 'radiocheck' ) {
$input.removeAttr('checked') // radio & check
}
if ( type === 'select' ) {
$input.find('option'). first().prop( 'selected', true )
$input.next('.ideal-select').trigger('reset')
}
$input.change()
})
this.freshFields( fields )
retourner this
},
toggleFields : function( field ) {
fields = Utils.convertToArray( fields )
var self = this
-
var $fields = Utils.getFieldsFromArray( fields )
$fields.each(function() {
var $this = $(this)
var nom = $this.attr('name') || $this.attr('id')
var input = self.opts.inputs[ name ]
var filters = input && input.filters
var dataFilters = $this. data('filtres-idéaux') || ''
$this.data( 'ideal-filters', filters )
$this.closest('.ideal-wrap' .toggle()
self.setFieldOptions( name, { filters : dataFilters } )
})
retourner ce
},
setOptions : function( options ) {
$.extend( true, this.opts, options )
this.reload().fresh()
retourner ce
},
setFieldOptions : function( nom, options ) {
$.extend( true, this.opts.inputs[ name ], options )
this.reload().freshFields([ name ])
-
retourner ce
},
addFields: function( fields ) {
fields = Utils.convertToArray( fields )
var self = this
// Enregistrez les noms de toutes les entrées dans Array
// pour utiliser des méthodes qui prennent des noms c'est-à-dire. fresh()
var allNames = []
// Ajouter une entrée au DOM
function add( ops ) {
var name = ops.name
nbsp; var userOptions = {
filtres : ops.filters || '',
données : ops.data || {},
erreurs : ops.errors || {},
drapeaux : 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> '+
'<étiquette>'+ label +' :label>'+
Utils.makeInput( name, value, type, list, placeholder ) +
'div>')
var $ input = $field.find('input, select, textarea, :button')
// Ajouter des entrées avec des filtres à la liste
// des entrées utilisateur à valider
if ( userOptions.filters ) { self.opts.inputs[ name ] = userOptions }
self._doMarkup( $input )
// Insérer dans DOM
if ( ops.addAfter ) {
$field.insertAfter(
$( Utils.getByNameOrId( ops.addAfter ) ).parents('.ideal-wrap')
)
} else if ( ops.addBefore ) {
$field.insertBefore (
$(Utils.getByNameOrId( ops.addBefore ))
.parents('.ideal-wrap')
self._getTab( ops.appendToTab ).find('.ideal-wrap:last-child')
)
} else {
$field.insertAfter( self.$form.find('.ideal-wrap').last() )
-
}
-
// Ajouter le nom de champ actuel à la liste des noms
-
allNames.push (name)
}
// Parcourir chaque entrée
$.each( fields, function( i, ops ) { add( ops ) })
self.reload()
self.freshFields( allNames )
self._responsive()
retourner ce
},
removeFields : function( fields ) {
-
fields = - Utils
.convertToArray( fields )
var $fields = Utils.getFieldsFromArray( fields )
$fields.parents('.ideal-wrap').remove () this.reload()
retourner ce
}
})
}( jQuery, window, document ))
【Recommandations associées】
1 Tutoriel vidéo gratuit HTML5
2. Explication détaillée de l'instance de base de données locale HTML5
3 Vous apprendre à implémenter un micro-scénario H5
.4 . Explication détaillée des données des attributs personnalisés de H5-*
5 Exemple de code H5 pour implémenter les invites de zone de texte
- Ce qui suit est l'intégralité du fichier de code :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
- Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
- Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
- Expressions régulières et nouveaux éléments HTML5
- Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur