Création et implémentation de <formatChecker> + <inputChecker> ainsi que les applications
This commit is contained in:
parent
8ecbb14729
commit
8afd55351a
|
@ -16,8 +16,10 @@ if(!Authentification::checkUser(0)){
|
|||
|
||||
<link rel='stylesheet' href='css/animations.css'/>
|
||||
<link rel='stylesheet' href='css/global.css'/>
|
||||
<link rel='stylesheet' href='css/responsive.css'/>
|
||||
|
||||
<script type='text/javascript' src='js/adjust.js'></script>
|
||||
<script type='text/javascript' src='js/input-checker.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
@ -42,27 +44,38 @@ if(!Authentification::checkUser(0)){
|
|||
<div id='BREADCRUMB'><a href='Dashboard.php'>Accueil</a> <a href='Consultations.php'>Consultations</a></a> </div>
|
||||
|
||||
<article data-title="Saisir un rendez-vous">
|
||||
<div>
|
||||
<select id='newRDVPatient'>
|
||||
<option value='*'>Patients:</option>
|
||||
<?php
|
||||
foreach(PatientRepo::getAll() as $PATIENT)
|
||||
echo "<option value='".$PATIENT['Id']."' data-medecin='".$PATIENT['MedecinTraitant']."'>".$PATIENT['Nom']." ".$PATIENT['Prenom']."</option>";
|
||||
?>
|
||||
</select>Choix du patient
|
||||
</div><div>
|
||||
<select id='newRDVMedecin'>
|
||||
<option value='*'>Medecins:</option>
|
||||
<?php
|
||||
foreach(MedecinRepo::getAll() as $MEDECIN)
|
||||
echo "<option value='".$MEDECIN['Id']."'>".$MEDECIN['Nom']." ".$MEDECIN['Prenom']."</option>";
|
||||
?>
|
||||
</select>
|
||||
<span>Selection du médecin pour la consultation.</span>
|
||||
<span class='associated'>Médecin traitant du patient.</span>
|
||||
</div><br>
|
||||
<input type='text' placeholder='dd/mm/yyyy'>
|
||||
<br><br>coucou
|
||||
<form>
|
||||
<div>
|
||||
<select id='newRDVPatient'>
|
||||
<option value='*'>Patients:</option>
|
||||
<?php
|
||||
foreach(PatientRepo::getAll() as $PATIENT)
|
||||
echo "<option value='".$PATIENT['Id']."' data-medecin='".$PATIENT['MedecinTraitant']."'>".$PATIENT['Nom']." ".$PATIENT['Prenom']."</option>";
|
||||
?>
|
||||
</select>Choix du patient
|
||||
</div><div>
|
||||
<select id='newRDVMedecin'>
|
||||
<option value='*'>Medecins:</option>
|
||||
<?php
|
||||
foreach(MedecinRepo::getAll() as $MEDECIN)
|
||||
echo "<option value='".$MEDECIN['Id']."'>".$MEDECIN['Nom']." ".$MEDECIN['Prenom']."</option>";
|
||||
?>
|
||||
</select><span>Selection du médecin pour la consultation.</span><span class='associated'>Médecin traitant du patient.</span>
|
||||
</div>
|
||||
|
||||
<br><span>Date: </span>
|
||||
<input type='text' id='inDate' placeholder='dd/mm/yyyy'>
|
||||
|
||||
<br><span>Heure: </span>
|
||||
<input type='text' id='inHeure' placeholder='HH:MM'>
|
||||
|
||||
<br><span>Durée: </span>
|
||||
<input type='text' id='inDuree' placeholder='minutes'>
|
||||
|
||||
<br>
|
||||
<input type='submit' value='Enregistrer la consultation'>
|
||||
</form>
|
||||
|
||||
</article>
|
||||
|
||||
<article data-title="Numéro de sécurité sociale">
|
||||
|
|
|
@ -165,11 +165,11 @@ body{
|
|||
#WRAPPER > #CONTAINER{
|
||||
/* position */
|
||||
display: block;
|
||||
position: absolute;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 225px;
|
||||
width: calc( 100% - 225px );
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
@ -307,7 +307,7 @@ body{
|
|||
|
||||
|
||||
/* <SPAN> */
|
||||
#CONTAINER > article span{
|
||||
#CONTAINER > article > form > span{
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
|
@ -326,7 +326,7 @@ body{
|
|||
/* <INPUT> */
|
||||
#CONTAINER > article input{
|
||||
/* position */
|
||||
display: block;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 1em;
|
||||
padding: .7em;
|
||||
|
@ -345,4 +345,39 @@ body{
|
|||
/* @focus */
|
||||
#CONTAINER > article input:focus{
|
||||
border-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
/* .validated */
|
||||
#CONTAINER > article input.validated{
|
||||
border-color: #1cc952;
|
||||
}
|
||||
|
||||
|
||||
/* <INPUT> [type=submit] */
|
||||
#CONTAINER > article input[type=submit]{
|
||||
/* position */
|
||||
padding-left: 3em;
|
||||
|
||||
/* border */
|
||||
border-color: #f09108;
|
||||
|
||||
/* background */
|
||||
background: #f6f4f2 url(../src/save.svg) center left 1em no-repeat;
|
||||
background-size: 1em auto;
|
||||
|
||||
/* foreground */
|
||||
color: #777;
|
||||
|
||||
/* extra */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* @hover */
|
||||
#CONTAINER > article input[type=submit]:hover{
|
||||
/* background */
|
||||
background-color: #f09108;
|
||||
background-image: url(../src/save@hover.svg);
|
||||
|
||||
/* foreground */
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
@media (max-width: 1024px){
|
||||
|
||||
#WRAPPER{
|
||||
left: calc( 50% - 50% - 1em );
|
||||
width: calc( 100% - 2em );
|
||||
}
|
||||
|
||||
}
|
|
@ -22,7 +22,7 @@ if(Authentification::checkUser(0)){
|
|||
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests php</title>
|
||||
<title>Connexion</title>
|
||||
|
||||
<meta charset='utf-8'/>
|
||||
<meta name='description' value='Site de test'/>
|
||||
|
|
|
@ -9,6 +9,10 @@ NodeList.prototype.indexOf = HTMLCollection.prototype.indexOf = function(searche
|
|||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function addClass(el, pClass){
|
||||
if( el.className.length > 0 && el.className != pClass ) el.className = el.className + ' ' + pClass;
|
||||
else el.className = pClass;
|
||||
|
|
|
@ -1,58 +1,218 @@
|
|||
/* [1] On récupère les 2 <select> de création de RDV
|
||||
===============================================================*/
|
||||
var newRDVPatient = document.getElementById('newRDVPatient');
|
||||
var newRDVMedecin = document.getElementById('newRDVMedecin');
|
||||
// /* [1] On récupère les 2 <select> de création de RDV
|
||||
// ===============================================================*/
|
||||
// var newRDVPatient = document.getElementById('newRDVPatient');
|
||||
// var newRDVMedecin = document.getElementById('newRDVMedecin');
|
||||
|
||||
/* [2] Si on a récupéré les 2 <select>, on créé l'évènement de selection dynamique
|
||||
===============================================================*/
|
||||
if( newRDVPatient != null && newRDVMedecin != null ){
|
||||
// /* [2] Si on a récupéré les 2 <select>, on créé l'évènement de selection dynamique
|
||||
// ===============================================================*/
|
||||
// if( newRDVPatient != null && newRDVMedecin != null ){
|
||||
|
||||
/* [1] On selectionne dynamiquement le médecin traitant associé
|
||||
=======================================================================*/
|
||||
newRDVPatient.addEventListener('change', function(e){
|
||||
var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]");
|
||||
// /* [1] On selectionne dynamiquement le médecin traitant associé
|
||||
// =======================================================================*/
|
||||
// newRDVPatient.addEventListener('change', function(e){
|
||||
// var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]");
|
||||
|
||||
// on selectionne le medecin associé
|
||||
newRDVMedecin.value = child.dataset.medecin;
|
||||
addClass(newRDVMedecin, 'associated');
|
||||
}, false);
|
||||
// // on selectionne le medecin associé
|
||||
// newRDVMedecin.value = child.dataset.medecin;
|
||||
// addClass(newRDVMedecin, 'associated');
|
||||
// }, false);
|
||||
|
||||
|
||||
// [1] On met en valeur le médecin traitant associé (class=associated)
|
||||
// =======================================================================
|
||||
newRDVMedecin.addEventListener('change', function(e){
|
||||
var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]");
|
||||
if( newRDVMedecin.value == child.dataset.medecin ) // si c'est le medecin traitant, on met en valeur l'association
|
||||
addClass(newRDVMedecin, 'associated');
|
||||
else
|
||||
remClass(newRDVMedecin, 'associated');
|
||||
// // [1] On met en valeur le médecin traitant associé (class=associated)
|
||||
// // =======================================================================
|
||||
// newRDVMedecin.addEventListener('change', function(e){
|
||||
// var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]");
|
||||
// if( newRDVMedecin.value == child.dataset.medecin ) // si c'est le medecin traitant, on met en valeur l'association
|
||||
// addClass(newRDVMedecin, 'associated');
|
||||
// else
|
||||
// remClass(newRDVMedecin, 'associated');
|
||||
|
||||
}, false);
|
||||
}
|
||||
// }, false);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* GESTION DU NUMÉRO DE SÉCU */
|
||||
var inSecu = document.getElementById('inSecu'); // input du numéro de sécu
|
||||
var ftSecu = 'x xx xx xx xxx xxx xx'; // format du numéro de sécu
|
||||
// /* GESTION DU NUMÉRO DE SÉCU */
|
||||
// var inSecu = document.getElementById('inSecu'); // input du numéro de sécu
|
||||
// var ftSecu = 'x xx xx xx xxx xxx xx'; // format du numéro de sécu
|
||||
|
||||
// inSecu.addEventListener('keyup', function(e){
|
||||
|
||||
// // pour chaque caractère
|
||||
// for( var i = 0 ; i < inSecu.value.length ; i++ ){
|
||||
|
||||
// // [1] si le caractère n'est pas un nombre, on le supprime
|
||||
// if( isNaN(inSecu.value[i]) )
|
||||
// inSecu.value = inSecu.value.slice(0, i).concat( inSecu.value.slice(i+1) );
|
||||
|
||||
// // [2] si c'est pas un espace mais qu'il en faut un, on met en forme
|
||||
// if( inSecu.value[i] != ' ' && ftSecu[i] == ' ' )
|
||||
// inSecu.value = inSecu.value.slice(0, i).concat(' ').concat( inSecu.value.slice(i) );
|
||||
|
||||
// // [4] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours
|
||||
// inSecu.value = inSecu.value.slice(0, ftSecu.length).trim();
|
||||
// }
|
||||
|
||||
// // si input complet
|
||||
// if( inSecu.value.length == ftSecu.length )
|
||||
// addClass(inSecu, 'validated');
|
||||
// else
|
||||
// remClass(inSecu, 'validated');
|
||||
|
||||
// }, false);
|
||||
|
||||
|
||||
|
||||
|
||||
// /* GESTION DE LA DATE */
|
||||
// var inDate = document.getElementById('inDate'); // input de la date
|
||||
// var ftDate = 'dd/dd/dddd'; // format de la date
|
||||
|
||||
// inDate.addEventListener('keyup', function(e){
|
||||
|
||||
// // pour chaque caractère
|
||||
// for( var i = 0 ; i < inDate.value.length ; i++ ){
|
||||
|
||||
// // [1] si le caractère n'est pas un nombre, on le supprime
|
||||
// if( isNaN(inDate.value[i]) )
|
||||
// inDate.value = inDate.value.slice(0, i).concat( inDate.value.slice(i+1) );
|
||||
|
||||
// // [2] si c'est pas un espace mais qu'il en faut un, on met en forme
|
||||
// if( inDate.value[i] != '/' && ftDate[i] == '/' )
|
||||
// inDate.value = inDate.value.slice(0, i).concat('/').concat( inDate.value.slice(i) );
|
||||
|
||||
// // [3] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours
|
||||
// inDate.value = inDate.value.slice(0, ftDate.length).trim();
|
||||
// }
|
||||
|
||||
// // [4] vérification de cohérence
|
||||
// var pJour = inDate.value.slice(0,2);
|
||||
// var pMois = inDate.value.slice(3,5);
|
||||
// var pAnnee = inDate.value.slice(6,11);
|
||||
|
||||
// // test de la validité
|
||||
// var pDate = new Date(pJour+'/'+pMois+'/'+pAnnee);
|
||||
// // if( pDate.toString() != 'Invalid Date' ){
|
||||
// // var pDateObj = {
|
||||
// // jour: (''+(pDate.getDate()-1)).length != 2 ? '0'+(pDate.getDate()-1) : ''+(pDate.getDate()-1),
|
||||
// // mois: (''+(pDate.getMonth()+1)).length != 2 ? '0'+(pDate.getMonth()+1) : ''+(pDate.getMonth()+1),
|
||||
// // annee: (''+(pDate.getFullYear())).length != 4 ? '0'+(pDate.getFullYear()) : ''+(pDate.getFullYear()),
|
||||
// // }
|
||||
// // inDate.value = pDateObj.jour +'/'+ pDateObj.mois +'/'+ pDateObj.annee;
|
||||
// // }
|
||||
|
||||
// }, false);
|
||||
|
||||
|
||||
|
||||
// /* GESTION DE L'HEURE */
|
||||
// var inHeure = document.getElementById('inHeure'); // input de la date
|
||||
// var ftHeure = 'dd:dd'; // format de la date
|
||||
|
||||
// inHeure.addEventListener('keyup', function(e){
|
||||
|
||||
// // pour chaque caractère
|
||||
// for( var i = 0 ; i < inHeure.value.length ; i++ ){
|
||||
|
||||
// // [1] si le caractère n'est pas un nombre, on le supprime
|
||||
// if( isNaN(inHeure.value[i]) )
|
||||
// inHeure.value = inHeure.value.slice(0, i).concat( inHeure.value.slice(i+1) );
|
||||
|
||||
// // [2] si c'est pas un espace mais qu'il en faut un, on met en forme
|
||||
// if( inHeure.value[i] != ':' && ftHeure[i] == ':' )
|
||||
// inHeure.value = inHeure.value.slice(0, i).concat(':').concat( inHeure.value.slice(i) );
|
||||
|
||||
// // [3] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours
|
||||
// inHeure.value = inHeure.value.slice(0, ftHeure.length).trim();
|
||||
// }
|
||||
|
||||
// // [4] vérification de cohérence
|
||||
// var pHeures = inHeure.value.slice(0,2);
|
||||
// var pMinuts = inHeure.value.slice(3,5);
|
||||
|
||||
// // on borne les valeurs
|
||||
// if( pHeures.length == 2 ) pHeures = (pHeures>=24) ? '23' : pHeures;
|
||||
// if( pMinuts.length == 2 ) pMinuts = (pMinuts>=60) ? '59' : pMinuts;
|
||||
|
||||
// // on met au bon format dans tous les cas
|
||||
// if( pHeures.length == 2 && pMinuts.length == 2 ){
|
||||
// addClass(inHeure, 'validated');
|
||||
// inHeure.value = pHeures+':'+pMinuts;
|
||||
// }else
|
||||
// remClass(inHeure, 'validated');
|
||||
|
||||
// }, false);
|
||||
|
||||
|
||||
|
||||
/* VERIFICATION DES CHAMPS */
|
||||
var inCk = new inputChecker();
|
||||
var inDate = document.getElementById('inDate');
|
||||
var inHeure = document.getElementById('inHeure');
|
||||
var inSecu = document.getElementById('inSecu');
|
||||
|
||||
|
||||
// format de date simplifié
|
||||
var dateFormat = new formatChecker( null,
|
||||
'Ji/Mi/2iii',
|
||||
{ 'J': '[0-3]', 'M': '[0-1]' }
|
||||
);
|
||||
|
||||
// format de temps simplifié
|
||||
var timeFormat = new formatChecker( null,
|
||||
'Hi:Mi',
|
||||
{ 'H': '[0-2]', 'M': '[0-6]' }
|
||||
);
|
||||
|
||||
// format numéro SECU simplifié
|
||||
var secuFormat = new formatChecker( null,
|
||||
'S ii ii ii iii iii ii',
|
||||
{ 'S': '[0-1]' }
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
var now = new Date();
|
||||
inCk.append( inDate, dateFormat, now.toLocaleFormat('%d/%m/%Y') );
|
||||
inCk.append( inHeure, timeFormat, now.toLocaleFormat('%H:%M') );
|
||||
inCk.append( inSecu, secuFormat, '1 23 45 67 890 123 45' );
|
||||
|
||||
|
||||
inDate.addEventListener('keyup', function(e){
|
||||
if( inCk.check(inDate) ) addClass(inDate, 'validated'); // on active la classe si correct
|
||||
else{ // si incorrect
|
||||
|
||||
remClass(inDate, 'validated'); // on désactive la classe
|
||||
inCk.correct(inDate, false); // on corrige partiellement
|
||||
if( inCk.check(inDate) ) addClass(inDate, 'validated'); // mise à jour de la classe après correction
|
||||
}
|
||||
}, false);
|
||||
|
||||
|
||||
inHeure.addEventListener('keyup', function(e){
|
||||
if( inCk.check(inHeure) ) addClass(inHeure, 'validated'); // on active la classe
|
||||
else{ // si incorrect
|
||||
|
||||
remClass(inHeure, 'validated'); // on désactive la classe
|
||||
inCk.correct(inHeure, false); // on corrige partiellement
|
||||
if( inCk.check(inHeure) ) addClass(inHeure, 'validated'); // mise à jour de la classe après correction
|
||||
}
|
||||
}, false);
|
||||
|
||||
inSecu.addEventListener('keyup', function(e){
|
||||
if( inCk.check(inSecu) ) addClass(inSecu, 'validated'); // on active la classe
|
||||
else{ // si incorrect
|
||||
|
||||
// pour chaque caractère
|
||||
for( var i = 0 ; i < inSecu.value.length ; i++ ){
|
||||
|
||||
// [1] si le caractère n'est pas un nombre, on le supprime
|
||||
if( isNaN(inSecu.value[i]) )
|
||||
inSecu.value = inSecu.value.slice(0, i).concat( inSecu.value.slice(i+1) );
|
||||
|
||||
// [2] si c'est pas un espace mais qu'il en faut un, on met en forme
|
||||
if( inSecu.value[i] != ' ' && ftSecu[i] == ' ' )
|
||||
inSecu.value = inSecu.value.slice(0, i).concat(' ').concat( inSecu.value.slice(i) );
|
||||
|
||||
// [4] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours
|
||||
inSecu.value = inSecu.value.slice(0, ftSecu.length).trim();
|
||||
remClass(inSecu, 'validated'); // on désactive la classe
|
||||
inCk.correct(inSecu, false); // on corrige partiellement
|
||||
if( inCk.check(inSecu) ) addClass(inSecu, 'validated'); // mise à jour de la classe après correction
|
||||
}
|
||||
}, false);
|
||||
|
||||
}, false);
|
||||
|
||||
// inDate.value = 'x3 F3/a8';
|
||||
// inHeure.value = 'x3 F3/a8';
|
||||
// inSecu.value = 'x3 F3/a8';
|
|
@ -0,0 +1,286 @@
|
|||
// __ _ _ _
|
||||
// / _| ___ _ __ _ __ ___ __ _| |_ ___| |__ ___ ___| | _____ _ __
|
||||
// | |_ / _ \| '__| '_ ` _ \ / _` | __|____ / __| '_ \ / _ \/ __| |/ / _ \ '__|
|
||||
// | _| (_) | | | | | | | | (_| | ||_____| (__| | | | __/ (__| < __/ |
|
||||
// |_| \___/|_| |_| |_| |_|\__,_|\__| \___|_| |_|\___|\___|_|\_\___|_|
|
||||
//
|
||||
function formatChecker(pValue, pPattern, pRules){
|
||||
this.value = pValue;
|
||||
this.pattern = pPattern;
|
||||
this.rules = (arguments.length>2) ? pRules : [];
|
||||
};
|
||||
|
||||
formatChecker.prototype = {
|
||||
value: this.value, // valeur à formater
|
||||
pattern: this.pattern, // format global
|
||||
rules: this.rules, // définition des règles du format global
|
||||
regexp: null, // contiendra la RegExp de validation
|
||||
// règles par défaut
|
||||
default_rules: {
|
||||
'i': '[0-9]', // i = integer
|
||||
'a': '[a-z]', // a = lower case
|
||||
'A': '[A-Z]', // A = upper case
|
||||
'x': '[a-zA-Z]' // x = letter
|
||||
},
|
||||
|
||||
// créé une RegExp en fonction du format global @pattern et des règles @rules
|
||||
compile: function(){
|
||||
var RegExpExpr = '^'; // contiendra les chaines de la regex
|
||||
var RegExpDecomposition = [];
|
||||
|
||||
// on parcours les caractères du pattern
|
||||
for( var i = 0 ; i < this.pattern.length ; i++ ){
|
||||
/* [1] Cas où la règle est définie par l'utilisateur
|
||||
====================================================*/
|
||||
if( this.rules.hasOwnProperty( this.pattern[i] ) ){
|
||||
RegExpExpr += this.rules[ this.pattern[i] ];
|
||||
RegExpDecomposition.push( this.rules[ this.pattern[i] ] );
|
||||
|
||||
/* [2] Cas où la règle est définie par défaut
|
||||
====================================================*/
|
||||
}else if( this.default_rules.hasOwnProperty( this.pattern[i] ) ){
|
||||
RegExpExpr += this.default_rules[ this.pattern[i] ];
|
||||
RegExpDecomposition.push( this.default_rules[ this.pattern[i] ] );
|
||||
|
||||
/* [3] Cas où on prends juste le caractère en compte
|
||||
====================================================*/
|
||||
}else{
|
||||
RegExpExpr += this.pattern[i];
|
||||
RegExpDecomposition.push( this.pattern[i] );
|
||||
}
|
||||
}
|
||||
|
||||
RegExpExpr += '$';
|
||||
|
||||
// on définit la RegExp associée
|
||||
this.regexp = new RegExp( RegExpExpr );
|
||||
// on la complète avec la décomposition par caractère du pattern
|
||||
this.regexp.patternDecomposition = RegExpDecomposition;
|
||||
},
|
||||
|
||||
|
||||
// vérifie la validité en utilisant la RegExp, si elle n'est pas générée, on la génère
|
||||
check: function(pPlotPlate){
|
||||
/* [1] On génère la RegExp si ce n'est pas déjà fait
|
||||
====================================================*/
|
||||
if( this.regexp == null ) this.compile();
|
||||
|
||||
|
||||
/* [2] Gestion de la plaque à trous
|
||||
====================================================*/
|
||||
if( arguments.length > 0 && pPlotPlate instanceof Array){
|
||||
|
||||
// on parcours les caractères du pattern
|
||||
for( var i = 0 ; i < this.pattern.length ; i++ ){
|
||||
|
||||
var RegExpExpr = '^';
|
||||
|
||||
/* [1] Cas où la règle est définie par l'utilisateur
|
||||
====================================================*/
|
||||
if( this.rules.hasOwnProperty( this.pattern[i] ) )
|
||||
RegExpExpr += this.rules[ this.pattern[i] ];
|
||||
|
||||
/* [2] Cas où la règle est définie par défaut
|
||||
====================================================*/
|
||||
else if( this.default_rules.hasOwnProperty( this.pattern[i] ) )
|
||||
RegExpExpr += this.default_rules[ this.pattern[i] ];
|
||||
|
||||
/* [3] Cas où on prends juste le caractère en compte
|
||||
====================================================*/
|
||||
else
|
||||
RegExpExpr += this.pattern[i];
|
||||
|
||||
RegExpExpr += '$';
|
||||
|
||||
pPlotPlate.push( this.value[i].match( new RegExp(RegExpExpr) ) != null );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// on retourne TRUE si c'est bon, FALSE sinon
|
||||
return this.value.match( this.regexp ) != null;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/***********/
|
||||
/* USECASE */
|
||||
/***********/
|
||||
/* [1] On créé une instance du formatChecker()
|
||||
==================================================*/
|
||||
/*HIDDEN*///var instance = new formatChecker(
|
||||
/*HIDDEN*/// 'te2t 1 2 1/23', // la chaîne à vérifier
|
||||
/*HIDDEN*/// 'aava i i i/ii', // le schéma à respecter (cf. règles par défaut)
|
||||
/*HIDDEN*/// {'v': '[0-2]'} // règles spécifiques. Ici, 'v' correspond à un chiffre compris entre 0 et 2
|
||||
/*HIDDEN*///);
|
||||
|
||||
/* [2] On récupère le résultat de la vérification
|
||||
==================================================*/
|
||||
// Note. On passe ici en paramètre un tableau qui va être rempli à TRUE pour les caractères
|
||||
// correspondant au schéma, FALSE pour les erreurs
|
||||
/*HIDDEN*///var respecteSchema = instance.check( plotPlate=[] );
|
||||
/*HIDDEN*///console.log( respecteSchema ); // affichera "true"
|
||||
|
||||
/* [3] On accède à la plotPlate (afin de vérifier d'où vient l'erreur)
|
||||
==================================================*/
|
||||
/*HIDDEN*///console.log( plotPlate ); // affichera "[true, true, true, ..]""
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// _ _ _ _
|
||||
// (_)_ __ _ __ _ _| |_ ___| |__ ___ ___| | _____ _ __
|
||||
// | | '_ \| '_ \| | | | __|____ / __| '_ \ / _ \/ __| |/ / _ \ '__|
|
||||
// | | | | | |_) | |_| | ||_____| (__| | | | __/ (__| < __/ |
|
||||
// |_|_| |_| .__/ \__,_|\__| \___|_| |_|\___|\___|_|\_\___|_|
|
||||
//
|
||||
function inputChecker(){};
|
||||
|
||||
inputChecker.prototype = {
|
||||
input: [], // contiendra les éléments HTML <input>
|
||||
defval: [], // contiendra les valeurs par défaut ou NULL si pas défini
|
||||
checker: [], // contiendra les classes <formatChecker>
|
||||
|
||||
|
||||
/* Ajout d'un champ <input> au vérificateur
|
||||
*
|
||||
* @pInputElement<HTMLInputElement> l'élément <input> à vérifier
|
||||
* @pFormatChecker<formatChecker> l'instance <formatChecker> associée à la valeur voulue du champ
|
||||
* @pDefaultValue<String> [OPT] Valeur par défaut pour l'input
|
||||
*
|
||||
*
|
||||
* @return ajouté<Boolean> retourne TRUE, si le champ a bien été ajouté
|
||||
* retourne FALSE, si une erreur occure
|
||||
*/
|
||||
append: function(pInputElement, pFormatChecker, optDefaultValue){
|
||||
/* [1] Vérification des types
|
||||
====================================================*/
|
||||
if( !(pInputElement instanceof HTMLInputElement) ) return false; // si c'est pas un <input>, retourne FALSE
|
||||
if( !(pFormatChecker instanceof formatChecker) ) return false; // si c'est pas un <formatChecker>, retourne FALSE
|
||||
|
||||
|
||||
/* [2] Référencement des nouvelles données
|
||||
====================================================*/
|
||||
// insertion du <input>
|
||||
var index = this.input.push( pInputElement );
|
||||
|
||||
// insertion du <formatChecker>, si pb d'insertion, retourne FALSE
|
||||
if( index != this.checker.push(pFormatChecker) ) return false;
|
||||
|
||||
// insertion de la valeur par défaut (si définie), si pb d'insetion, retourne FALSE
|
||||
if( index != (this.defval.push((arguments.length>2)?optDefaultValue:null)) ) return false;
|
||||
},
|
||||
|
||||
|
||||
|
||||
/* Vérifie le format d'un champ <input> de rang spécifié
|
||||
*
|
||||
* @pInputElement<HTMLInputElement> L'élement qu'on veut vérifier
|
||||
*
|
||||
*
|
||||
* @return verification<Boolean> retourne TRUE si la vérification s'avère correcte
|
||||
* retourne FALSE si la vérification est incorrecte
|
||||
*/
|
||||
check: function(pInputElement){
|
||||
// si l'élément n'est pas référencé, retourne FALSE
|
||||
var index = this.input.indexOf( pInputElement );
|
||||
if( index < 0 ) return false;
|
||||
|
||||
/* [1] On remplace la valeur de vérification du <formatChecker> par la valeur actuelle de l'élément <input>
|
||||
====================================================*/
|
||||
this.checker[index].value = this.input[index].value;
|
||||
|
||||
/* [2] On renvoie le résultat du checker
|
||||
====================================================*/
|
||||
return this.checker[index].check();
|
||||
},
|
||||
|
||||
|
||||
|
||||
/* Vérifie le format de tous les champs <input>
|
||||
*
|
||||
* @return verifications<Boolean> retourne TRUE si les vérifications s'avèrent correctes
|
||||
* retourne FALSE si les vérifications sont incorrectes
|
||||
*/
|
||||
checkAll: function(){
|
||||
var checkerCumul = true;
|
||||
|
||||
for( var i = 0 ; i < this.input.length ; i++ )
|
||||
checkerCumul = checkerCumul && this.check(this.input[i]);
|
||||
|
||||
return checkerCumul;
|
||||
},
|
||||
|
||||
|
||||
/* Applique une correction en fonction du schéma
|
||||
*
|
||||
* @pInputElement<HTMLInputElement> l'élément <input> concerné
|
||||
* @pToEnd<Boolean> si on doit corriger jusqu'à la fin ou uniquement jusqu'à l'avancéé actuelle
|
||||
*
|
||||
*
|
||||
* @return correctValue<String> retourne la valeur corrigée
|
||||
* retourne NULL si erreur
|
||||
*/
|
||||
correct: function(pInputElement, pToEnd){
|
||||
/* GESTION PARAMS */
|
||||
|
||||
// on retourne une erreur si l'élément <input> n'est pas référencé
|
||||
if( (index = this.input.indexOf(pInputElement)) < 0 ) return null;
|
||||
|
||||
var pToEnd = (arguments.length>1) ? pToEnd : true;
|
||||
|
||||
|
||||
|
||||
/* [1] On met à jour la valeur du <formatChecker>
|
||||
====================================================*/
|
||||
this.checker[index].value = this.input[index].value;
|
||||
|
||||
|
||||
this.checker[index].compile(); // on génére la RegExp
|
||||
var RegExpByChar = this.checker[index].regexp.patternDecomposition; // on retire "/^" et "$/" de la RegExp
|
||||
var tmpValue = this.input[index].value; // on copie la "value" pour la modifier
|
||||
|
||||
|
||||
if( !this.check(pInputElement) ){ // si la chaîne n'est pas correcte
|
||||
|
||||
/* [2] Cas 1 : vérification de la chaîne complète
|
||||
====================================================*/
|
||||
for( var i = 0 ; i < RegExpByChar.length ; i++ ){ // on parcours le pattern
|
||||
|
||||
// si on dépasse de la valeur saisie et qu'on doit pas aller jusqu'à la fin, on quitte le FOR
|
||||
if( !pToEnd && i >= this.input[index].value.length )
|
||||
break;
|
||||
|
||||
// RegExp sur le caractère en question
|
||||
var tmpRegExp = new RegExp( '^'+RegExpByChar[i]+'$' );
|
||||
|
||||
/* (1) Valeur inexistante (string.length < schéma.length)
|
||||
-----------------------------------------------------------*/
|
||||
if( tmpValue.length == 0 || tmpValue[i] == null ){
|
||||
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) );
|
||||
i++; // on incrémente car on décale la valeur
|
||||
|
||||
|
||||
/* (2) Valeur ne correspond pas au schéma du caractère
|
||||
-----------------------------------------------------------*/
|
||||
}else if( tmpValue[i].match(tmpRegExp) == null )
|
||||
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) );
|
||||
// Remarque. Ici on ne décale pas (i++) car le décalage fait correspondre au schéma
|
||||
}
|
||||
|
||||
|
||||
// on tronque ce qui dépasse
|
||||
tmpValue = tmpValue.slice(0, RegExpByChar.length);
|
||||
|
||||
// on met à jour la valeur de l'élément input
|
||||
this.input[index].value = tmpValue;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
};
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
@ -0,0 +1,121 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
height="18.000025"
|
||||
version="1.1"
|
||||
width="18"
|
||||
id="svg2"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="save.svg">
|
||||
<metadata
|
||||
id="metadata32">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs30" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1056"
|
||||
id="namedview28"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="18.986111"
|
||||
inkscape:cx="0.3544805"
|
||||
inkscape:cy="13.75954"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2" />
|
||||
<g
|
||||
transform="translate(-3,-1031.4)"
|
||||
id="g4">
|
||||
<path
|
||||
d="m 3,1037.4 v 2 2 6 c 0,1.1 0.8954,2 2,2 h 14 c 1.105,0 2,-0.9 2,-2 v -6 -2 -2 H 3 z"
|
||||
id="path6"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#cccccc" />
|
||||
<path
|
||||
d="M 5,3 C 3.8954,3 3,3.8954 3,5 v 2 2 1 2 6 c 0,1.105 0.8954,2 2,2 h 14 c 1.105,0 2,-0.895 2,-2 V 12 10 9 7 6 L 18,3 H 17 15 5 z"
|
||||
transform="translate(0,1028.4)"
|
||||
id="path8"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#b3e3ff;fill-opacity:1" />
|
||||
<path
|
||||
d="m 6,3 v 1 1 2 c 0,1.1046 0.8954,2 2,2 h 1 4 2 1 c 1.105,0 2,-0.8954 2,-2 V 5.1562 5 4 3 H 6 z"
|
||||
transform="translate(0,1028.4)"
|
||||
id="path10"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#cccccc" />
|
||||
<path
|
||||
d="m 8,1041.4 c -1.1046,0 -2,0.9 -2,2 v 1.8 3.2 h 12 v -3.2 -1.8 c 0,-1.1 -0.895,-2 -2,-2 H 13 8 z"
|
||||
id="path12"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ecf0f1" />
|
||||
<rect
|
||||
height="1"
|
||||
width="12"
|
||||
x="6"
|
||||
y="1048.4"
|
||||
id="rect14"
|
||||
style="fill:#bdc3c7" />
|
||||
<path
|
||||
d="m 7,1031.4 v 1 2 c 0,1.1 0.8954,2 2,2 h 1 4 1 c 1.105,0 2,-0.9 2,-2 v -1.9 -0.1 -1 H 7 z"
|
||||
id="path16"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ecf0f1" />
|
||||
<path
|
||||
d="m 8,4 v 2 c 0,0.5523 0.4477,1 1,1 h 1 1 c 0.552,0 1,-0.4477 1,-1 V 4 H 10 8 z"
|
||||
transform="translate(0,1028.4)"
|
||||
id="path18"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#95a5a6" />
|
||||
<g
|
||||
id="g20"
|
||||
style="fill:#bdc3c7">
|
||||
<rect
|
||||
height="1"
|
||||
transform="translate(0,1028.4)"
|
||||
width="8"
|
||||
x="8"
|
||||
y="15"
|
||||
id="rect22" />
|
||||
<rect
|
||||
height="1"
|
||||
width="8"
|
||||
x="8"
|
||||
y="1045.4"
|
||||
id="rect24" />
|
||||
<rect
|
||||
height="1"
|
||||
width="4"
|
||||
x="8"
|
||||
y="1031.4"
|
||||
id="rect26" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 3.4 KiB |
|
@ -0,0 +1,121 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
height="18.000025"
|
||||
version="1.1"
|
||||
width="18"
|
||||
id="svg2"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="save@hover.svg">
|
||||
<metadata
|
||||
id="metadata32">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs30" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1056"
|
||||
id="namedview28"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="18.986111"
|
||||
inkscape:cx="0.2919805"
|
||||
inkscape:cy="13.75954"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2" />
|
||||
<g
|
||||
transform="translate(-3,-1031.4)"
|
||||
id="g4">
|
||||
<path
|
||||
d="m 3,1037.4 v 2 2 6 c 0,1.1 0.8954,2 2,2 h 14 c 1.105,0 2,-0.9 2,-2 v -6 -2 -2 H 3 z"
|
||||
id="path6"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#2980b9" />
|
||||
<path
|
||||
d="M 5,3 C 3.8954,3 3,3.8954 3,5 v 2 2 1 2 6 c 0,1.105 0.8954,2 2,2 h 14 c 1.105,0 2,-0.895 2,-2 V 12 10 9 7 6 L 18,3 H 17 15 5 z"
|
||||
transform="translate(0,1028.4)"
|
||||
id="path8"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#3498db" />
|
||||
<path
|
||||
d="m 6,3 v 1 1 2 c 0,1.1046 0.8954,2 2,2 h 1 4 2 1 c 1.105,0 2,-0.8954 2,-2 V 5.1562 5 4 3 H 6 z"
|
||||
transform="translate(0,1028.4)"
|
||||
id="path10"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#2980b9" />
|
||||
<path
|
||||
d="m 8,1041.4 c -1.1046,0 -2,0.9 -2,2 v 1.8 3.2 h 12 v -3.2 -1.8 c 0,-1.1 -0.895,-2 -2,-2 H 13 8 z"
|
||||
id="path12"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ecf0f1" />
|
||||
<rect
|
||||
height="1"
|
||||
width="12"
|
||||
x="6"
|
||||
y="1048.4"
|
||||
id="rect14"
|
||||
style="fill:#bdc3c7" />
|
||||
<path
|
||||
d="m 7,1031.4 v 1 2 c 0,1.1 0.8954,2 2,2 h 1 4 1 c 1.105,0 2,-0.9 2,-2 v -1.9 -0.1 -1 H 7 z"
|
||||
id="path16"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ecf0f1" />
|
||||
<path
|
||||
d="m 8,4 v 2 c 0,0.5523 0.4477,1 1,1 h 1 1 c 0.552,0 1,-0.4477 1,-1 V 4 H 10 8 z"
|
||||
transform="translate(0,1028.4)"
|
||||
id="path18"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#95a5a6" />
|
||||
<g
|
||||
id="g20"
|
||||
style="fill:#bdc3c7">
|
||||
<rect
|
||||
height="1"
|
||||
transform="translate(0,1028.4)"
|
||||
width="8"
|
||||
x="8"
|
||||
y="15"
|
||||
id="rect22" />
|
||||
<rect
|
||||
height="1"
|
||||
width="8"
|
||||
x="8"
|
||||
y="1045.4"
|
||||
id="rect24" />
|
||||
<rect
|
||||
height="1"
|
||||
width="4"
|
||||
x="8"
|
||||
y="1031.4"
|
||||
id="rect26" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 3.4 KiB |
Loading…
Reference in New Issue