begin process at 2012 05 28 11:41:14
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > TRIM, REMOVESPACE, PATTERN MAIL, PATTERN TÉLÉPHONE, PATTERN DATE...

TRIM, REMOVESPACE, PATTERN MAIL, PATTERN TÉLÉPHONE, PATTERN DATE...


 Description

Histoire de faire une piqure de rappel sur les contrôles de surface côté client, deux ou trois utilitaires.

Source

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  • <head>
  • <title>contrôle date basic</title>
  • <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  • <script type="text/javascript" charset="utf-8">
  • // <![CDATA[
  • function extendProperties(obj, extension) {
  • for(var property in extension) {
  • extension.hasOwnProperty(property) && !obj[property] ? obj[property] = extension[property] : false;
  • }
  • return obj;
  • }
  • extendProperties(String.prototype, {
  • mail:function() {
  • var reg = /^.+@.+\.([a-z]{2,})$/i;
  • return reg.test(this) ? true : false;
  • },
  • phone:function() {
  • var reg = /^[\+{1} ?]\d{7,}$/;
  • return reg.test(this) ? true : false;
  • },
  • trim:function() {
  • var regstart = /^[^\s]+/g;
  • var regend = /[^\s]+$/g;
  • return this.replace(regstart, '').replace(regend, '');
  • },
  • removespace:function() {
  • var reg = /[ ]+/g;
  • return this.replace(reg, '');
  • },
  • date:function() {
  • var v = true;
  • var m = [31,28,31,30,31,30,31,31,30,31,30,31];
  • var e = /^([\d]{2}\/){2}\d{4}$/;
  • var vs = this.split('/');
  • v = e.test(this) ? (parseInt(vs[1]) > 12 || parseInt(vs[1]) < 1 ? false : ((parseInt(vs[1]) != 2) ? (parseInt(vs[0]) > m[parseInt(vs[1])-1] ? false : true) : (parseInt(vs[0]) > (vs[2]%4 == 0 ? m[1]+1 : m[1]) ? false : true))) : false;
  • return v;
  • }
  • });
  • //]]>
  • </script>
  • <style type="text/css">
  • * {
  • font-family: Courier;
  • font-size: .8em;
  • }
  • label * {
  • white-space: pre-line;
  • }
  • </style>
  • </head>
  • <body>
  • <form action="#">
  • <p>
  • <label for="mail">
  • Mail : you@domain.com ---- <input type="text" name="mail" id="mail" />
  • </label>
  • <button type="button" onclick="alert(document.getElementById('mail').value.mail() ? 'mail OK' : 'mail KO')">mail()</button>
  • </p>
  • <p>
  • <label for="phone">
  • Phone : +3312345... ------ <input type="text" name="phone" id="phone" />
  • </label>
  • <button type="button" onclick="alert(document.getElementById('phone').value.phone() ? 'phone OK' : 'phone KO')">phone()</button>
  • </p>
  • <p>
  • <label for="date">
  • Date : dd/mm/yyyy -------- <input type="text" name="date" id="date" />
  • </label>
  • <button type="button" onclick="alert(document.getElementById('date').value.date() ? 'date OK' : 'date KO')">date()</button>
  • </p>
  • <p>
  • <label for="trim">
  • Trim : ------------------- <input type="text" name="trim" id="trim" value=" toto lala titi c " />
  • </label>
  • <button type="button" onclick="document.getElementById('trim').value = document.getElementById('trim').value.trim()">trim()</button>
  • </p>
  • <p>
  • <label for="removespace">
  • Removespace : ------------ <input type="text" name="removespace" id="removespace" value=" toto lala titi c " />
  • </label>
  • <button type="button" onclick="document.getElementById('trim').value = document.getElementById('trim').value.removespace()">removespace()</button>
  • </p>
  • <button type="reset">reset form</button>
  • </form>
  • </body>
  • </html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>contrôle date basic</title>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<script type="text/javascript" charset="utf-8">
			// <![CDATA[
	
			function extendProperties(obj, extension) {
				for(var property in extension) {
					extension.hasOwnProperty(property) && !obj[property] ? obj[property] = extension[property] : false;
				}
				return obj;
			}
			extendProperties(String.prototype, {
				mail:function() {
					var reg = /^.+@.+\.([a-z]{2,})$/i;
					return reg.test(this) ? true : false;
				},
			
				phone:function() {
					var reg = /^[\+{1} ?]\d{7,}$/;
					return reg.test(this) ? true : false;
				},
			
				trim:function() {
					var regstart = /^[^\s]+/g;
					var regend = /[^\s]+$/g;
					return this.replace(regstart, '').replace(regend, '');
				},
			
				removespace:function() {
					var reg = /[ ]+/g;
					return this.replace(reg, '');
				},
			
				date:function() {
					var v = true;
					var m = [31,28,31,30,31,30,31,31,30,31,30,31];
					var e = /^([\d]{2}\/){2}\d{4}$/;
					var vs = this.split('/');
					v = e.test(this) ? (parseInt(vs[1]) > 12 || parseInt(vs[1]) < 1 ? false : ((parseInt(vs[1]) != 2) ? (parseInt(vs[0]) > m[parseInt(vs[1])-1] ? false : true) : (parseInt(vs[0]) > (vs[2]%4 == 0 ? m[1]+1 : m[1]) ? false : true))) : false;
					return v;
				}
			});
			//]]>
		</script>
		<style type="text/css">
			* {
				font-family: Courier;
				font-size: .8em;
			}
			label * {
				white-space: pre-line;
			}
		</style>
	</head>
	<body>
	
		<form action="#">
			<p>
				<label for="mail">
					Mail : you@domain.com ---- <input type="text" name="mail" id="mail" />
				</label>
				<button type="button" onclick="alert(document.getElementById('mail').value.mail() ? 'mail OK' : 'mail KO')">mail()</button>
			</p>
		
			<p>
				<label for="phone">
					Phone : +3312345... ------ <input type="text" name="phone" id="phone" />
				</label>
				<button type="button" onclick="alert(document.getElementById('phone').value.phone() ? 'phone OK' : 'phone KO')">phone()</button>
			</p>
		
			<p>
				<label for="date">
					Date : dd/mm/yyyy -------- <input type="text" name="date" id="date" />
				</label>
				<button type="button" onclick="alert(document.getElementById('date').value.date() ? 'date OK' : 'date KO')">date()</button>
			</p>
			
			<p>
				<label for="trim">
					Trim : ------------------- <input type="text" name="trim" id="trim" value="   toto lala titi c     " />
				</label>
				<button type="button" onclick="document.getElementById('trim').value = document.getElementById('trim').value.trim()">trim()</button>
			</p>
			<p>
				<label for="removespace">
					Removespace : ------------ <input type="text" name="removespace" id="removespace" value="   toto lala titi c     " />
				</label>
				<button type="button" onclick="document.getElementById('trim').value = document.getElementById('trim').value.removespace()">removespace()</button>
			</p>
			<button type="reset">reset form</button>
		</form>
		
	</body>
