11107 Suscriptores al Feed del Blog
87 Suscriptores al Feed de Anotaciones Breves
45 usuarios online
Mauricio Campos en 50 preguntas y respuestas de entrevistas de trabajo
Validación con expresiones regulares y Javascript
7 COMENTARIOS - Publicado hace 38 meses - Clasificado en: JAVASCRIPT, TUTORIALESLas expresiones regulares son modelos que describen las combinaciones de caracteres en el texto. Se podrÃan definir como una serie de carácteres que forman un patrón, que representan a otro grupo de carácteres mayor, de tal forma que podemos comparar el patrón con otros conjuntos de carácteres 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.
Un buen tutorial para iniciarse en el manejo de expresiones regulares lo podemos encontrar en Desarrolloweb. Para realizar el ejemplo siguiente no hay porque conocer en profundidad su manejo. A continuación muestro una serie de tablas a modo de chuleta para que podamos utilizarlas con un simple corta y pega.
La tabla siguiente contiene los caracteres especiales de las expresiones regulares.
| Carácter | Texto buscado |
|---|---|
^ |
Principio de entrada o lÃnea. |
$ |
Fin de entrada o lÃnea. |
* |
El carácter anterior 0 o más veces. |
+ |
El carácter anterior 1 o más veces. |
? |
El carácter anterior una vez como máximo (es decir, indica que el carácter anterior es opcional). |
. |
Cualquier carácter individual, salvo el de salto de lÃnea. |
x|y |
x o y. |
{n} |
Exactamente n apariciones del carácter anterior. |
{n,m} |
Como mÃnimo n y como máximo m apariciones del carácter anterior. |
[abc] |
Cualquiera de los caracteres entre corchetes. Especifique un rango de caracteres con un guión (por ejemplo, [a-f] es equivalente a [abcdef]). |
[^abc] |
Cualquier carácter que no esté entre corchetes. Especifique un rango de caracteres con un guión (por ejemplo, [^a-f] es equivalente a [^abcdef]). |
\b |
LÃmite de palabra (como un espacio o un retorno de carro). |
\B |
Cualquiera que no sea un lÃmite de palabra. |
\d |
Cualquier carácter de dÃgito. Equivalente a [0-9]. |
\D |
Cualquier carácter que no sea de dÃgito. Equivalente a [^0-9]. |
\f |
Salto de página. |
\n |
Salto de lÃnea. |
\r |
Retorno de carro. |
\s |
Cualquier carácter individual de espacio en blanco (espacios, tabulaciones, saltos de página o saltos de lÃnea). |
\S |
Cualquier carácter individual que no sea un espacio en blanco. |
\t |
Tabulación. |
\w |
Cualquier carácter alfanumérico, incluido el de subrayado. Equivalente a [A-Za-z0-9_]. |
\W |
Cualquier carácter que no sea alfanumérico. Equivalente a [^A-Za-z0-9_]. |
La tabla siguiente contiene algunos de los patrones más utilizados a la hora de validar formularios. Si alguien conoce alguna expresión regular más -que pueda ser útil en la validación de formularios- la puede poner en los comentarios y yo la incorporaré a esta tabla.
| Cualquier letra en minuscula | [a-z] |
| Entero | ^(?:\+|-)?\d+$ |
Correo electrónico |
/[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/ |
URL |
^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)( [a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$ |
Contraseña segura |
(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$ |
Fecha |
^\d{1,2}\/\d{1,2}\/\d{2,4}$ |
| Hora | ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$ (Por ejemplo 10:45:23) |
Número tarjeta de crédito |
^((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}$ |
Número teléfono |
^[0-9]{2,3}-? ?[0-9]{6,7}$ |
Código postal |
^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$ |
Certificado Identificación Fiscal |
^(X(-|\.)?0?\d{7}(-|\.)?[A-Z]|[A-Z](-|\.)?\d{7}(-|\.)? [0-9A-Z]|\d{8}(-|\.)?[A-Z])$ |
Un ejemplo para controlar que la clave que se introduce sea segura podrÃa ser:
<html >
<head>
<title></title>
<script type="text/javascript">
<!--
function validatePass(campo) {
var RegExPattern = /(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$/;
var errorMessage = 'Password Incorrecta.';
if ((campo.value.match(RegExPattern)) && (campo.value!='')) {
alert('Password Correcta');
} else {
alert(errorMessage);
campo.focus();
}
}
//-->
</script>
</head>
<body>
<form action="#" method="post">
<p><input type="text" name="date" onblur="validatePass(this);">
<input name="button" type="button" value="Probar">
<br>
Entre 8 y 10 caracteres, por lo menos un digito y un alfanumérico, y no puede contener caracteres espaciales
</form>
</body>
</html>
Ver ejemplo en funcionamiento » »
Algunas entradas relacionadas:
- Links 05-05-2008
- Combos dependientes I
- Tablesorter: Ordenar tablas de una forma sencilla
- Tutoriales y ejemplos de Javascript
- El objeto string en Javascript II
- Arrays en Javascript ( Parte I)
- Cambiar propiedades CSS con JQuery
También te puede interesar:
|
| Usable y accesible: Argumentos para vender accesibilidad web |
|
|
COMENTARIOS
 |
Publicado hace 10 meses Maria Teresa - Excelente!.... justo lo que necesitaba, muchisimas gracias por el aporte. |
 |
Publicado hace 10 meses charlessmori - Excelente... el mundo de las expresiones regulares es complejÃsimo y súper útil.... gracias por la infor. Charless |
 |
Publicado hace 6 meses mary - probé la expresión regular de contraseñas seguras pero no me funciona. La uso desde IE 7. Puede ser por esto? Gracias |
 |
Publicado hace 3 meses Peter - Muchas gracias excelente explicacion, es lo que estaba buscando. |
 |
Publicado hace 1 mes Carles - http://www.carlesmauri.es Hola! La expresión regular para el correo electrónico no va del todo bien y es que despues del punto en teoria solo debe aceptar de 2 a 4 caracteres verdad? yo lo he probado y por ejemplo "micorreo@micorreo.infon" lo ha aceptado. Aquà os dejo esta otra expresión regular que controla ese aspecto: new RegExp (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/); yo la utilizo en mis formularios y por lo que se va bien Un saludo! Carles |
|
|
Publicado hace 4 semanas Moni - Gracias por el aporte me sirvio mucho claro con algunas modificaciones para adecuarla a mi codigo!! |
 |
Publicado hace 2 semanas Sergyo - http://www.recargartinta.com Excelente. Necesitaba validar el correo electronico...!! Gracias, por ser muy claro en el articulo. |
