1 1 1 1 1 1 1 1 1 1

Visual Studio .NET trae incluida una serie de controles que permiten validar los campos de los WebForms. Dichas validaciones son las más comunes y que se encuentran presentes en la mayoría de los formularios.

Para utilizarlos, basta con arrastrar cualquiera de ellos desde la barra de herramientas de VS .NET y ponerlos en el formulario que contenga el campo que se desea validar. En todos ellos hay que especificar el nombre del control que se desea validar y el mensaje de error que se le debe mostrar al usuario en caso de validación negativa.

Validadores ASP.NET

  • RequiredFieldValidator : el campo del formulario es requerido.
  • RangeValidator : el campo del formulario se debe encontrar dentro de cierto rango.
  • RegularExpressionValidaror : el campo debe corresponder a la expresión regular indicada, por ejemplo, \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* para verificar que una dirección de e-mail esté correcta.
  • CompareValidator : el campo del formulario debe estar relacionado con otro campo del formulario mediante alguna operación lógica, por ejemplo, que deba ser igual, mayor o menor, etc. También este validador se puede emplear para forzar a que un campo del formulario sea de un tipo de dato determinado.
  • CustomValidator : se debe especificar una función JavaScript personalizada la cual es la encargada de validar el campo. En caso de validarse en el lado del servidor, se debe implementar el evento ServerValidate del CustomValidator.
  • ValidationSummary : No es un validador propiamente tal, si no que es el control encargado de mostrar el resultado de la validación llevada a cabo por los validadores. Ese resultado se puede mostrar como una alerta de JavaScript o bien, inserto dentro de la misma página, dentro de una etiqueta DIV.

Todos los validadores actúan en el lado de cliente y además en el lado servidor, de ese modo, en caso que una persona tenga deshabilitada la ejecución de JavaScript en su navegador, el campo del formulario igualmente sea validado, sin permitir que la ejecución de la página continúe en caso de la validación negativa.

Es por lo anterior, que cuando un desarrollador programe un control de validación, se preocupe de realizar tanto la comprobación de lado cliente, como de lado servidor.

Como se ha mencionado, los validadores incluidos con VS .NET abarcan las validaciones típicas. Hay casos en que esas validaciones no se ajustan a lo que nuestra aplicación requiere, por ejemplo, si se necesita validar un número de RUT chileno. Es por ello que en este artículo se explicará paso a paso cómo se programa ese validador. Al final existirá un enlace con el cual se puede descargar una aplicación de ejemplo, cuya solución es de Visual Studio 2008. Los pasos aquí descritos pueden ser realizados también utilizando Visual Studio 2005 con alguna variación en las pantallas. Se hará mención, además, a las opciones de menú de la versión en inglés del producto.

 

1. Crear un nuevo proyecto de tipo ASP.NET Server Control

 

En el menú File, seleccionar New Project. El tipo de proyecto que se debe crear es ASP.NET Server Control, el cual creará un assembly capaz de contener varios controles de servidor.

 

Nuevo proyecto

 

Al Aceptar el cuadro de diálogo anterior, se creará un control por defecto, llamado ServerControl1, que contiene un código básico de un control típico.

 

2. Renombrar el control y cambiar la clase base

 

Modificar el nombre del archivo añadido por defecto por Visual Studio. En este caso será RutValidator.cs, y luego de aceptar renombrar todas las referencias, se puede comprobar que el nombre de la clase también fue modificado.

Adicionalmente, dado que realizaremos un control validador, se debe remplazar la clase base WebControl por BaseValidator.

Finalmente, para terminar el paso de preparación de la clase, vamos a indicar el ícono que será empleado por Visual Studio cuando muestre nuestro control en la barra de herramientas y eliminar todo el cuerpo, dado que nada de lo que nos propuso Visual Studio en la clase nos servirá.

El código resultante hasta el momento es:

