martes, 10 de febrero de 2015

Parte 1306.1 Segundo ejercicio de formulario.

SEGUNDO EJERCICIO FORMULARIO:



Nombre:
Introducir entre 3 y 10 carácteres.
/^[a-zA-Z]{3,10}$/

Con el elemento onblur, si está mal escrito al salir el foco, se pondrá de color rojo el div y no te dejará salir del campo.
Cuando esté bien escrito volverá a ponerse de color blanco y dejará salirte del campo.


Apellidos:
Introducir dos apellidos:
/^[A-Za-záéíóúñ]{2,}(\s][A-Za-záéíóúñ]{2,})+$/

Con el elemento onblur, si está mal escrito al salir el foco, se pondrá de color rojo el div y no te dejará salir del campo.
Cuando esté bien escrito volverá a ponerse de color blanco y dejará salirte del campo.


Parte 1306.1 Primer ejercicio formulario.

PRIMER EJERCICIO FORMULARIO




BOCETO:

Nombre:
Introducir entre 3 y 10 carácteres.
/^[a-zA-Z]{3,10}$/



Apellidos:
Introducir dos apellidos:
/^[A-Za-záéíóúñ]{2,}(\s][A-Za-záéíóúñ]{2,})+$/



Correo electrónico:
Ya lo valida el propio ordenador.



Teléfono:
Introducir con 9 números.
/^\d{9ç$/



Mensaje:
Introducir entre 9 y 150 carácteres.
/^[a-zA-Z+{9,150}$/



Parte 1306.1 Tutorial sobre Expresiones regulares en Javascript para validación de campos en formularios Html.

Las expresiones regulares se encuentran delimitadas por el carácter barra (/). 


– Número de teléfono nacional (sin espacios) 

• Ejemplo: 954556817 

• Exp. Reg.: /^\d{9}$/ o también /^[0-9]{9}$/ 


Comienza (^) por una cifra numérica (\d) de la que habrá 9 ocurrencias ({9}) y aquí acabará la cadena ($). 
NOTA: La expresión “\d” equivale a la expresión “[0-9]”, y representa a un carácter de una cifra numérica, es decir, ‘0’ o’1’ o ‘2’ o ‘3’ ... o ‘9’.

– Número de teléfono internacional

• Ejemplo: (+34)954556817 

• Exp. Reg.: /^\(\+\d{2,3}\)\d{9}$/ 

Comienza (^) por un paréntesis (\(), le sigue un carácter + (\+), después una cifra numérica (\d) de la que habrá 
2 o 3 ocurrencias ({2,3}), después le sigue un paréntesis de cierre (\)), luego viene una cifra numérica de la que habrá 9 ocurrencias ({9}), y aquí acabará la cadena ($). 
NOTA: Puesto que los caracteres: (, ), +, *, -, \, {, }, |, etc... tienen significados especiales dentro de una expresión regular, para considerarlos como caracteres normales que debe incluir una cadena deben de ir precedidos del carácter de barra invertida \. 


– Fecha con formato DD/MM/AAAA

• Ejemplo: 09/01/2006 

• Exp. Reg.: /^\d{2}\/\d{2}\/\d{4}$/ 

Comienza (^) por una cifra numérica (\d) de la que habrá 2 ocurrencias ({2}), después una barra (\/), seguida de 
2 cifras numéricas, otra barra, 4 cifras numéricas, y aquí acabará la cadena ($). 


– Código postal

• Ejemplo: 41012 

• Exp. Reg.: /^\d{5}$/ 

Únicamente contiene 5 cifras numéricas. 


– Email

• Ejemplo: usuario@servidor.com 

• Exp. Reg.: /^(.+\@.+\..+)$/ 

Comienza (^) por caracteres cualesquiera que no sean salto de línea (.) de los que habrá al menos una ocurrencia (+), después el carácter arroba (\@), seguido de al menos un carácter que no podrá ser el salto de línea (.+), después viene el carácter punto (\.), seguido de al menos un carácter donde ninguno podrá ser el salto de línea  (.+), y aquí acabará la cadena ($). 


– Número entero

• Ejemplo: -123 

• Exp. Reg.: /^(\+|\-)?\d+$/ o también /^[+-]?\d+$/ o también /^[+-]?[0-9]+$/ 

Comienza (^) opcionalmente (?) por el carácter + o por el carácter -, por lo que puede que incluso no aparezcan ninguno de los 2; seguidamente vienen caracteres de cifras numéricas (\d) de los que al menos debe introducirse uno (+), y aquí acabará la cadena ($). 


– Número real

• Ejemplo: -123.35 o 7,4 o 8 

• Exp. Reg.: /^[+-]?\d+([,.]\d+)?$/ 

Comienza (^) opcionalmente (?) por el carácter + o por el carácter -, por lo que puede que incluso no aparezcan ninguno de los 2; seguidamente vienen caracteres de cifras numéricas (\d) de los que al menos debe introducirse uno (+), y, opcionalmente, aparecerá un punto o coma decimal seguido de al menos una cifra numérica, y aquí acabará la cadena ($).



1. Introducción 

Las Expresiones Regulares son patrones que permiten buscar coincidencias con combinaciones de caracteres dentro de cadenas de texto. 

2. Creación de una expresión regular 

Dos métodos: 

1) La primera opción compila la expresión regular cuando se evalúa el script, por lo que es mejor cuando la expresión regular es una constante (delimitada por barras) y no va a variar a lo largo de la ejecución del programa. 

exp_reg1 = /^[0-9]+/; 

La variable se convierte en una variable del tipo expresión regular, por tanto, puede usarse con ella el método test para validar la cadena. 


 if(exp_reg1.test(“123”)==false)

2) La segunda opción compila la expresión regular en tiempo de ejecución (guardada en una variable de tipo cadena o en un campo de un formulario). Aquí los delimitadores son las comillas dobles, no las barras. 