</html>

 Conclusion

A intégrer dans des fonctions de submit sans toutefois oublier les contôles serveurs... :)


 Sources de la même categorie

Source avec Zip Source avec une capture SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth
Source avec Zip INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges
Source avec Zip Source avec une capture TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia
COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Toutes les sources de la catégorie Divers

 Sources en rapport avec celle ci

Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S... par Kimjoa
Source avec Zip Source avec une capture JVSMENU : MENUS CLASSIQUES ET CONTEXTUELS AVANCÉS EN JAVASCR... par emericv
Source avec Zip CLASS.JS , TEST D'IMPLÉMENTATION DE CLASS EN JAVASCRIPT par Kimjoa
Source avec Zip Source avec une capture EXPLORATEUR WEB par XtremDuke
Source avec Zip Source avec une capture PERSONNALISER LES BOÎTES DE DIALOGUE par XtremDuke

Commentaires et avis

Commentaire de Kimjoa le 21/10/2009 22:01:36

salut labotemplates.
y'a destruc qui me plaise pas tros dans ton code, tout le test dans ta fonction tu utilise 'hasOwnProperty' qui n 'est pas supporté par tout les browser, de plus cette fonction contrairement à l'opérateur 'in', recherche si la propriété existe dans ton objet initiale, et nous dans les sous chaine de prototype. Du coup a moin de lui passé une instance dérivant de plusieurs classe, elle n'a pas beaucoup d'utilité.
Toujours dans la même fonction tu utilises une syntaxe courte comme test conditionnelle, hors cette syntaxe oblige à spécifier le 'else', dans ton cas tu renvoie false, à undefined ...c'est pas très propre, le mieux aurait été de fair un if classique ou alors:
'obj[property] = obj[property] || extension[property]'