[code]
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
namespace Desytec.Web.UI.WebControls
{
    [ToolboxBitmap(typeof(RutValidator), "RutValidator.bmp")]
    [ToolboxData("<{0}:RutValidator runat=\"server\"></{0}:RutValidator>")]
    public class RutValidator : BaseValidator
    {
    }
}[/code]

 

ToolboxBitmap es un atributo de nivel de clase que permite especificar qué ícono se empleará cuando se muestre el control en la barra de herramientas. Se utilizará un archivo bitmap (bmp) de 16x16 ubicado en la misma ruta de la clase del control. Importante: se debe indicar que la imagen será un "recurso embebido", para ello se selecciona en el explorador de soluciones y luego se visualiza la ventana de propiedades. En Build Action se debe seleccionar Embedded Resource. Sin este paso, el control mostrará el ícono por defecto cuando se agregue a la Toolbox. ToolboxData indica qué texto de marcado se debe emplear cuando se ubica el control en la página. El "placeholder" {0} será reemplazado por el espacio de nombres del control, en tiempo de diseño.

 

3. Agregar dos propiedades nuevas

 

Un control validador por defecto tiene una propiedad llamada ControlToValidate, en la cual se debe especificar al ID del control que es afectado por la validación. En nuestro caso, existirán 2 controles que validar, uno en el cual se ingresará la parte numérica del RUT, y el otro, en el cual se ingresará el dígito verificador. Este último campo también se debe especificar, para lo cual, se crea la propiedad ControlToValidateDV. Adicionalmente, se crea la propiedad LimitCharacters, de tipo buleano, que se utiliza para indicar si el control sólo aceptará caracteres válidos o si aceptará cualquier caracter. Por ejemplo, en algunos casos no se va a desear que se ingresen letras en el campo de parte entera del RUT, o bien, que en el digito verificador se ingrese un caracter distinto de un dígito o la K.

 

[code]      
        [Category("Behavior"),
         DefaultValue(""),
         IDReferenceProperty,
         Description("ID del control que almacena el DV del RUT."),
         TypeConverter(typeof(ValidatedControlConverter))]
        public string ControlToValidateDV
        {
            get
            {
                string s = (string)ViewState["ControlToValidateDV"];
                return ((s == null) ? String.Empty : s);
            }
            set
            {
                ViewState["ControlToValidateDV"] = value;
            }
        }
        [Category("Behavior"),
         DefaultValue(false),
         Description("Indica si el control debe impedir que se tecleen caracteres no aceptados por un RUT.")]
        public bool LimitCharacters
        {
            get
            {
                object o = ViewState["LimitCharacters"];
                return ((o == null) ? false : (bool)o);
            }
            set
            {
                ViewState["LimitCharacters"] = value;
            }
        }
[/code]

 

Aquí es necesario explicar brevemente los atributos IDReferenceProperty y TypeConverter. El primero, sirve para indicar que la propiedad almacenará el ID de un control (en nuestro caso, el TextBox que almacenará el dígito verificador), y el segundo, ocasiona que se muestre una lista desplegable de todos los controles factibles de ser asignados en el cuadro de propiedades.

 

4. Sobrescribir algunos métodos de BaseValidator

 

Los siguientes métodos de la clase base son los que se deben sobrescribir para que el validador pueda realizar su trabajo.

  • ControlPropertiesValid : determina si el o los controles afectados por la validación son válidos. En nuestro caso, tanto el campo de ingreso de la parte entera del RUT como el del dígito verificador, deben existir.
  • EvaluateIsValid : proporciona validación de lado del servidor. Siempre se ejecuta luego de realizarse el envío del formulario. Este método toma más importancia cuando el navegador del cliente no tiene habilitada la ejecución de código JavaScript o bien, cuando explícitamente, en tiempo de diseño, se indica que no se desea validación de lado del cliente.
  • AddAttributesToRender : con este método, agregamos el identificador del control que almacena el dígito verificador para que sea renderizado correctamente. Observe cómo queda el código HTML luego de ejecutado este método.
  • OnPreRender : encargado de agregar a la página el código JavaScript que valida del lado cliente.

Luego de implementados los métodos anteriores, tendremos el código:

 

