lunes, 23 de diciembre de 2013

Controles de Validación

Hay seis controles Web para la validación de datos de entrada que se pueden incorporar en un Formulario Web.

·         CompareValidator:
Facilita la validación de un dato del formulario contra un valor fijo u otro campo del formulario.
·         CustomValidator:
Facilita la validación de un dato del formulario usando una subrutina propia.
·         RangeValidator:
Facilita la validación de un dato del formulario contra un valor mínimo y máximo.
·         RegularExpressionValidator:
Facilita la validación de un dato del formulario contra una expresión.
·         RequiredFieldValidator:
Facilita la validación de un dato del formulario chequeando que el mismo tenga algún valor.
·         ValidationSumary:
Agrupa los mensajes de error de otros controles en una parte de la página.


Todos los controles de validación tienen tres propiedades fundamentales: ControlToValidate, Text y IsValid. Todos los controles derivan de la clase BaseValidator.

·  La propiedad ControlToValidate contiene la referencia del control del formulario que queremos validar.
·   La propiedad Text almacena el mensaje de error que queremos que se muestre en la página.
·   Por último la propiedad IsValid almacena True en caso que el control pase el test de validación.

Cuando empleamos controles de validación con el Explorer 4.0 o superior, los controles automáticamente usan funciones en JavaScript en el cliente. Esto significa que los controles pueden inmediatamente mostrar los mensajes de error en el browser mientras el usuario está completando el formulario. Si hay algún error en la página el código JavaScript previene que el usuario pueda enviar los datos al servidor. En caso de emplear navegadores más antiguos los controles que veremos seguirán funcionando, pero la validación se realizará en el servidor.

Ejemplos: con cada una de ellas

Control: CompareValidator
El control CompareValidator permite comparar un valor de un control con otro control o comparar el valor de un control con un valor fijo.
Las propiedades más importantes son:

  • ·         ControlToValidate: El campo del formulario a validar.
  • ·         ControlToCompare: El campo del formulario contra el cual se efectúa la comparación.
  • ·    Operator: El operador a utilizarse en la comparación (los valores posibles son Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual y DataTypeCheck)
  • ·         Text: El mensaje de error a mostrar.
  • ·         Type: El tipo de comparación a ejecutar (valores posibles String, Integer, Double, Date, Currency)
  • ·         ValueToCompare: El valor fijo a comparar.

Para probar este control implementaremos una página que debe permitir el ingreso de algunos datos y en el campo clave emplearemos un objeto de la clase CompareValidator para validar el ingreso repetido de la clave.

La interface visual de la página es:



Al objeto CompareValidator le configuramos las propiedades de la siguiente manera:


Es importante inicializar la propiedad ControlToValidate con el objeto TextBox6 que carga la segunda clave, luego que el operador carga la clave se procede a validar si el texto ingresado coincide en el TextBox5 que sea inicializado la propiedad ControlToCompare.

Control: CustomValidator

El control CustomValidator permite validar el campo de un formulario con una función de validación propia. Debemos asociar nuestro control CustomValidator con un evento propio.
Para probar este control implementaremos una página que solicite el ingreso de un número múltiplo de 5, en caso de ingresar un valor incorrecto mostraremos un mensaje de error.
La interface a implementar es la siguiente:


Primero configuramos las propiedades del objeto CustomValidator con:



Ahora debemos codificar el evento ServerValidate que tiene el objeto CustomValidator1, a esto lo hacemos desde la ventana de código y lo podemos generar automáticamente haciendo doble clic sobre el control en la ventana de diseño.

El parámetro args tiene dos propiedades fundamentales, una almacena el valor del control que estamos validando y otra llamada IsValid que debemos asignarle el resultado de nuestra validación.

En nuestro ejemplo almacenamos el número ingresado en la variable valor, luego mediante el operador Mod (resto de una división) verificamos si es cero, en caso afirmativo inicializamos la propiedad IsValid del objeto args con el valor True, en caso contrario, es decir que el número ingresado no sea un múltiplo de 2 almacenamos el valor False.



Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub CustomValidator1_ServerValidate(ByVal source As ObjectByVal args 
As System.Web.UI.WebControls.ServerValidateEventArgsHandles CustomValidator1.ServerValidate
        Dim valor As Integer = args.Value
        If valor Mod 2 = 0 Then
            args.IsValid = True
        Else
            args.IsValid = False
        End If
    End Sub

    Protected Sub Button1_Click(ByVal sender As ObjectByVal e As System.EventArgs
    Handles Button1.Click
        If Me.IsValid Then
            Me.Response.Redirect("Default.aspx")
        End If
    End Sub
End Class


Control: RangeValidator

El control RangeValidator especifica un valor mínimo y máximo para un control TextBox. Podemos utilizar el control para chequear el rango de enteros, fechas, cadenas o valores reales.
Las propiedades más importantes del control son:

·         ControlToValidate El campo del formulario a validar.
·         MinimumValue El valor mínimo a validar en el rango de valores.
·         MaximumValue El valor máximo a validar en el rango de valores.
·         Text El mensaje de error a mostrar. 
·         Type El tipo de comparación a ejecutar (valores posibles: String, Integer, Double, Date, Currency)

Para probar este control haremos una página que solicite ingresar la edad de una persona que se postula para un trabajo (la misma debe estar en el rango de 18 a 35 años) Disponemos sobre el formulario los siguientes objetos: Label, TextBox, Button y un RangeValidator. La interface que debemos implementar es la siguiente:


El objeto RangeValidator lo debemos configurar con los siguientes valores:


Si ejecutamos la página veremos que el mensaje aparece si ingresamos una edad que esté fuera del rango de 18 a 35 años.

Control: RegularExpressionValidator

El control RegularExpressionValidator permite validar el valor de un campo de un formulario con un patrón específico, por ejemplo un código postal, un número telefónico, una dirección de mail, una URL etc.
El planteo de un RegularExpression es bastante compleja, pero el Visual Studio .Net provee una serie de expresiones regulares preconfiguradas.
Para probar este control, haremos una página que solicite el ingreso de un mail y mostraremos un error en caso que el usuario ingrese un mail mal formado.
La interface visual de la página es la siguiente:


Al objeto de la clase RegularExpressionValidator le configuramos las propiedades con los siguientes valores:


Si ejecutamos el programa podremos ver que al abandonar el foco del TextBox aparecerá el mensaje de error en caso de ingresar un mail incorrecto.

Control: RequiredFieldValidator

Para probar este control haremos una página que solicite el nombre de usuario (mostraremos un error si el operador no ingresa texto en el TextBox)
La interface visual es la siguiente:


El mensaje en rojo debe aparecer si presionamos el botón “Confirmar” y no se ingresó texto en el TextBox.
En el Visual Studio .Net confeccionamos el formulario web disponiendo uno control de tipo TextBox, un Button y un RequiredFieldValidator que se encuentra en la pestaña “Validación” del “Cuadro de herramientas”.
El control RequiredFieldValidator es importante inicializar las siguientes propiedades:


Cuando ejecutemos la página podemos ver el código que llega al navegador (en ella veremos las funciones en JavaScript que automáticamente el ASP.NET nos crea para facilitar la validación.
Luego si queremos que al presionar el botón se redireccione a otra página en caso de haber ingresado un nombre de usuario debemos codificar el método Clic para dicho botón.
La propiedad IsValid del WebForm almacena true si todos los controles de validación dispuestos en el formulario se validan correctamente.

Control: ValidationSummary

Cuando tenemos formularios con gran cantidad de controles puede llegar a ser dificultoso ubicar los errores en la página. El Framework de la .Net trae otra clase llamada ValidationSumary que muestra todos los errores de la página agrupados en una parte de pantalla. Para utilizar el control ValidationSummary es necesario fijar el valor de la propiedad ErrorMessage para cada control de validación que tiene la página. Es importante no confundir la propiedad Text que aparece en la misma posición donde la disponemos con la propiedad ErrorMesage que contiene el mensaje de error que mostrará el control ValidationSummary.
Para probar este control haremos una página que solicite la carga del nombre de usuario y su clave en forma obligatoria (mostrando un mensaje de error en caso de dejar vacío los TextBox).
La interface de la página es la siguiente:


Debemos disponer los siguientes objetos sobre el formulario:
1 Button, 2 TextBox, 2 RequiredFieldValidator y un objeto de la clase ValidationSummary. La propiedad text de los objetos RequiredFieldValidator las inicializamos con un (*) asterisco y las propiedades ErrorMessage con las cadenas: “Debe ingresar el nombre de usuario” y “Debe ingresar la clave” respectivamente. En cuanto al objeto de la clase ValidationSummary no debemos hacer ninguna configuración específica, solo ubicarlo dentro de la página.

No hay comentarios:

Publicar un comentario