miércoles, 10 de julio de 2013

Uso de Expresiones Regulares para Validaciones en JavaScript

En esta entrada explicaré que son las expresiones regulares y como podemos utilizarlas para validar desde contraseñas(como veremos en esta entrada) hasta URLs y Emails.

En su forma más simple una expresión regular es una serie de instrucciones que le dicen al lenguaje de programación como debe estar estructurada una cadena de texto, es decir, que caracteres puede o no usar, la longitud, etc.

Lo que tenemos que aprender entonces es como se dictan esas reglas y como comparamos una cadena para ver si cumple con estas reglas, para eso veamos lo siguiente:


Las 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.
La tabla siguiente contiene los caracteres especiales de las expresiones regulares.
CarácterTexto 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})$
(Entre 8 y 10 caracteres, por lo menos un digito y un alfanumérico, y no puede contener caracteres espaciales)
Fecha
^\d{1,2}\/\d{1,2}\/\d{2,4}$
(Por ejemplo 01/01/2007)
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> 

Como pueden ver en el script lo que hacemos es decir que condiciones debe tener una constraseña para considerarla como segura, en estre caso entre 8 y 10 caracteres, números, etc.
Bien eso es todo por ahora y nos leemos luego!!!

No hay comentarios:

Publicar un comentario en la entrada