[code]   
        protected override bool ControlPropertiesValid()
        {
            if (base.ControlPropertiesValid())
            {
                string controlToValidateDV = this.ControlToValidateDV;
                if (controlToValidateDV.Length == 0)
                    throw new HttpException("La propiedad ControlToValidateDV de '" + this.ID + "' no puede estar en blanco.");
                this.CheckControlValidationProperty(controlToValidateDV, "ControlToValidateDV");
                return true;
            }
            else
                return false;
        }
        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            base.AddAttributesToRender(writer);
            if (this.DetermineRenderUplevel())
            {
                Page.ClientScript.RegisterExpandoAttribute(this.ClientID, "evaluationfunction", "ValidateRUT");
                Page.ClientScript.RegisterExpandoAttribute(this.ClientID, "controltovalidatedv", GetControlRenderID(this.ControlToValidateDV));
            }
        }
        protected override void OnPreRender(EventArgs e)
        {
            if (this.DetermineRenderUplevel())
                CreateJavaScript();
            base.OnPreRender(e);
        }
        protected override bool EvaluateIsValid()
        {
            return CheckRUT();
        }
[/code]

 

Aquí se observan algunas llamadas a métodos del framework .NET que merecen explicación: BaseValidator.GetControlRenderID, el cual obtiene el identificador del control INPUT del dígito verificador luego que la página se haya renderizado en el browser. Hay que obtener el identificador de este modo dado que no necesariamente el ID del control que llega al navegador será el mismo que se asignó en tiempos de diseño. El método this.DetermineRenderUplevel() sirve para averiguar si un navegador es capaz de mostrar la validación de lado cliente.

En el código anterior, se observan 2 llamadas a funciones propias, definidas para este control y que veremos más adelante: CheckRUT() y CreateJavaScript().

 

5. Implementar método CheckRUT()

 

Este método es el encargado de realizar la validación de lado del servidor. Como se indicó anteriormente, es necesario validar también en el servidor, en caso que el navegador no tenga habilitado el soporte de JavaScript.

[code]   
        protected bool CheckRUT()
        {
            TextBox ctrlRUT = FindControl(ControlToValidate) as TextBox;
            TextBox ctrlDV = FindControl(ControlToValidateDV) as TextBox;
            if (ctrlRUT == null || ctrlDV == null) return false;
            string rut = String.Concat(ctrlRUT.Text, ctrlDV.Text.ToUpper());
            // No valida si es vacío
            if (rut.Equals(String.Empty))
                return true;
            if (System.Text.RegularExpressions.Regex.Replace(ctrlRUT.Text, "[ .-]", String.Empty).Equals(String.Empty)
                || System.Text.RegularExpressions.Regex.Replace(ctrlDV.Text, "[ .-]", String.Empty).Equals(String.Empty)) return false;
            rut = System.Text.RegularExpressions.Regex.Replace(rut, "[ .-]", String.Empty);
            int largo = rut.Length;
            if (largo > 10 || largo < 2) return false;
            int parteRut = 0;
            // La parte del RUT debe ser un número entero
            if (!int.TryParse(rut.Substring(0, largo - 1), out parteRut))
                return false;
            // El dígito verificador debe ser un número o la K
            if ((rut[largo - 1].CompareTo('0') < 0 || rut[largo - 1].CompareTo('9') > 0) && rut[largo - 1] != 'K')
                return false;
            // Realiza la operación módulo
            int suma = 0;
            int mul = 2;
            // -2 porque rut contiene el dígito verificador, el cual no hay que considerar
            for (int i = rut.Length - 2; i >= 0; i--)
            {
                suma += int.Parse(rut[i].ToString()) * mul;
                if (mul == 7) mul = 2; else mul++;
            }
            int residuo = suma % 11;
            char dvr = '0';
            if (residuo == 1)
                dvr = 'K';
            else if (residuo == 0)
                dvr = 'O';
            else
                dvr = (11 - residuo).ToString()[0];
            return dvr.Equals(rut[rut.Length - 1]);
        }[/code]

 

