Marco Besteiro y Miguel Rodríguez                                 Controles de ValidaciónASP.NET. Controles ASP.NET de val...
Marco Besteiro y Miguel Rodríguez                               Controles de ValidaciónFigura 22.1. Página de error indica...
Marco Besteiro y Miguel Rodríguez                                Controles de ValidaciónFigura   22.2.    Página    de   e...
Marco Besteiro y Miguel Rodríguez                           Controles de ValidaciónFigura 22.3. Vista diseño de la página ...
Marco Besteiro y Miguel Rodríguez                                Controles de Validación       ...       ...En el código H...
Marco Besteiro y Miguel Rodríguez                               Controles de ValidaciónFigura 22.4. Resultado de pulsar el...
Marco Besteiro y Miguel Rodríguez                                Controles de ValidaciónEn caso de que no se introduzca va...
Marco Besteiro y Miguel Rodríguez                               Controles de Validación        void BotonValidar_Click(Obj...
Marco Besteiro y Miguel Rodríguez                              Controles de ValidaciónPorr ejemplo:    <asp:CompareValidat...
Marco Besteiro y Miguel Rodríguez                               Controles de Validación       //       InitializeComponent...
Marco Besteiro y Miguel Rodríguez                                Controles de ValidaciónFigura    22.6.Personalización  de...
Marco Besteiro y Miguel Rodríguez                                  Controles de ValidaciónFigura 22.7. Utilización del cua...
Marco Besteiro y Miguel Rodríguez                                 Controles de Validación         {                 Label2...
Marco Besteiro y Miguel Rodríguez                               Controles de ValidaciónPermite definir la validación que s...
Marco Besteiro y Miguel Rodríguez                            Controles de ValidaciónFigura 22.9. Utilización del control C...
Marco Besteiro y Miguel Rodríguez                               Controles de ValidaciónComo se puede observar, el lenguaje...
Marco Besteiro y Miguel Rodríguez                                Controles de ValidaciónUn control de esta clase permite h...
Marco Besteiro y Miguel Rodríguez                           Controles de Validación.ascx.cs (o bien copiando el contenido ...
Upcoming SlideShare
Loading in …5
×

Controles aspnet validacion

851 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
851
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Controles aspnet validacion

  1. 1. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónASP.NET. Controles ASP.NET de validación.Controles de validación.Los controles de validación permiten validar los datos introducidos por el usuario.La validación se lleva a cabo cuando se pulsa un control de tipo botón. Los controlesque pueden lanzar una validación son: - Button - HtmlButton - HtmlInputButton - HtmlInputImage - ImageButton - LinkButtonTambién puede forzarse la validación utilizando el método Page.Validate.Tras lanzar la validación, si es pasada, se pondrá a true la propiedad IsValid de laclase Page y en caso contrario, se pondrá a false.Los controles de validación realizan la validación del control de cliente en el servidor.No obstante, si el navegador del cliente lo soporta (soporte DHTML, Internet Explorer4.0 y superior), estos controles generan código JScript de cliente para que la validaciónse haga antes de que el formulario sea enviado al servidor.Todos los controles devalidación derivan de la claseSystem.Web.UI.WebControls.BaseValidator y por tanto comparten una serie depropiedades entre las que destacan: - ErrorMessage: esta propiedad permite indicar el texto que se mostrará al usuario en el control de validación cuando introduzca un valor incorrecto en el control que se esté validando. Es importante tener en cuenta que el mensaje de error se muestra en el control de validación y que además se añade junto con el resto de mensajes de validación al control ValidationSummary, si es que lo hay en el WebForm. Si se desea que el mensaje de error sólo aparezca en el control de validación que lo lanza, ha de indicarse el mensaje en la propiedad Text del control de validación, en lugar de en la propiedad ErrorMessage. - ControlToValidate: esta propiedad indica el ID del control que se está validando. - Display: Si el valor de esta propiedad es None, el texto contenido en la propiedad ErrorMessage se muestra en el sumario (ValidationSummary), y si no, se muestra sobre el control que ha causado el error.RequiredFieldValidator.Este control verifica que el campo al que está asociado se ha rellenado. La propiedadControlToValidate permite indicar a que control se asocia. Si se incluye un controlRequiredFieldValidator a una página Web ASP.NET sin asociarle un control al quevalidar, al ejecutar la aplicación se mostrará una página de error. 1/18 1
  2. 2. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónFigura 22.1. Página de error indicando que el control RequiredFieldValidator noestá asociado a control alguno que validar.Por ejemplo, supónga que se dispone de una aplicación llamadaEjemploRequiredFieldValidator en la que la primera página es una página decontrol de usuario y clave. 2/18 2
  3. 3. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónFigura 22.2. Página de ejemplo sobre la que probar el controlRequiredFieldValidator.Se desea mostrar el mensaje Debe introducir un nombre de usuario, en caso deque al pulsar el botón Enviar la caja de texto correspondiente a la etiqueta Usuario nohaya sido rellenada.El primer paso que se ha de dar es poner la propiedad CausesValidation del botónEnviar a true. De este modo, cada vez que se pulse el botón Enviar se provocará unavalidación.El siguiente paso es añadir al formulario Web un control RequiredFieldValidation yasociar su propiedad ControlToValidate con la caja de texto TextBox1, que es en laque se debe introducir el nombre de usuario. Además, se debe indicar en la propiedadErrorMessage -o bien en Text, si se desea que el mensaje de error sólo aparezca en elcontrol de validación- el mensaje que se desea mostrar si no se rellena la caja de textoTextBox1. 3/18 3
  4. 4. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónFigura 22.3. Vista diseño de la página con el control RequiredFieldValidator.Si se observa el código de WebForm1.aspx.cs se verá que se ha añadido el controlRequiredFieldValidator:using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;namespace EjemploReqFieldValidator{ /// <summary> /// Summary description for WebForm1. /// </summary> public class WebForm1 : System.Web.UI.Page { protected System.Web.UI.WebControls.TextBox TextBox1; protected System.Web.UI.WebControls.TextBox TextBox2; protected System.Web.UI.WebControls.Label Label1; protected System.Web.UI.WebControls.Label Label3; protected System.Web.UI.WebControls.RequiredFieldValidator RequiredFieldValidator1; protected System.Web.UI.WebControls.Button Button1; … 4/18 4
  5. 5. Marco Besteiro y Miguel Rodríguez Controles de Validación ... ...En el código HTML de la página WebForm1.aspx se puede ver que también se haañadido el control de validación y que se han indicado los valores de las propiedadesControlToValidate, ErrorMessage, etc...<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"AutoEventWireup="false" Inherits="EjemploReqFieldValidator.WebForm1"%>……<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 438px; POSITION:absolute; TOP: 92px" runat="server" Width="144px" Height="22px"></asp:TextBox><asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 302px; POSITION:absolute; TOP: 95px" runat="server" Width="121px"Height="29px">Usuario:</asp:Label>……<asp:RequiredFieldValidatorid="RequiredFieldValidator1"style="Z-INDEX: 106; LEFT: 328px; POSITION: absolute; TOP: 255px"runat="server" Width="272px" Height="38px"ErrorMessage="Debe Introducir el nombre de Usuario"ControlToValidate="TextBox1"></asp:RequiredFieldValidator><asp:Button id="Button1"style="Z-INDEX: 107; LEFT: 368px; POSITION: absolute; TOP: 208px"runat="server" Width="169px" Height="28px" Text="Enviar"></asp:Button></form></body></HTML>Al ejecutar la aplicación no aparecerá el control RequiredFieldValidator1. Éste sólose mostrará si se realiza una validación en el servidor (tras pulsar el botón Button1) y sila caja de texto se ha dejado en blanco. 5/18 5
  6. 6. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónFigura 22.4. Resultado de pulsar el botón Enviar sin rellenar el campo usuario. Elcontrol RequiredFieldValidator muestra el mensaje de error.Esta es la validación básica. Es posible controlar en mayor grado la validaciónaprovechando la propiedad IsValid de la clase Page. Por ejemplo, podría hacerse quela etiqueta Usuario: cambie su color a rojo mientras no se introduzca un nombre deusuario. Un modo sencillo de implementarlo es utilizar el método Button1_Click:private void Button1_Click(object sender, System.EventArgs e){ if (Page.IsValid == true) { Label1.ForeColor = Color.Black; } else { Label1.ForeColor = Color.Red; }}No obstante, si se ejecuta la aplicación se puede ver que no hace lo esperado. El motivoes que la propiedad EnableClientScript del control RequiredFieldValidator1 estáa true, lo que quiere decir que si el navegador lo permite, la validación se hará en elcliente (con código JScript) y todo código puesto en el servidor no llegará a ejecutarse.Si se cambia esta propiedad a false, la aplicación funcionará según lo esperado. 6/18 6
  7. 7. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónEn caso de que no se introduzca valor alguno en la caja de texto del Usuario, la etiquetaUsuario se pondrá en rojo.Figura 22.5. Personalización de la validación realizada en el método Button1_Click.La aplicación mostrada ha sido realizada utilizando el entorno de diseño de VisualStudio .NET. Por tal motivo, el código de respuesta a la pulsación del botón Enviar(Button1) se ha generado por defecto en el fichero WebForm1.aspx.cs, en concreto enel método Button1_Click. No obstante, este código podía haberse introducidodirectamente en el fichero WebForm1.aspx, como un script.Es importante indicar que este script puede ser de servidor (runat=server) o de cliente(por defecto, si no se indica). En el caso de que sea de cliente sólo puede codificarse enVBScript o en JScript.En el siguiente ejemplo se muestra como incluir el script en el fichero WebForm1.aspx.<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"AutoEventWireup="false" Inherits="EjemploReqFieldValidator.WebForm1"%>……<html><head> <script language="C#" runat=server> 7/18 7
  8. 8. Marco Besteiro y Miguel Rodríguez Controles de Validación void BotonValidar_Click(Object sender, EventArgs e) { if (Page.IsValid == true) { LabelMensaje.Text = "El campo requerido ha sido rellenado"; } else { LabelMensaje.Text = " El campo requerido está vacío"; } } </script> </head> <body>……<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 438px; POSITION:absolute; TOP: 92px" runat="server" Width="144px" Height="22px"></asp:TextBox><asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 302px; POSITION:absolute; TOP: 95px" runat="server" Width="121px"Height="29px">Usuario:</asp:Label>……<asp:RequiredFieldValidatorid="RequiredFieldValidator1"style="Z-INDEX: 106; LEFT: 328px; POSITION: absolute; TOP: 255px"runat="server" Width="272px" Height="38px"ErrorMessage="Debe Introducir el nombre de Usuario"ControlToValidate="TextBox1"></asp:RequiredFieldValidator>……<asp:Label id="LabelMensaje"……… <asp:Button id=Button1 text="Validar" OnClick="BotonValidar_Click" runat=server /></body></html>CompareValidator.Este control permite comparar el valor introducido por el usuario en el control a validar(propiedad ControlToValidate) con el valor introducido en otro control (propiedadControlToCompare) ó con una constante (propiedad ValueToCompare).No se deben utilizar a la vez (darles valor) las propiedades ControlToCompare yValueToCompare. 8/18 8
  9. 9. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónPorr ejemplo: <asp:CompareValidator id="Compare1" ControlToValidate="TextBox1" ControlToCompare="TextBox2" Type="String" runat="server"/>RangeValidator.Este control permite verificar si el valor introducido en el control al que se le asocia(propiedad ControlToValidate) se encuentra entre un valor mínimo (propiedadMinimumValue) y un valor máximo (propiedad MaximumValue).Suponga que se quiere mejorar la aplicación EjemploReqFieldValidator añadiendoun control RangeValidator que controle que la clave introducida en la segunda caja detexto sea un valor entre 0 y 99999 (mostrando un mensaje en el propio control).En principio, con añadirlo directamente en la vista de diseño y actualizar laspropiedades ControlToValidate, MinimumValue y MaximunValue es suficiente.El problema viene si se desea especializar el tratamiento que se da a la validación delvalor de la clave con el control RangeValidator (por ejemplo, hacer que la etiquetaclave se ponga de color rojo si la clave no se encuentra en el rango permitido).Siguiendo los pasos que se dieron en la aplicación EjemploReqFieldValidator, elcódigo de validación puede introducirse en el método Button1_Click(). No obstante,el código contenido en Button1_Click() pone a rojo la etiqueta usuario si la página noes válida (propiedad Page.IsValid) y ahora es necesario diferenciar si se ha de poner arojo una de las etiquetas, ninguna o ambas. Esto obliga a tener que distinguir cuándofalla la validación en RequiredFieldValidator1 y cuándo en RangeValidator1.La solución consiste en invocar por separado al método Validate de cada uno de loscontroles y preguntar por la propiedad IsValid de cada uno de los controles.......private void InitializeComponent(){ this.Button1.Click += new EventHandler(this.Button1_Click); this.CustomValidator1.ServerValidate += new System.Web.UI.WebControls.ServerValidateEventHandler( this.CustomValidator1_ServerValidate); this.Load += new System.EventHandler(this.Page_Load);}private void Page_Init(object sender, EventArgs e){ // // CODEGEN: This call is required by the ASP.NET Web //Form Designer. 9/18 9
  10. 10. Marco Besteiro y Miguel Rodríguez Controles de Validación // InitializeComponent(); RangeValidator1.Type = ValidationDataType.Integer; RangeValidator1.MinimumValue = "0"; RangeValidator1.MaximumValue = "99999";} ... ...private void Button1_Click(object sender, System.EventArgs e){ RequiredFieldValidator1.Validate(); if (RequiredFieldValidator1.IsValid == true) { Label1.ForeColor = Color.Black; } else { Label1.ForeColor = Color.Red; } RangeValidator1.Validate(); if (RangeValidator1.IsValid == true) { Label2.ForeColor = Color.Black; } else { Label2.ForeColor = Color.Red; }}Al ejecutar la aplicación, si la clave no es correcta, sólo se pondrá en rojo la etiquetaClave. 10/18 10
  11. 11. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónFigura 22.6.Personalización de la validación para los controlesRequiredFieldValidator y RangeValidator.RegularExpresionValidator.Este control verifica si el valor del control de entrada al que está asociado sigue unadeterminada expresión regular. Este tipo de validación es interesante para números deteléfono, direcciones de e-mail, fechas...La sintaxis de la expresión regular difiere en función de si la validación se realiza en elcliente o en el servidor. Si la validación es en el servidor se utilizaSystem.Text.RegularExpressions.RegEx para definir la expresión regular. Si lavalidación es en el cliente se utiliza JScript para la expresión regular.Visual Studio ofrece un asistente de generación de expresiones regulares al que sepuede acceder desde la ventana de propiedades al configurar el control de tipoRegularExpresionValidator (en concreto, desde la propiedadValidationExpresión). 11/18 11
  12. 12. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónFigura 22.7. Utilización del cuadro de diálogo editor de expresiones regulares.En el siguiente ejemplo se utiliza una expresión regular y el controlRegularExpresionValidator para comprobar si el valor introducido en la caja detexto Clave es un número de 5 dígitos.La expresión regular es: ^d{5}$Tras configurar las propiedades del control RegularExpresionValidator1 desde laventana de propiedades se ha de añadir el código de validación en el métodoButton1_Click().private void Button1_Click(object sender, System.EventArgs e){ RequiredFieldValidator1.Validate(); if (RequiredFieldValidator1.IsValid == true) { Label1.ForeColor = Color.Black; } else { Label1.ForeColor = Color.Red; } RangeValidator1.Validate(); if (RangeValidator1.IsValid == true) 12/18 12
  13. 13. Marco Besteiro y Miguel Rodríguez Controles de Validación { Label2.ForeColor = Color.Black; } else { Label2.ForeColor = Color.Red; } RegularExpressionValidator1.Validate(); if (RegularExpressionValidator1.IsValid == true) { Label2.ForeColor = Color.Black; } else { Label2.ForeColor = Color.Red; }}Al ejecutar la aplicación, si se introduce una clave que no tenga 5 dígitos, el resultado esel de la figura 22.8:Figura 22.8. Personalización del tratamiento asociado al controlRegularExpresionValidator.CustomValidator. 13/18 13
  14. 14. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónPermite definir la validación que se va a aplicar a un control. Para crear una función devalidación se ha de programar un manejador para el evento ServerValidate. Esteevento recibe un objeto ServerValidateEventArgs como parámetro. La propiedadValue de este objeto contiene el string con el contenido del control a validar. Elresultado de la validación se almacena en la propiedad IsValid del objetoServerValidateEventArgs (si es false o es puesto a false, se muestra el controlCustomValidator).Si se desea crear una función de validación del lado del cliente se ha de introducir unscript con tal función en la página .aspx e indicarla en la propiedadClientValidationFunction del control CustomValidator. Debido a que esta funciónse va a ejecutar en el cliente, debe ser escrita en VBScript o en JScript.Supónga que, en el ejemplo EjReqFieldValidator, se quiere controlar que si lasuscripción de un usuario ha expirado, se le indique. En este caso se va a controlarúnicamente que si el usuario es Pepe hay que avisarle de que debe revisar sususcripción.El primer paso es añadir un control CustomValidator (CustomValidator1) y dar lossiguientes valores a sus propiedades: - ControlToValidate = TextBox1 - EnableClientScript = false - ErrorMessage = “debe usted actualizar su subscripción”Tras este paso se ha de codificar el método CustomValidator1_ServerValidate, queresponde al evento ServerValidate.private void CustomValidator1_ServerValidate(object source,System.Web.UI.WebControls.ServerValidateEventArgs args){ if (args.Value.Equals("Pepe")) { CustomValidator1.ErrorMessage = args.Value + ", " + CustomValidator1.ErrorMessage; args.IsValid = false; TextBox1.ForeColor = Color.Red; } else { TextBox1.ForeColor = Color.Black; }}Es importante tener en cuenta que si se desea que el control CustomValidator1muestre su texto, éste tiene que detectar error en la validación. El controlCustomValidator1 considera que hay error si se pone la propiedad IsValid de args afalse.El resultado de ejecutar la aplicación e introducir como nombre de usuario Pepe será verel mensaje del control CustomValidator1 y ver también el texto Pepe en rojo. 14/18 14
  15. 15. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónFigura 22.9. Utilización del control CustomValidator.En este caso, la validación ha sido de servidor. Si se desea que sea en el cliente esnecesario generar un script de cliente en la página .aspx y poner la propiedadEnableClientScript de CustomValidator1 a true. Además se ha de indicar en lapropiedad ClientValidationFunction de CustomValidator1 el nombre de lafunción del script de cliente.La siguiente función se ha de introducir al final de WebForm1.aspx y sólo muestra elmensaje de error si el usuario es Pepe.......<script language=”vbscript”>Sub CustomValidator1_ClientValidate(val, args) If (args.value = "Pepe") Then args.IsValid = false End IfEnd Sub</script></body></html> 15/18 15
  16. 16. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónComo se puede observar, el lenguaje es VBScript y su sintaxis difiere de la de C#.Cuando se crea un script de cliente lo lógico es desear que pueda ejecutarse en cuantosmás navegadores sea posible. La mayoría de los navegadores soportan JavaScript yVBScript (JScript también tiene bastante soporte debido a su parecido con JavaScript).Otros lenguajes, como puede ser C#, no son ampliamente soportados por losnavegadores, de modo que se recomienda utilizar JavaScript o VBScript para los scriptsde cliente.Por defecto, el documento .aspx, cuando se crea con Visual Studio .NET, tomaJavaScript como lenguaje por defecto para los scripts de cliente. Esto se puede ver en laventana de propiedades de la clase DOCUMENT (esta clase representa el documento opágina Web generada a partir de la página .aspx). La propiedad en la que se indica esdefaultClientScript.Figura 22.10. Vista HTML de la página. El lenguaje de script utilizado es JScript.El lenguaje indicado en la propiedad defaultClientScript es JScript, en cambio, enla página .aspx se indica JavaScript. Realmente son muy parecidos (JavaScript es unsubconjunto de Java, definido por Netscape y JScript es un subconjunto de Javadefinido por Microsoft, con alguna variante.En este caso, el script de cliente se desea que sea VBScript, de modo que debecambiarse el valor de la propiedad defaultClientScript a VBScript.ValidationSummary. 16/18 16
  17. 17. Marco Besteiro y Miguel Rodríguez Controles de ValidaciónUn control de esta clase permite hacer un sumario de todos los mensajes de error detodos los controles de validación de una página Web. El sumario de errores se muestrapor defecto como una lista de puntos (el formato de la lista se puede cambiar mediantela propiedad DisplayMode).La lista de puntos muestra todos los errores que se han detectado al validar la página porlos distintos controles de validación pero se refresca en cada nueva validación, es decir,no acumula los errores de anteriores validaciones.Dos propiedades interesantes de la clase ValidationSummary son ShowSummary yShowMessageBox que permiten mostrar, respectivamente, el listado de mensajes en lapágina Web o en un cuadro de mensaje.Si se añade un control ValidationSummary a la página WebForm1.aspx de laaplicación EjemploReqFieldValidator (está en la parte izquierda), el resultado es elde la figura 22.11:Figura 22.11. Utilización del control ValidationSummary.Controles ASP.NET definidos por el desarrollador.Los controles definidos por el desarrollador pueden crearse en base a agrupaciones deotros controles e incluso a partir de una página ASP.NET.En muchos casos es posible crear un control ASP.NET a partir de una página ASP.NETsimplemente cambiado la extensión .aspx por .ascx y la extensión .aspx.cs por 17/18 17
  18. 18. Marco Besteiro y Miguel Rodríguez Controles de Validación.ascx.cs (o bien copiando el contenido del .aspx y del .aspx.cs sobre un .ascx y un.ascx.cs respectivamente). Es importante saber que en este tipo de controles no sesoportan los controles de validación.Si se desea construir un control ASP.NET puro, sin página web asociada, se puedeutilizar el asistente, eligiendo la opción Librería de controles Web.Figura 22.12. Cuadro de diálogo de creación de un nuevo proyecto. Opción de creaciónde un control a medida.El resultado será un control derivado de la claseSystem.Web.UI.WebControls.WebControl o de una clase derivada de ésta y estarácontenido en un fichero .ascx. 18/18 18

×