Tutorial Expresion Es Regulares Javascript

TUTORIAL SOBRE EXPRESIONES REGULARES EN JAVASCRIPT PARA VALIDACIN DE CAMPOS EN FORMULARIOS HTML
Pgina 1 de 6
TUTORIAL SOBRE EXPRESIONES REGULARES EN JAVASCRIPT PARA VALIDACIN DE CAMPOS EN FORMULARIOS HTML:
Ejemplos de expresiones regulares (http://www.lsi.us.es/docencia/get.php?id=1795): NOTA: Las expresiones regulares se encuentran delimitadas por el carcter barra (/).
Nmero de telfono nacional (sin espacios)
Ejemplo: 954556817 Exp. Reg.: /^\d{9}$/ o tambin /^[0-9]{9}$/ Comienza (^) por una cifra numrica (\d) de la que habr 9 ocurrencias ({9}) y aqu acabar la cadena ($). NOTA: La expresin \d equivale a la expresin [0-9], y representa a un carcter de una cifra numrica, es decir, 0 o1 o 2 o 3 o 9.
Nmero de telfono internacional
Ejemplo: (+34)954556817 Exp. Reg.: /^$\+\d{2,3}$\d{9}$/ Comienza (^) por un parntesis ($), le sigue un carcter + (\+), despus una cifra numrica (\d) de la que habr 2 o 3 ocurrencias ({2,3}), despus le sigue un parntesis de cierre ($), luego viene una cifra numrica de la que habr 9 ocurrencias ({9}), y aqu acabar la cadena ($). NOTA: Puesto que los caracteres: (, ), +, *, -, \, {, }, |, etc tienen significados especiales dentro de una expresin regular, para considerarlos como caracteres normales que debe incluir una cadena deben de ir precedidos del carcter 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 numrica (\d) de la que habr 2 ocurrencias ({2}), despus una barra (\/), seguida de 2 cifras numricas, otra barra, 4 cifras numricas, y aqu acabar la cadena ($).
Cdigo postal
Ejemplo: 41012 Exp. Reg.: /^\d{5}$/ nicamente contiene 5 cifras numricas.
Email
Ejemplo: usuario@servidor.com Exp. Reg.: /^(.+\@.+\..+)$/ Comienza (^) por caracteres cualesquiera que no sean salto de lnea (.) de los que habr al menos una ocurrencia (+), despus el carcter arroba (\@), seguido de al menos un carcter que no podr ser el salto de lnea (.+), despus viene el carcter punto (\.), seguido de al menos un carcter donde ninguno podr ser el salto de lnea (.+), y aqu acabar la cadena ($).
Nmero entero
Ejemplo: -123 Exp. Reg.: /^(\+|\-)?\d+$/ o tambin /^[+-]?\d+$/ o tambin /^[+-]?[0-9]+$/ Comienza (^) opcionalmente (?) por el carcter + o por el carcter -, por lo que puede que incluso no aparezcan ninguno de los 2; seguidamente vienen caracteres de cifras numricas (\d) de los que al menos debe introducirse uno (+), y aqu acabar la cadena ($).
Nmero real
Ejemplo: -123.35 o 7,4 o 8 Exp. Reg.: /^[+-]?\d+([,.]\d+)?$/ Comienza (^) opcionalmente (?) por el carcter + o por el carcter -, por lo que puede que incluso no aparezcan ninguno de los 2; seguidamente vienen caracteres de cifras numricas (\d) de los que al menos debe introducirse uno (+), y, opcionalmente, aparecer un punto o coma decimal seguido de al menos una cifra numrica, y aqu acabar la cadena ($).
Pgina 2 de 6
Ejemplo de uso en un formulario: <html> <head> <title>Ejemplo de validacin de un formulario con campos tipo telfono y tipo dni usando expresiones regulares</title> <script> function ValidaCampos(formulario) { var expresion_regular_telefono = /^\d{9}$/; // 9 cifras numricas. var expresion_regular_dni = /^\d{8}[a-zA-Z]$/; // 8 cifras numricas ms un carcter alfabtico. // Usaremos el mtodo "test" de las expresiones regulares: if(expresion_regular_telefono.test(formulario.telefono.value)==false) { alert('Campo TELEFONO no vlido.'); return false; // sale de la funcin y NO enva el formulario } if(expresion_regular_dni.test(formulario.dni.value)==false) { alert('Campo DNI no vlido.'); return false; // sale de la funcin y NO enva el formulario } alert('Gracias por rellenar nuestro formulario correctamente.'); return true; // sale de la funcin y S enva el formulario } </script> </head> <body> <form name="formulario" action="recoger_datos.php" onSubmit="return ValidaCampos(this)"> DNI:<input type="text" name="dni" size="9" maxlength="9"><br> Telfono: <input type="text" name="telefono" size="9" maxlength="9"><br> <input type="submit" value="Enviar" name="enviar"> </form> </body> </html>
http://www.elcodigo.net/tutoriales/jsavanzado/jsavanzado5.html 1. Introduccin Las Expresiones Regulares son patrones que permiten buscar coincidencias con combinaciones de caracteres dentro de cadenas de texto. Estos patrones pueden utilizarse con los metodos exec y text del objeto RegExp, y con los metodos match, replace, search y split del objeto String. Las expresiones regulares estn disponibles a partir de la versin 1.2 de JavaScript (Netscape Navigator 4.x y Microsoft Internet Explorer 4.x). 2. Creacin de una expresin regular Par crear una expresin regular, puede utilizarse dos mtodos: 1) La primera opcin compila la expresin regular cuando se evala el script, por lo que es mejor cuando la expresin regular es una constante (delimitada por barras) y no va a variar a lo largo de la ejecucin del programa. exp_reg1 = /^[0-9]+/; La variable se convierte en una variable del tipo expresin regular, por tanto, puede usarse con ella el mtodo test para validar la cadena. if(exp_reg1.test(123)==false)
Pgina 3 de 6
2) La segunda opcin compila la expresin regular en tiempo de ejecucin (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 expresin regular. exp_reg3 = new RegExp(formu.campo1.value); // exp_reg3 tendr como expresin regular el contenido del campo campo1 del formulario formu. exp_reg4 = new RegExp(cadena1); // exp_reg4 tendr como expresin regular el contenido de la variable de cadena cadena1. if(exp_reg3.test(123)==false) // Ahora podr usarse el mtodo test en las variables. 3. Creacin de los patrones Una expresin regular es una combinacin de caracteres normales con caracteres especiales. Por ejemplo, la expresin regular /ejemplo/ encontrar la subcadena "ejemplo" dentro de la cadena "Esto es un ejemplo.". Con la utilizacin 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 ms importantes, as como su significado y un ejemplo de aplicacin:
Carcter \ Significado Indica que el siguiente carcter normal debe ser considerado como especial. Tambin se utiliza como carcter de escape para los caracteres especiales. Se utiliza para encontrar el comienzo de una lnea. Ejemplo /\n/ encuentra un salto de lnea. Si se desea buscar el carcter '\', habr que utilizar /\\/ /a/ encuentra una 'a' en cualquier lugar, pero /â/ haya una coincidencia con el carcter 'a' si se encuentra al comienzo de una lnea. /hola*/ encuentra coincidencias en las cadena "hol", "hola" y "holaaaa".
$ * + ? .
Se utiliza para encontrar el final de una lnea. Encuentra coincidencia del carcter que le precede cuando aparece 0 o ms veces en la cadena. Igual que el '*', pero cuando el carcter aparece 1 o ms veces. Igual que el '*', pero cuando el carcter aparece 0 o 1 vez. Se utiliza para encontrar cualquier carcter que no sea un carcter de nueva lnea. Encuentra coincidencias con 'x', y recuerda el patrn para su posterior utilizacin. Encuentra coincidencia si aparece el carcter 'x' o el carcter 'y'. Encuentra coincidencia si hay exactamente n apariciones del carcter que precede. Encuentra coincidencia si hay al menos n apariciones del carcter que precede. Encuentra coincidencia si hay como mnimo n y como mximo m apariciones del carcter que precede. Representa un conjunto de caracteres individuales.
/.sa/ encontrar coincidencias en las cadenas "casa", "cosa" y "cesa", pero no en "asa".
(x) x|y {n}
Por ejemplo, /a{3}/ encuentra coincidencia en "holaaa", pero no en "holaa".
{n,} {n,m} [xyz]
/[aeiou]/ encuentra coincidencias con cualquier vocal. Si se utiliza el carcter '-' se pueden definir rangos. Por ejemplo, /[0-3]/ encuentra coincidencias si aparecen en la cadena los caracteres '0', '1', '2' o '3'.
[^xyz]
Representa un conjunto de caracteres individuales complementario. Encuentra coincidencias con aquellos
Pgina 4 de 6
[\b] \b
caracteres que NO aparezcan en el conjunto. Al igual que en el caso anterior, con el '-' se pueden definir rangos. Encuentra coincidencia con el carcter de retroceso. Encuentra coincidencias con los lmites de las palabras.
Por ejemplo, /\bola/ encuentra la cadena "ola" en "Viene una ola", pero no en "Viene una cola".
4. Aplicacin a la validacin de campos de formularios

Una de las aplicaciones ms habituales de las expresiones regulares es la validacin de campos de formularios. Para ello, se crea una funcin de validacin que contiene una expresin regular por cada tipo de campo que se desea validar. Por ejemplo, podemos crear una expresin regular para campos de telfono, que compruebe que se han introducido slo nmeros, espacios o el carcter '-' en el campo correspondiente. Para validar los campos se utiliza el mtodo test de la expresin regular correspondiente. Este mtodo compara la cadena que se le pasa como argumento con el patrn de la expresin regular. El siguiente ejemplo valida campos de telfono y direcciones de correo electrnico: function ValidaCampos(formu) { //expresin regular para telfonos //permite campos vacos y guiones var er_tlfono = /(^[0-9\s\+\-])+$/; //expresin regular para emails var er_email = /^(.+\@.+\..+)$/; //comprueba campo tlfono de formu //usa el mtodo test de expresin regular if(!er_tlfono.test(formu.tlfono.value)) { alert('Campo TELEFONO no vlido.'); return false; //no submit } //comprueba el campo email de formu //usa mtodo test de la expresin regular if(!er_email.test(formu.email.value)) { alert('Campo E-MAIL no vlido.'); return false; //no submit } return trae; } La funcin de validacin se invoca utilizando el evento onSubmit del formulario. Cuando la validacin no da positivo, la funcin de validacin 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 quedara as: <form name="formu" action="datos.php" onSubmit="return ValidaCampos(this)"> El gran inconveniente de este procedimiento es que slo funciona a partir de las versiones 4.0 de los navegadores de Microsoft y Netscape. //pasa al submit
Pgina 5 de 6
Para comprobar expresiones regulares, puede usarse la siguiente pgina: http://gollum.inforg.uniovi.es/aii/valida_regexp.php Donde en un cuadro de texto se escribe la expresin regular, en el siguiente se escribe la cadena a validar, y al pulsar el botn Verificar cadena de entrada se muestra si dicha cadena cumple el patrn que especifica la expresin regular.
Segn otro autor:

http://www.webintenta.com/validacion-con-expresiones-regulares-y-javascript.html
Validacin con expresiones regulares y Javascript

Las expresiones regulares son modelos que describen las combinaciones de caracteres en el texto. Se podran definir como una serie de caracteres que forman un patrn, que representan a otro grupo de caracteres mayor, de tal forma que podemos comparar el patrn con otros conjuntos de caracteres para ver las coincidencias. Las expresiones regulares pueden utilizarse en mltiples lenguajes de programacin pero en esta entrada vamos a ver un ejemplo de validacin de formularios mediante Javascript y haciendo uso de expresiones regulares. La tabla siguiente contiene los caracteres especiales de las expresiones regulares: Carcter Texto buscado Principio de entrada o lnea. ^ Fin de entrada o lnea. $ El carcter anterior 0 o ms veces. * El carcter anterior 1 o ms veces. + El carcter anterior una vez como mximo (es decir, indica que el carcter anterior es opcional). ? Cualquier carcter individual, salvo el de salto de lnea. . x o y. x|y Exactamente n apariciones del carcter anterior. {n} Como mnimo n y como mximo m apariciones del carcter anterior. {n,m} [abc] [âbc] \b \B \d \D \f \n \r \s \S \t \w \W
Cualquiera de los caracteres entre corchetes. Especifique un rango de caracteres con un guin (por ejemplo, [a-f] es equivalente a [abcdef]). Cualquier carcter que no est entre corchetes. Especifique un rango de caracteres con un guin (por ejemplo, [â-f] es equivalente a [âbcdef]). Lmite de palabra (como un espacio o un retorno de carro). Cualquiera que no sea un lmite de palabra. Cualquier carcter de dgito. Equivalente a [0-9]. Cualquier carcter que no sea de dgito. Equivalente a [^0-9]. Salto de pgina. Salto de lnea. Retorno de carro. Cualquier carcter individual de espacio en blanco (espacios, tabulaciones, saltos de pgina o saltos de lnea). Cualquier carcter individual que no sea un espacio en blanco. Tabulacin. Cualquier carcter alfanumrico, incluido el de subrayado. Equivalente a [A-Za-z0-9_]. Cualquier carcter que no sea alfanumrico. Equivalente a [Â-Za-z0-9_].
La tabla siguiente contiene algunos de los patrones ms utilizados a la hora de validar formularios:
[a-z] Letra minscula Correo electrnico /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/ ^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)( [a-zA-Z0-9\-\.\?\,\\/\\\+&%\$#_]*)?$ URL
Pgina 6 de 6
Fecha Hora Tarjeta de crdito Nmero telfono Cdigo postal
^\d{1,2}\/\d{1,2}\/\d{2,4}$ ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$ ^((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}$ ^[0-9]{2,3}-? ?[0-9]{6,7}$ ^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$
Una pgina web de ejemplo llamada index.php que permite comprobar si una cadena es validada por una expresin regular de JavaScript podra ser la siguiente (si la cadena no es vlida muestra un mensaje de error y no enva los datos del formulario): <html> <head> <title>Comprobacin de si una cadena cumple el patrn de una expresin regular</title> <? // Si recibe los campos del formulario: if (isset($_GET['expresion']) && isset($_GET['cadena']) && isset($_GET['comprobar'])) { echo "</head><body>\n"; echo "DATOS OBTENIDOS:<BR>\n"; echo "Expresin Regular: <b>" . $_GET['expresion'] . "</b><BR>\n"; echo "Cadena vlida: <b>" . $_GET['cadena'] . "</b><BR>\n"; echo "<br><a href='index.php'>Volver</a>\n"; echo "</body></html>"; } // Si no recibe los campos del formulario: else{ ?> <script> function valida(formulario) { expresion_regular = new RegExp(formulario.expresion.value); // Usamos el mtodo "test" de la expresin regular if(expresion_regular.test(formulario.cadena.value)==false) { alert('La cadena no cumple el patrn de la expresin regular.'); return false; //no enva el formulario } return true; // Enva el formulario } </script> </head> <body> Introduzca una expresin regular (por ejemplo: <b>^[0-9]{9}$</b>) y una cadena (por ejemplo: <b>123456789</b>), para comprobar si dicha cadena respeta el patrn que especifica la expresin regular (es decir, si la expresin regular valida dicha cadena).<br> <form name="formulario" action="index.php" method="get" onSubmit="return valida(formulario)"> Expresin Regular:<input type="text" name="expresion" size="20"><br> Cadena a Comprobar: <input type="text" name="cadena" size="20"><br> <input type="submit" value="Comprobar" name="comprobar"> </form> </body> </html> <? } //else (Si no reciba los campos del formulario) ?>

Tutorial Expresion Es Regulares Javascript

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tutorial Expresion Es Regulares Javascript

Încărcat de

Drepturi de autor:

Formate disponibile

TUTORIAL SOBRE EXPRESIONES REGULARES EN JAVASCRIPT PARA VALIDACIN DE CAMPOS EN FORMULARIOS HTML

Nmero de telfono internacional

Fecha con formato DD/MM/AAAA

Ejemplo: 41012 Exp. Reg.: /^\d{5}$/ nicamente contiene 5 cifras numricas.

(x) x|y {n}

Por ejemplo, /a{3}/ encuentra coincidencia en "holaaa", pero no en "holaa".

{n,} {n,m} [xyz]

Representa un conjunto de caracteres individuales complementario. Encuentra coincidencias con aquellos

4. Aplicacin a la validacin de campos de formularios

Segn otro autor:

Validacin con expresiones regulares y Javascript

Fecha Hora Tarjeta de crdito Nmero telfono Cdigo postal

^\d{1,2}\/\d{1,2}\/\d{2,4}$ ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$ ^((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}$ ^[0-9]{2,3}-? ?[0-9]{6,7}$ ^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$

S-ar putea să vă placă și