viernes, 1 de febrero de 2008

JS Expresiones Regulares

1 - Articulo
2 - Ejemplo


ARTICULO

Como bien sabemos, dentro de javascript, podemos codificar cualquier tipo de función que se amolde a nuestros requisitos, pero podemos perder un tiempo precioso al momento de no conocer todas las opciones de posibilidades de validación que podemos crear.

Si bien es cierto, los validadores de .NET nos permiten mejorar este tema, ya que podemos agregar fácilmente tipos de validadotes de fechas, de números, expresiones regulares, validadotes de existencia de datos, etc. Pero si tenemos que estar haciendo esto en cada una de las interfaces y debemos hacer un cambio de formato de fechas por ejemplo, vamos a ir corrigiendo expresiones regulares por cada una de las interfaces en donde hayamos agregado uno de estos controles???.

Para este tema existe un control que permite asociar funciones javascript creadas por el usuario y centralizar estas en .NET, pero a veces también es un problema.

Ahora, para los que nos gusta mantener un control del código del cliente, les comunico, que hace mucho tiempo esto ha cambiado, ya que podemos definir nuestras propias expresiones regulares en javascript y, podemos llamar estas desde uno de los métodos de html de clientes.

Explico esto, por que antes de encontrarme con esta forma de trabajar, yo definía como 5 funciones para realizar una validación de fecha, lo cual ahora se concentra en una sola función.

La forma de trabajar con expresiones regulares en javascript es muy simple y solo requiere de una variable que concentre la expresión, luego utilizando el método test de javascript, verificamos si el texto que pasamos cumple con la función y este me retorna un resultado (Verdadero o Falso).

Se acabaron las funciones de 20 líneas, ahora todo rápido jejejeje.
Ahora veremos un ejemplo simple de como definir una expresion regulara para ser utlizada en javascript, definiremos una función que permitirá realizar la validación de formato de correo. Ahora bien, ustedes podrán poder esta función dentro del js que quieran y utilizarla en cualquier página que haga una llamada a este js.
primero crearemos una variable que tendrá definida la expresion regular como se muestra a continuación:

var filter=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

La definición de expresiones regulares en javascript, siempre deben empezar en /^ y terminar en *$/; este punto es muy importante!!!.

Lo que exista dentro de estos símbolos será la expresión regular

Ahora bien, ya tenemos definida la expresión, ahora debemos conocer como funciona, para ello, vamos a definir la condición, esto es muy facil

If (¡filter.test(‘texto a validar’))
{

//accion a seguir
}

Si desean ver la función completa, la fueden obtener a continuación

function funValidarEmail(oEmail){
var bOk = true;
var s = oEmail.value;

// se define una expresion regular con la cual se evaluará el formato del email
var filter=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

// verificamos que el email cumpla con el formato requerido
if (!filter.test(s)){
alert('mensaje de error');
oEmail.value="";
oEmail.focus();
bOk = false;
}
return bOk;
}

Comentemos el código.

Como buen desarrollador, si tenemos una función que retorna valor y este debe ser devuelto, siempre definiremos una función con valor verdadero para retornar, en el caso de que la opción no se cumpla se cambia el valor (esta variable es bOK). A esta función, le pasamos el objeto que deseamos controlar en html, es por esto que se observa te la variavle de entrada tiene propiedades asociadas, como el value, focus(), etc. Si no se cumple la validación podemos retornar un mensaje, limpiar el objeto de html y posicionarnos en el.
Bueno como ven, ya no necesito crear una función específica con un array para guardar los caracteres que debo validar, me basta con la Expresion regular.
A continuación adjunto otras definiciones de expresiones regulares.
chauuu....

1 - Validación de teléfono con formato 99-999-9999

var filter =/^\d{2}-\d{3}-\d{4}$/;


2 - validación de texto con caracteres permitidos a-z, A-Z, 0-9, '.', '-', ' '
PD la definición w representa string


var filter =/^\w+([-+.+ +1+2+3+4+5+6+7+8+9+0]\w+)*$/;


Espero que se diviertan con las regular expressions

No hay comentarios: