Revisió del 15:57, 28 maig 2018

Expressions Regulars

Les expressions regulars son una necessitat a l'hora de validar formularis. Alguns problemes de validació no es podrien solucionar de una manera elegant sense elles. Les expressions regulars son senzillament una manera d'expresar un patró per a cadenes coincidents de text. La expressions contenen termes i operadors que ens pemeten definir els patrons.

Creació d'expresions regulars

A Javascript, com succeeix amb la majoria d'objectes, existeixen dos formes de crear expresions regulars:

• mitjançant un literal
• creant una instància d'un objecte de tipus RegExp

La creació d'una expressió regular amb un literal és molt sezill. Veïem un exemple. Volem crear una expressió regular que coincideixi exactament amb el string "test":

var pattern = /test/;

Les expresions regulars van envoltades del caràctes /. Igual que els String van envoltades del caràcter ".

També podíem haver creat una instància del objecte RegExp de la següent manera:

var pattern = new RegExp("test");

Modificadors ha utilitzar a l'hora de crear expressions regulars

A més a més de la propia expressió regular, podem introduïr els següents modificadors:

• i: Fa que no distingeixi de majúscules i minúscules. ex: /test/i
• g: Realitza una comparació global, en comptes de parar-se després de la primera coincidència.
• m: Permet combinar diverses cadenes, atès que podrien obtenir-se del valor d'un element de l'àrea de text (multiple matching)

Exemple d'ús:

var pattern = /test/ig
var pattern2 = new RegExp("test","ig");
//exemple d'us de la expressió regular
alert(pattern.test("test"));
alert(pattern2.test("test"));

Termes i Operadors

• Coincidència exacta: Tot lo que no sigui un caràcter especial o un operador haurà d'apareixer de forma literal en la expressió. Ex: /test/ la paraula 'test ha d'aparèixer exactament.
• Combinacions de caràcters: Moltes vegades no volem combinar un caràcter literal específic, sino un grup finit de caràcters. Podem especificar-ho col·locant el grup de caràcters que volem combinar entre claudàtors. Ex: [abc]
• Combinacions de caràcters excloents: Altres vegades volem combinar tots els caràcters trets d'uns quants. Per fer-ho podem utilitzar el símbol ^ seguit dels caràcters que no volem en la expresió. Ex: [^abc].
• Rang de valors: També tenim la habilitat d'especificar un rang de valors. Ex: volem qualsevol caràcter entre a i m minmúscula --> [a-m] (ambdós incloses).

Caràcters especials

Existeixen caràcters especials en les expresions regulars, de fet, ja hem vist uns quants: [, ], - i ^. Però encara hi ha uns quants més com serien el $, {, }, ?, ,, + i el . Com podem fer per utilitzar-los de forma literal en comptes d'utilitzar-los com a operadors de les expressions regulars? Escapant-los. Però com? Utilitzant un caràcter especial: \. Ex: La expressió regular /\[/ significa el caràcter [ i no l'inici d'un grup de caràcters. Així mateix, per poder utilitzar el caràcter \ dintre de la expressió regular l'haurem d'escapar. Ex: \\ correspon al literal \.

Principis i finals

A vegades volem que un patró coincideixi amb el principi d'una cadena o amb el final.

• Principi: Utilitzarem el caràcter ^. Ex: /^test/ : només coincideix si la cadena test coincideix amb el principi.
• Final: Utilitzarem el caràcter $. Ex: /test$/ : només coincideix si la cadena test coincideix amb el final.
• Principi i final: Ex: /^test$/ : Indica que el patró especificat ha d'incluir tota la cadena candidata.

Repetició de caràcters

Si volem combinar una serie de quatre caràcters 'a' podem expressar-ho amb /aaa/ però que succeeix si volem utilitzar un número qualsevol de repeticions del mateix caràcter? Tenim diferents opcions:

• Podem especificar que un caràcter és opcional, es a dir, pot aparèixer alguna vegada o ninguna (0 ó 1), Es fa afegint el caràcter ? al final. Exemple: /t?est/. Aquest patró combina dues opcions: test i est.
• Si volem que un caràcter apareixi moltes vegades (1 o més) utilitzarem +. Ex: /t+est/. Aquest patró combina test, ttest i tttest però no est.
• Si volem que un caràcter apareixi zero o més vegades (0 o més) utilitzem el caràcter *. Ex: /t*est/. Aquest patró combina test, ttest, tttest i també est.
• Podem especificar una quantitat concreta amb el número de repeticions permeses entre claudàtors {}Text en negreta. Per exemple, /a{4}/ indica una coincidència de quatre caràcters 'a' consecutius.
• També podem especificar un intérval per al compte de repeticions. Per exemple, /a{4,10}/ indica una combinació de 4 a 10 caracters 'a' consecutius.
• Si en aquest interval no s'indica el segon valor de l'intèrval indiquem que el número final és infinit. Ex: /a{4,}/. Aquest patró combina qualsevol cadena de cuatre o més caràcters 'a' consecutius. Fixat que és important posar la coma després del 4.

Caràcters predefinits

La sintaxis de les expressions regulars ens proporcionen un nombre de termes predefinits que representen caràcters o clases de caràcters que s'utilitzen amb freqüència. Taula:

Per veure el llistat complert fes click aquí.

Agrupació de caràcters

De moment, hem observat que els operadors + i * només afecten al terme que els precedeix. Si volem aplicar-los a un grup de termes, podem utilitzar parèntesis, igual que si es tractés d'una formula matemàtica. Per exemple: /(ab)+/. Aquest patró combina una o més aparicions de la cadena ab.

Alternància de caràcters

La alternància pot expressar-se utilitzant el caràcter |. Per exemple: /a|b/ combina el caràcter a o b, i /(ab)+|(cd)+/ combina només una o més repeticions de ab o cd.

Mètodes de les Expressions Regulars

• pattern.test(cadena) : Executa la expressió regular e indica si la cadena passada per paràmetre coincideix o no. (retorna True o False)
• pattern.exec(cadena) : Executa la expressió regular i retorna la primera coincidència.

Resum Expressions Regulars

Resum Expressions Regulars

Exercicis

Comprovar expressions regulars

més pàgines de comprovació

Crea un patró per a cadascuna de les diferents cadenes que es mostren a continuació:

• Codi postal. Ex: 46700

• Numero de telèfon amb prefix i guións que comence amb 9 ó 8. Ex: 93-123-11-33

• Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339

• Numero de telèfon internacional. Ex: (+34)952356817

• Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30

• Nombre Real. Ex: -122.33 ó 7,3 ó 8

• Numero ISBN de 13 dígits: 978-3-16-148410-0
• Numero de la seguretat social: 01-123456789

• Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.

Ex: C\ Mare de Deu de montserrat. 233 - 2

• Numero IP d'un ordinador de la versió 4.

• Numero Mac d'un ordinador separats per ':'
• URL (amb http, https, www, etc)

• Data: Ex: DD/MM/AAAA

• Hora: 23:55:55

• Email

• Comprobar un nombre propio

• Targeta de crèdit

• Codi postal. Ex: 46700
  • sol: ^\d{5}$
• Numero de telèfon amb prefix i guións. Ex: 93-123-11-33
  • sol: ^[89](\d-\d{3})-\d{2}-\d{2}$

       (9|8)\d-\d{3}-\d{2}-\d{2}

• Numero de telèfon amb prefix i punts. Ex: 93-1.231.1339
  • sol:^[89](\d-\d.)\d{3}\.\d{3}$
• Numero de telèfon internacional. Ex: (+34)952356817
  • sol: ^\(\+\d{2,3}\)\d{9}$
• Nom d'usuari amb un mínim de 4 i un màxim de 15. Ex: julio_30
  • sol: ^[a-z\d_]{4,15}$
• Nombre Real. Ex: -122.33 ó 7,3 ó 8
  • sol: ^[+-]?\d+([,.]\d+)?$

     -?\d+\.?(\d*)*

• Numero ISBN de 13 dígits: 978-3-16-148410-0
• Numero de la seguretat social: 01-123456789
  • sol: ^\d{2}-\d{9}$
  • sol: ^[0-1]{2}-\d{9}$