6. Implementar método CreateJavaScript()

 

Este método es el encargado de realizar la validación de lado del cliente en caso de estar habilitado en el navegador. Además de las tareas propias de la validación, se utiliza lo especificado en la propiedad antes vista LimitCharacters, la cual crea un control INPUT que sólo acepte los caracteres permitidos para un RUT.

 

[code]        protected void CreateJavaScript()
        {
            if (!Page.ClientScript.IsClientScriptBlockRegistered("ValidationScript"))
            {
                string script = @"function checkDV(rut)
                                  {
                                    var suma = 0;
                                    var mul  = 2;
                                    // -2 porque rut contiene el dígito verificador, el cual no hay que considerar
                                    for (var i = rut.length - 2 ; i >= 0; i--)
                                    {
                                      suma += rut.charAt(i) * mul;
                                      if (mul == 7) mul = 2; else mul++;
                                    }
                                    var dvr = '0';
                                    var residuo = suma % 11;
                                    if (residuo == 1)
                                      dvr = 'K';
                                    else if (residuo == 0)
                                      dvr = '0';
                                    else
                                      dvr = (11 - residuo).toString();
                                    return dvr == rut.charAt(rut.length - 1);
                                  }
                                  function ValidateRUT(ctrl)
                                  {
                                    var parteRut = document.getElementById(document.getElementById(ctrl.id).controltovalidate).value;
                                    var parteDv = document.getElementById(document.getElementById(ctrl.id).controltovalidatedv).value;
                                      
                                    if (parteRut.replace(/ /g, '') == '' || parteDv.replace(/ /g, '') == '')
                                        return true;
                                    var rut = parteRut + parteDv.toUpperCase();
                                    if (rut == '') return true;   // No valida cuando es vacío
                                      
                                    if (parteRut.replace(/[ .-]/g, '') == '' || parteDv.replace(/[ .-]/g, '') == '') return false;   // No valida cuando es vacío
                                    rut = rut.replace(/[ .-]/g, '');
                                    var largo = rut.length;
                                    if( largo > 10 || largo < 2 )
                                      return false;
                                    if (parseInt(rut.substr(0, largo - 1)) != rut.substr(0, largo - 1))
                                      return false;
                                    if ((rut[largo - 1]  '9') && rut[largo - 1] != 'K')
                                      return false;
                                    return checkDV(rut);
                                  }";
                Page.ClientScript.RegisterClientScriptBlock(GetType(), "ValidationScript", script, true);
            }
            if (LimitCharacters)
            {
                TextBox ctrlRUT = FindControl(ControlToValidate) as TextBox;
                TextBox ctrlDV = FindControl(ControlToValidateDV) as TextBox;
                if (ctrlRUT != null && ctrlDV != null)
                {
                    ctrlRUT.Attributes["onkeypress"] = "ingreso_numero()";
                    ctrlDV.Attributes["onkeypress"] = "ingreso_numero_y_k()";
                }
                if (!Page.ClientScript.IsClientScriptBlockRegistered("LimitingScript"))
                {
                    string script = @"function ingreso_numero()
                                      {
                                        if( window.event.keyCode  57 )
                                          window.event.keyCode = 0;     // Bloquea la tecla
                                      }
                                      function ingreso_numero_y_k()
                                      {
                                        // k = 107, K = 75
                                        var ascii = window.event.keyCode;    
                                        if( ascii == 107 )
                                          window.event.keyCode = 75;    // Transforma la 'k' en 'K'
                                        if( (ascii  57) && ascii != 107 && ascii != 75 )
                                          window.event.keyCode = 0;     // Bloquea la tecla
                                      }";
                    Page.ClientScript.RegisterClientScriptBlock(GetType(), "LimitingScript", script, true);
                }
            }
        }[/code]

 

7. Generar el assembly que contiene el control

 

Al finalizar el control de validación, hacemos un Rebuild de modo de generar el archivo Desytec.Web.UI.WebControls, el cual referenciaremos desde una página Web que lo utilice.

 