exp_reg2 = new RegExp("^[0-9]+"); // Ahora exp_reg2 es una variable que contiene una expresión regular. 

 exp_reg3 = new RegExp(formu.campo1.value); 

// exp_reg3 tendrá como expresión regular el contenido del campo campo1 del formulario formu. 

exp_reg4 = new RegExp(cadena1); 

// exp_reg4 tendrá como expresión regular el contenido de la variable de cadena cadena1. 


if(exp_reg3.test(“123”)==false) // Ahora podrá usarse el método test en las variables.

3. Creación de los patrones 

Una expresión regular es una combinación de caracteres normales con caracteres especiales. Por ejemplo, la expresión regular /ejemplo/ encontrará la subcadena "ejemplo" dentro de la cadena "Esto es un ejemplo.". 

Con la utilización de caracteres especiales se consigue encontrar coincidencias con los retornos de carro, los tabuladores, el inicio o el final de las palabras, las repeticiones de caracteres... 

La siguiente tabla muestra una lista de los caracteres especiales más importantes, así como su significado y un ejemplo de aplicación:



4. Aplicación a la validación de campos de formularios 

Una de las aplicaciones más habituales de las expresiones regulares es la validación de campos de formularios. Para ello, se crea una función de validación que contiene una expresión regular por cada tipo de campo que se desea validar. 

Por ejemplo, podemos crear una expresión regular para campos de teléfono, que compruebe que se han introducido sólo números, espacios o el carácter '-' en el campo correspondiente. 

Para validar los campos se utiliza el método test de la expresión regular correspondiente. Este método compara la cadena que se le pasa como argumento con el patrón de la expresión regular.

La función de validación se invoca utilizando el evento onSubmit del formulario. Cuando la validación no da positivo, la función de validación devuelve false. Esto cancela el submit, de modo que el usuario pueda corregir la entrada incorrecta. En caso contrario, se devuelve true. El tag form quedaría así: 


<form name="formu" action="datos.php" onSubmit="return ValidaCampos(this)">

Validación con expresiones regulares y Javascript:

Las expresiones regulares son modelos que describen las combinaciones de caracteres en el texto. Se podrían definir como una serie de caracteres que forman un patrón, que representan a otro grupo de caracteres mayor, de tal forma que podemos comparar el patrón con otros conjuntos de caracteres para ver las coincidencias. Las expresiones regulares pueden utilizarse en múltiples lenguajes de programación pero en esta entrada vamos a ver un ejemplo de validación de formularios mediante Javascript y haciendo uso de expresiones regulares.





La tabla siguiente contiene algunos de los patrones más utilizados a la hora de validar formularios:




TUTORIAL SOBRE EXPRESIONES REGULARES EN JAVASCRIPT PARA VALIDACIÓN DE CAMPOS EN FORMULARIOS HTML: