Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Código CSS Además, hemos separado una serie de estilos CSS, que servirán para personalizar la apariencia del mensaje de fortaleza de la clave. Para que sea más visual y vistoso, podrá tener 3 colores distintos. Rojo cuando la clave es débil, naranja cuando es medianamente segura y verde cuando es una clave con una fortaleza adecuada. <style type="text/css"> .avisoclave{ margin-left:10px; font-size: 9pt; display: inline; } .clavefloja{ color: #990000; } .clavemedia{ color: #cc8800; } .clavefuerte{ color: #009900; } </style>
Como hemos podido ver, tenemos una clase llamada "avisoclave" que es general, con estilos generales para el mensaje de aviso de fortaleza de la clave, que valdrán en todos los casos. Luego tenemos 3 clases para cada uno de los posibles estados de fuerza o debilidad de la contraseña.
Clase Mootools para generar el aviso de fortaleza de la contraseña Ahora viene la parte más bonita, aunque la más complicada de entender, que es en la que creamos el script Javascript con la clase Mootools que automatizará todo el proceso de visionado del estado de seguridad de la clave. Para ir imaginándola previamente, pensar que la clase Mootools debe contener: Un constructor, que inicialice el objeto que se encargará de mostrar la fortaleza. Este constructor debe situar en la página, al lado del campo INPUT password un contenedor para mostrar el mensaje de fuerza o debilidad de la clave. Además, debe evaluarse por primera vez la clave para mostrar su fortaleza Además, debe crearse un evento asociado al campo INPUT password para que, cuando el usuario escriba texto en ese campo password, cambie el mensaje que muestra la seguridad de la clave. También tendremos un método en la clase, que se encargará de evaluar lo que el usuario haya escrito en el campo password, para mostrar la fuerza o debilidad de la contraseña. Este método debe recuperar el value del campo INPUT password. Luego, viendo lo que hay en ese INPUT, decidir el nivel de consistencia de la clave Según el nivel de la clave, debe escribir lo que toque (clave débil, media o fuerte) en el elemento que se había generado para mostrar el mensaje de fortaleza de la clave. Además, según la fortaleza o debilidad, debe asignar las clases de CSS correspondientes, que se crearon para darle más visibilidad al mensaje. Una vez que hemos entendido algo los requisitos de este sistema, vamos a ver el código
Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
59