8. Agregar a la solución un proyecto Web de prueba

 

En el menú File, seleccionar Add New Web Site. Aparecerá el siguiente cuadro de diálogo, en el cual escribiremos la ruta en donde se almacenará nuestro proyecto Web.

Nuevo sitio web

 

Luego de Aceptar el cuadro de diálogo, se agregará a la solución un proyecto Web con una página Default.aspx y un archivo de configuración web.config.

 

9. Agregar el control RutValidator al Toolbox y ubicarlo en la página Default.aspx

 

Si bien es cierto, desde el proyecto Web podemos agregar la referencia al proyecto Desytec.web.UI.WebControls, lo que se hará en esta ocasión es abrir la página default.aspx y mostrar la Toolbox.En la pestaña General, presionar el botón derecho del mouse y seleccionar la opción Choose Items. Se abrirá una ventana, en la cual luego de presionar el botón Browse, se podrá navegar y seleccionar el assembly del control.

 

Elegir elementos de la barra de herramientas

 

Al Aceptar el cuadro de diálogo aparecerá el control en la pestaña General de la Toolbox. Igualmente, podríamos haber realizado este paso en la pestaña Validation, si se quiere que el control aparezca junto con los demás controles de validación.

 

Barra de herramientas

 

10. Agregar a la página 2 controles Textbox y el control de Validación

 

Esta es la última etapa y consiste en utilizar el control creado. Para ello pondremos en la página dos controles de textbox, uno para la parte numérica del RUT y otro para el dígito verificador. Además del control de validación de RUT, se pondrán dos validadores del tipo RequiredFieldValidator para asegurarnos de que ambox Textbox contengan datos antes de realizar el Postback del formulario.

El código de la página se muestra a continuación. Para la prueba, se mantuvo el respectivo codebehind en forma intacta.

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Desytec.Web.UI.WebControls" Namespace="Desytec.Web.UI.WebControls"
    TagPrefix="desytec" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtRUT" runat="server" Columns="10" MaxLength="10"></asp:TextBox>
        <asp:TextBox ID="txtDV" runat="server" Columns="1" MaxLength="1"></asp:TextBox>
        <desytec:RutValidator ID="valRUT" runat="server" ControlToValidate="txtRUT" ControlToValidateDV="txtDV"
            ErrorMessage="El RUT fue ingresado en forma incorrecta." LimitCharacters="True"
            SetFocusOnError="True">*</desytec:RutValidator><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtRUT"
            Display="Dynamic" ErrorMessage="Debe ingresar el RUT completo." SetFocusOnError="True">*</asp:RequiredFieldValidator><asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtDV"
            ErrorMessage="Debe ingresar el RUT completo." SetFocusOnError="True">*</asp:RequiredFieldValidator><br />
        <br />
        <asp:Button ID="btnValida" runat="server" Text="Valida" /><br />
        <br />
        <asp:ValidationSummary ID="valResumen" runat="server" ShowMessageBox="True" ShowSummary="False" />
    </div>
    </form>
</body>
</html>

Posteriormente, se debe seleccionar el proyecto Web como el proyecto por defecto y ejecutarlo. Una vez que se muestre la página Web en el navegador, obsérvese el código fuente de ésta para ver cómo se renderizó el control.

Adjuntos:
Descargar este archivo (RutValidator.2.1.rar)RutValidator.2.1.rar[Proyecto de ejemplo]34 kB

Deja tus comentarios

Enviar un comentario como invitado

0
Sus comentarios están sujetos a moderación por un administrador.
terminos y condiciones.

Solicítenos Ayuda

Puede comunicarse con nosotros mediante las siguientes vías:

  • Chat en vivo que se encuentra ubicado en la esquina inferior derecha de esta página
  • Enviando un mail a soporte

Enlaces Útiles

Sitios Web oficiales de algunas de las aplicaciones dominadas por Desytec:

Acerca de...

Conózcanos, estamos aquí para ayudarlo.

Volver