Sinon tes rexexp devrait etre des constantes hors tu les initialise à chaque appel, le mieux aurait été de mettre ses constance dans une fonction anonyme , renvoyant l 'objet à étendre:
(function(){
   TRIMREG= /^[^\s]+/g;
   return {
      trim : function(){
          bou de code utilisant TRIMREG
      }
  }
})()

Sinon de mémoire la fonction test renvoie un boolean, donc il sert à rien de enregistrer le test pour retourner en fonction d'une condition un bool correspondant au test

ta regexp de l'émail semble simpliste , surtout le ^.+, mais je te laisse tester , pour ma part j'utilise cette reg trouvé sur le net ^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$

ton expreg trim pourrait être plus simple : /^\s+|\s+$/g

je comprend pas tas regexp phone , ni date ...

c'est a peut prêt tout , bonne continuation !!




Commentaire de labotemplates le 21/10/2009 22:48:54

- Pas faux pour le boolean sur test() si on se contente d'un boolean. Le ternaire ici permet d'appeler autre chose selon l'utilisation voulue.
- Pour le pattern sur le mail, je m'appuie simplement sur les RFC qui permettent beaucoup plus de choses que le pattern que tu proposes, même si habituellement utilisé :) En théorie, nous serions en droit d'avoir un arobase dans le nom d'utilisateur, par exemple. C'est idiot mais pourtant vrai. On créé un groupe militant sur Facebook ?
- Pour hasOwnProperty, je n'ai pas de souci de compatibilité (IE6+, Safari, Chrome, Firefox et Opéra). Peux tu m'en dire plus sur les browsers qui n'acceptent pas ?
- Pour la regexp sur le trim, tu as raison, mais moi aussi ! na. Ayant mis le code en catégorie débutant, ça serait bien qu'un débutant comprenne le code à minima, donc découpage...
- Pour le phone, la regexp s'appuie sur les normes internationales (voir UIT)
- la date est un contrôle de date franco-française de type dd/mm/yyyy. C'est la regexp ou la fonction qui posent un problème de compréhension ?

J'ai oublié quelque chose d'autre ?
Merci pour ces remarques constructives en tout cas même si les habitudes de codage ne sont pas les mêmes pour tout le monde. C'est comme l'orthographe ça... :)

Commentaire de Kimjoa le 22/10/2009 00:21:15

re labotemplates !
alors concernant le trim, ok mais le mieux, même pour un débutant c'est le découpage niveaux regexp na {;o)

concernant le hasOwnProperty, j'ai recherché vite fais sur google , des problèmes de comptabilité, mais j'en ait pas trouvé :( ...j'ai pas du faire la nuance entre son rôle, qui pose problème  , et son implémentation par les navigateurs :( .... , mais c'est là le probleme, c'est son rôle, quand on utilise cette fonction, on demande à l'objet toutes ses variable définit par sa classes de base, ou implémenté (écrite ou réécrite) par l instance, hors, elle n 'a pas lieux d étre dans ton teste ... pk vouloir passé absolument juste les propriété qui ne sont pas hérité?? ... si t'a un ptit niveau programmation orienté OO, tu comprendra, mais c'est vrai que pour un noob en js,  le nom de la fonction peux porté à confusion..

concernant le arobase dans le nom d'utilisateur, lool , ouais un groupe sur facebook si tu veux !! mais c'est pour ça que je t ai laissé le "loisir" de la tester dans toute les situation, t'as regexp, hé là , tu me contredira pas que c'ets la galère!! ;)

Pour le phone, et la date , si tu le dit !! , j 'irais pas vérifié, mais , je voulais juste savoir ou tu en étais :)

sinon , veux quand même appuyer sur le faite que tes regexp, devrais être des constantes, même si elle mette 0.1 millisecondes a être évalue, c'est juste un problème de méthodologie, ...

voilà , voilà chacun à sa façon de parler, mais il dois toujours pouvoirs écouter les autres :)

bye!




Commentaire de astro53 le 22/10/2009 10:42:10

