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" />
<style="marge-bas:5px;"
><bouton id="getTelCode" type=
"bouton"="marge-gauche:160px; marge-droite:auto;" >获取手机校验码bouton> & lt ;hr style="margin-top:5px; margin-bottom:5px;"
/> ;& gt;
& lt;>性别 :étiquette
><sélectionner identifiant="sexe" nom=
"sexe"<option valeur="男">男
> <option valeur="女">女
> sélectionner> > < >
<é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
< ;
type="text/javascript">
var options = { onFail : function() { alert($myform.getInvalid().length + ' champs invalides.')
},
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);
🎜>
monformulaire
= $('#mon -form').idealforms(options).data('idealforms');var nom d'utilisateur
=mot de passe = document.getElementById("pass") .value; //Mot de passe
email = document .getElementById("email").value; //Adresse email
téléphone = document.getElementById("téléphone ").value; //Numéro de téléphone portable
vCode = document.getElementById("vCode").value; // Code V de l'entreprise
telCode = document.getElementById("telCode").value; //Code de vérification du téléphone portable
trueName = document.getElementById("trueName").value; //Vrai nom
>="+ mot de passe +"
"+ e-mail +. "
"+ téléphone +"
"+ 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 > =
pathNameing(0, pathName.substr(1).indexOf(' /') + 1); window.location.href
=🎜> }, ert( "L'enregistrement a échoué!" > $('#reset').click(function() {
}); 🎜>
corps
>
La version initiale de cette vérification js vient de Cédric Ruiz, je l'ai légèrement modifiée.
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)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
var value = $('<p class="' + nom + '">p>').hide().appendTo('body ').css( prop )
$('.' + name).remove()
return ( /^d+/. test( value ) ? parseInt( value, 10 ) : value )
cléss
keys = []
taille = 0, clé ;
obj === nbsp;'function'
obj === 'string'
el = $('[nom="'+ str +'"]').longueur
nom="'+ str +'"]') // par nom
},
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()
}
},
Timeout(function () {
dir) {
selected = idealSelect.items.filter('.ideal-select-item-selected'),
itemHeight = idéalSelect .items.outerHeight (),
menuHeight = idealSelect.sub.outerHeight(),
isInView = (function () {
elPos = $selected.position().top + itemHeight
dir === 'down'
<= menuHauteur
: elPos > 0
}())
si ( !isInView) {
itemHeight = (dir === 'down')
? itemHeight // descendre
: -itemHeight // go up
idealSelect.sub
.scrollTop(idealSelect.sub.scrollTop() + itemHeight)
}
},
idx = Actions.getSelectedIdx(),
hauteur = idealSelect.items.outerHeight(),
nItems = idéalSélectionner .items.length,
allHeight = hauteur * nItems,
curHeight = hauteur * (nItems-- 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
compteur
.select.data('counter') + 1 || 0,
curKey.select.data('key') || clé,
newIdxif (!nMatches) // Aucune correspondance
retourner false
// Si plus de correspondances avec la même lettre
if (
curKey}
autre {// Si nouvelle lettre
Actions.select( newIdx)
Actions.blur ()
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
< >class
=>'),
$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()
e.which === 13 ) { // Entrer
e.which === 8 || e.which === 46 ) { // Retour arrière & Suppr
= $file.val('').clone( true ) )
$file.trigger('change' )
=== 9 ){ // TAB
retour
})
}
}(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 ;/>', url : ' Il doit s'agir d'une URL valide <em>(par exemple, www.google.com)
>', minChar : 'Doit être au moins /fort> caractères longs.',
< strong>{0} strong> options.',
< ;strong>{0}strong> caractères longs.' ,
<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})
emdob : '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
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 (
> 0 && m < 13 &&
y.length === 4 &&
> 0 && d <= ( new Date( y, m, 0 ) ).getDate()
this.error = $.idealforms.errors.date.replace( '{0}', userFormat )
userFormat =
input.userOptions.data && input.userOptions.data.dob
dateInput = {
dater la date
isDate = filters.date.regex( dateInput, value ),
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 ) {
inputinput = input.input,
exclude = input.userOptions.data.exclude,
isOption = $input.is('[type="checkbox"], [ tapez="radio"], select')
this.error = isOption
this.error = $.idealforms.errors.exclude.replace ( '{0}', value )
equals = $( input.userOptions.data.equalto ),
inputinput = input.input,
name = $equals.attr('name') || $equals.attr('id'),
isValid = $equals.parents('.ideal-field')
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({
$input.data( 'ideal-ajax-error', self.error.fail )
$field.removeClass('ajax')
// Exécuter un rappel d'erreur personnalisé
if ( userAjaxOps._error ) {
<🜜 >
.idealforms.flags = {
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() {
userInput = o.inputs[ this.name ]
e.which === 13 && e.target.nodeName !== 'TEXTAREA' ) {
}
})
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() {
o = ce.opts
datepicker = ce.$form.find( 'input.datepicker')
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() {
cache Tout d'abord! 🎜>
$this.datepicker('widget').css( 'width', w )w
=$datepicker.parent().siblings('.ideal-error').addClass('hidden')
}this
.optsUtils
.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()
soi = ce
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 {
valid = Utils.isRegex( le Filtrer. regex ) && theFilter.regex.test( value ) ||
= customError || theFilter.error // attribuer une erreur après appel regex()
}
var
userOptions.flags && userOptions.flags.split(' ') || [ ]
if ( o.globalFlags ) {if ( theFlag ) { theFlag( $input, e .type ) }
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
.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 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!
Quelles sont les méthodes de production de production d'animation html5 ?
La différence entre HTML et HTML5
Comment faire correspondre les nombres dans les expressions régulières
Logiciel de base de données couramment utilisé
Quels sont les paramètres du chapiteau ?
qu'est-ce que la programmation Python
qu'est-ce que le moteur de recherche
WeChat n'a pas réussi à charger les données
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