• Adreça Postal amb les següent condicions: Carrer (C\), Plaza(Pz.), Avinguda(Av.). Direcció. Numero - Porta.

Ex: C\ Mare de Deu de montserrat. 233 - 2

• • sol: ^((C\\)|(Pz\.)|(Av\.))\s.+\.\s\d{1,5}\s-\s\d$
• Numero IP d'un ordinador de la versió 4.
  • sol: ^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]?)\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9])\.){2}((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9][0-9]|[0-9]))$

(?:\d{1,3}\.){3}\d{1,3}

• Numero Mac d'un ordinador separats per ':'
• URL (amb http, https, www, etc)
  • sol:(www\.|http:\/\/|https:\/\/)\S*\.(com|es|org))
• Data: Ex: DD/MM/AAAA
  • sol: ^\d{1,2}\/\d{1,2}\/\d{2,4}$
• Hora: 23:55:55
  • sol: ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
• Email
  • sol: /^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
  • sol: ^[\\w-]+(\\.[\\w-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$
• Comprobar un nombre propio
  • sol: /^([A-Z]{1}[a-zñáéíóú]+[\s]*)+$/
• Targeta de crèdit
  • sol: ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

Formularis

JavaScript disposa de nombroses propietats i funcions que faciliten la programació d'aplicacions que manegen formularis. En primer lloc, quan es carrega una pàgina web, el navegador crea automàticament una matriu anomenat forms i que conté la referència a tots els formularis de la pàgina.

Per accedir al array forms , s'utilitza l'objecte document , de manera que document.forms és la matriu que conté tots els formularis de la pàgina. Com es tracta d'un array, l'accés a cada formulari es realitza amb la mateixa sintaxi dels arrays. La següent instrucció accedeix al primer formulari de la pàgina:

document. forms [0];

A més de l'array de formularis, el navegador crea automàticament una matriu anomenat elements per cadascun dels formularis de la pàgina. Cada array elements conté la referència a tots els elements (quadres de text, botons, llistes desplegables, etc.) d'aquest formulari. Utilitzant la sintaxi dels arrays, la següent instrucció obté el primer element del primer formulari de la pàgina:

document. forms [0]. elements [0];

La sintaxi dels arrays no sempre és tan concisa. El següent exemple mostra com obtenir directament l'últim element del primer formulari de la pàgina:

document. forms [0]. elements [document. forms [0]. elements. length - 1];

Encara que aquesta forma d'accedir als formularis és ràpida i senzilla, té un inconvenient molt greu. Què passa si canvia el disseny de la pàgina i en el codi HTML es canvia l'ordre dels formularis originals o s'afegeixen nous formularis? El problema és que "el primer formulari de la pàgina" ara podria ser un altre formulari diferent al que espera l'aplicació.

En un entorn tan canviant com el disseny web, és molt difícil confiar que l'ordre dels formularis es mantingui estable en una pàgina web. Per aquest motiu, sempre s'hauria d'evitar l'accés als formularis d'una pàgina mitjançant l'array document.forms.

Una forma d'evitar els problemes del mètode anterior consisteix a accedir als formularis d'una pàgina a través del seu nom (atribut name) o a través del seu atribut id . L'objecte document permet accedir directament a qualsevol formulari mitjançant la seva atribut name:

var formularioPrincipal = document. formulari;
 var formularioSecundario = document. otro_formulario;

 <Form name = "formulari">
   ...
 </ Form>

 <Form name = "otro_formulario">
   ...
 </ Form>

Accedint d'aquesta forma als formularis de la pàgina, l'script funciona correctament encara que es reordenin els formularis o s'afegeixin nous formularis a la pàgina. Els elements dels formularis també es poden accedir directament mitjançant el seu atribut name:

var formularioPrincipal = document. formulari;
 var primerElemento = document. formulari. element;

 <Form name = "formulari">
   <Input type = "text" name = "element" />
 </ Form>

Òbviament, també es pot accedir als formularis i als seus elements utilitzant les funcions DOM d'accés directe als nodes. El següent exemple utilitza l'habitual funció document.getElementById() per accedir de forma directa a un formulari i un dels seus elements:

var formularioPrincipal = document. getElementById ("formulari");
 var primerElemento = document. getElementById ("element");

 <Form name = "formulari" id = "formulari">
   <Input type = "text" name = "element" id = "element" />
 </ Form>

Independentment del mètode utilitzat per obtenir la referència a un element de formulari, cada element disposa de les següents propietats útils per al desenvolupament de les aplicacions:

• type : indica el tipus d'element que es tracta. Per als elements de tipus <input> ( text , button , checkbox , etc.) coincideix amb el valor del seu atribut type . Per a les llistes desplegables normals (element <select> ) el seu valor és select-one , el que permet diferenciar-les de les llistes que permeten seleccionar diversos elements alhora i el tipus és select-multiple. Finalment, en els elements de tipus <textarea> , el valor de type és textarea .
• form : és una referència directa al formulari al qual pertany l'element. Així, per accedir al formulari d'un element, es pot utilitzar document.getElementById("id_del_elemento").form
• name : obté el valor de l'atribut name de XHTML. Només es pot llegir el seu valor, per la qual cosa no es pot modificar.
• value : permet llegir i modificar el valor de l'atribut value de XHTML. Per als camps de text ( <input type="text"> i <textarea> ) obté el text que ha escrit l'usuari. Per als botons obté el text que es mostra al botó. Per als elements checkbox i radiobutton no és molt útil, com es veurà més endavant

Validació

La principal utilitat de JavaScript en el maneig dels formularis és la validació de les dades introduïdes pels usuaris. Abans d'enviar un formulari al servidor, es recomana validar mitjançant JavaScript les dades inserides per l'usuari. D'aquesta manera, si l'usuari ha comès algun error en omplir el formulari, se li pot notificar de forma instantània, sense necessitat d'esperar la resposta del servidor.

Notificar els errors de forma immediata mitjançant JavaScript millora la satisfacció de l'usuari amb l'aplicació (el que tècnicament es coneix com "millorar l'experiència d'usuari") i ajuda a reduir la càrrega de processament al servidor.

Normalment, la validació d'un formulari consisteix en cridar a una funció de validació quan l'usuari prem sobre el botó d'enviament del formulari. En aquesta funció, es comproven si els valors que ha introduït l'usuari compleixen les restriccions imposades per l'aplicació.

Encara que hi ha tantes possibles comprovacions com a elements de formulari diferents, algunes comprovacions són molt habituals: que ompli un camp obligatori, que se seleccioni el valor d'una llista desplegable, que l'adreça d'email indicada sigui correcta, que la data introduïda sigui lògica, que s'hagi introduït un nombre on així es requereix, etc.

A continuació es mostra el codi JavaScript bàsic necessari per incorporar la validació a un formulari:

<form name="formulario"  onSubmit="return ValidaCampos()">
 Teléfono: <input type="text" name="telefono" size="15" maxlength="15"><br>
           <input type="submit" value="Enviar" name="enviar">
</form>

I l'esquema de la funció validacio() és el següent:

function ValidaCampos() {
   var expresion_regular_telefono = /^[89](\d-\d.)\d{3}\.\d{3}$/;  
// 9 cifras numéricas.
// Usaremos el método "test" de las expresiones regulares:
      if (expresion_regular_telefono.test(formulario.telefono.value) == false) {
                alert('Campo TELEFONO no válido.');
                return false; // sale de la función y NO envía el formulario
                }
                
                alert('Gracias por rellenar nuestro formulario correctamente.');
                return true; // sale de la función y SÍ envía el formulario
            }

El funcionament d'aquesta tècnica de validació es basa en el comportament de l'esdeveniment onsubmit de JavaScript. Igual que altres esdeveniments com onclick i onkeypress , l'esdeveniment onsubmit varia el seu comportament en funció del valor que retorna.

Així, si l'esdeveniment onsubmit torna el valor true , el formulari s'envia com ho faria normalment. No obstant això, si l'esdeveniment onsubmit torna el valor false , el formulari no s'envia. La clau d'aquesta tècnica consisteix a comprovar tots i cadascun dels elements del formulari. En tant es troba un element incorrecte, es torna el valor false . Si no es troba cap error, es torna el valor true.

Per tant, en primer lloc es defineix l'esdeveniment onsubmit del formulari com:

onsubmit = "return validacio()"

Com el codi JavaScript retorna el valor resultant de la funció validacio() , el formulari només s'enviarà al servidor si aquesta funció retorna true . En el cas que la funció validacio() retorni false , el formulari romandrà sense enviar.

Dins de la funció validacio() es comproven totes les condicions imposades per l'aplicació. Quan no es compleix una condició, es retorna false i per tant el formulari no s'envia. Si s'arriba al final de la funció, totes les condicions s'han complert correctament, de manera que es retorna true i el formulari s'envia.

La notificació dels errors comesos depèn del disseny de cada aplicació. En el codi de l'exemple anterior simplement es mostren missatges mitjançant la funció alert() indicant l'error produït. Les aplicacions web ben dissenyades mostren cada missatge d'error al costat de l'element de formulari corresponent i també solen mostrar un missatge principal indicant que el formulari conté errors.

Un cop definit l'esquema de la funció validacio() , s'ha d'afegir a aquesta funció el codi corresponent a totes les comprovacions que es realitzen sobre els elements del formulari.

Validació formularis HTML5

Validació formularis HTML5 I

Validació formularis HTML5 II

Exercicis de Validació

Validar un camp de text Obligatori

Es tracta de forçar l'usuari a introduir un valor en un quadre de text o textarea en què sigui obligatori.Perquè es doni per completat un camp de text obligatori, es comprova que el valor introduït sigui vàlid, que el nombre de caràcters introduït sigui més gran que zero i que no s'hagin introduït només espais en blanc. El text introduït tingui una longitud superior a zero caràcters, és a dir, que no sigui un text buit i per últim, el valor introduït per l'usuari no només estigui format per espais en blanc.

solució_valor_quadre_text

Validar un camp de text amb valors numèrics

Es tracta d'obligar l'usuari a introduir un valor numèric en un quadre de text.

solucio_camp_text

Validar que s'ha seleccionat una opció d'una llista

Es tracta d'obligar l'usuari a seleccionar un element d'una llista desplegable.

solucio_llista

Validar una adreça de correu electrònic

Es tracta d'obligar l'usuari a introduir una adreça de correu amb un format vàlid. Per tant, el que es comprova és que la direcció sembli vàlida, ja que no es comprova si es tracta d'un compte de correu electrònic real i operativa. La comprovació es realitza novament mitjançant les expressions regulars, ja que les adreces de correu electrònic vàlides poden ser molt diferents.

solucio_correu_electronic

Validar una data

Les dates solen ser els camps de formulari més complicats de validar per la multitud de formes diferents en què es poden introduir.

Validar un número de DNI

Es tracta de comprovar que el nombre proporcionat per l'usuari es correspon amb un nombre vàlid de document nacional d'identitat o DNI. Encara que per cada país o regió els requisits del document d'identitat de les persones poden variar, a continuació es mostra un exemple genèric fàcilment adaptable. La validació no només ha de comprovar que el nombre estigui format per vuit xifres i una lletra, sinó que també cal comprovar que la lletra indicada és correcta per al número introduït.

solució_dni

Validar un número de telèfon

Els números de telèfon poden ser indicats de formes molt diferents: amb prefix nacional, amb prefix internacional, agrupat per parells, separant els números amb guions, etc.

solucio_telefon

Validar que un checkbox ha estat seleccionat

• a)Es tracta de validar si un element de tipus checkbox s'ha de seleccionar de forma obligatòria.
• b)Es tracta de validar si tots els checkbox del formulari han estat seleccionats.

Validar que un radiobutton ha estat seleccionat

Encara que es tracta d'un cas similar al dels checkbox, la validació dels radiobutton presenta una diferència important: en general, la comprovació que es realitza és que l'usuari hagi seleccionat algun radiobutton dels que formen un determinat grup.

Bibliografia

Experiments amb Expresions Regulars: http://www.regexplanet.com/advanced/javascript/index.html

John Resig, Bear Bibeault, "Secrets of the Javascript Ninja", Manning Publications, 2012. ISBN 193398869X

Introducció a Javascript

Expressions Regulars a Mozilla