Salut LaboTemplates, je viens de lire ton code et les commentaires.
Je cite: "Ayant mis le code en catégorie débutant, ça serait bien qu'un débutant comprenne le code à minima, donc découpage...". Malgre un niveau correct que j ai en javascript je n arrive pas a comprendre une partie de son contenue.
Je ne trouve vraiment pas que ce genre de function soit a un niveau debutant puisque je ne saurais pas ecrire un truc pareil. Donc bravo je vais essayer de comprendre ca en recherchant qu est ce que Sting et qu est ce que property et qu est ce que String.property. Si j ai bien compris String.property est un array vu que tu ecris obj[property] mais a part ca je n ai aucune idee de quel est cette valeur. C est le noir total.
Bref si tu pouvais m'eclairer sur tout ca je t en remercie d'avance et si tu peux modifie ca en niveau intermediaire. Parce que c est pas un debutant comme moi qui pourtant peut creer des menus dynamiques en javascript ou autre du genre, qui peut comprendre ca facilement.

A bientot
Astro

Commentaire de pegos le 26/10/2009 11:25:27

Bonjour,
Sauf erreur de ma part pour la vérif de date, une année est bissextile si elle est divisible par 4 mais pas par 400.
On a donc:
v = e.test(this) ? (parseInt(vs[1]) > 12 || parseInt(vs[1]) < 1 ? false : ((parseInt(vs[1]) != 2) ? (parseInt(vs[0]) > m[parseInt(vs[1])-1] ? false : true) : (parseInt(vs[0]) > (vs[2]%4 == 0 && vs[2]%400 != 0 ? m[1]+1 : m[1]) ? false : true))) : false;

A+
PEGOS

Commentaire de pegos le 26/10/2009 11:36:15

Re Autant pour moi, j'ai été trop vite.
Une année est bissextile si divisible par 4 mais par par 100 à moins qu'elle soit divisible par 400 !
On a donc:
v = e.test(this) ? (parseInt(vs[1]) > 12 || parseInt(vs[1]) < 1 ? false : ((parseInt(vs[1]) != 2) ? (parseInt(vs[0]) > m[parseInt(vs[1])-1] ? false : true) : (parseInt(vs[0]) > ((vs[2]%4 == 0 && vs[2]%100 != 0)||vs[2]%400 == 0 ? m[1]+1 : m[1]) ? false : true))) : false;

Mille excuses.
PEGOS

Commentaire de MuslimTanger le 26/10/2009 19:18:47

c trésssssss  bien

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

proprieté d'une classe 'undefined' [ par seb_oulba ] hello, je développe un petit outil pour ka-map (exemple ici : http://maps.dmsolutions.ca/demo/us_streets/iframe.html)afin de faire des requetes lor Prototype et Array [ par syndrael ] Bonjour, Dans Script.Aculo.us (dernière version) on peut lire les ajouts dans Array. Comme ceci:Object.extend(Array.prototype, {   _each: function(ite Valeur disparait & instruction non executé [ par Zeroc00l ] Voici le code : <div style="BORDER-RIGHT: ghostwhite 1.5pt outset; PADDING-RIGHT: 2pt; BORDER-TOP: ghostwhite 1.5pt outset; PADDING-LEFT: 2pt; BACKGRO Problème avec Array.prototype [ par Evangun ] Bonjour à tous,La syntaxe Array.prototype me pose un problème !En l'occurence c'est avec le JSONstringifier (http://json.org/js.html) qui comporte cet surcharge prototype [ par karakvb ] Bonjour,je voulais savoir si c'etait possible de faire:Element.prototype.setAttribute = function (attr){    divers traitements    this.setAttribute(at Soucis entre 2 prototype.js [ par zelulu ] Bonjour à vous, je souhaite utiliser lightbox ou lightwindows sur mon site internet, j'ai un pti soucis, c'est que mon site utilise déjà prototype.js [a supprimer] PS la couleur de fond de mon texte ne s'affiche pas [ par 59cortex59 ] bonjour, je voudrais afficher du texte qui change de couleur sur un fond rouge. Le texte s'affiche et change de couleur, mais la couleur de fond ne s [a supprimer] background de mon rectangle [ par 59cortex59 ] bonjour,le code suivant permet de créer un rectangle avec du texte.le texte change de couleurmai le fond du rectangle non... /******************* prototype.js --> bindAsEventListener [ par alexflex25 ] var obj = { name: 'A nice demo' };function handler(e)< alias de méthode [ par sapakus ] Bonjour,1°) je tente de réduire un code trop imposant2°) je suis une bille en pooMon idée est de créer des "synonymes" de méthodes utilisées de manièr


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Frau auf Feld mit KopfsalatPhoto Underwater
Photo Sea sponges and water surface 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,671 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)