Los sitios web con registro de usuarios deberían tener implementado la verificación de seguridad de clave, para evitar que los usuarios al poner claves muy fáciles de adivinar sean blancos de “hackers”, y estos a su vez puedan confiar más en el sitio donde se registraron.
¿Como debería ser una clave segura?
Esto será dependiendo del sitio, porque no será igual registrarte en un blog cualquiera o registrarte en un sitio donde tengas información personal y financiera.
Esta ves podemos sentirnos seguros con tener una clave donde tenga una letras, letras en mayúscula, números y un mínimo de caracteres en la clave.
Esto no asegura 100% de efectividad ya que como es código JavaScript el usuario puede hacer uso de algún complemento para saltar el paso, esto es para facilitar al usuario a no recargar la página y consultar el servidor para la verificación, pero luego se debería implementar para mayor seguridad de cumplir las reglas.
Comenzamos con el tutorial para implementarlo.
Paso 1: Incluir Scripts y Estilos
Antes que nada debemos llamar a la
librería jQuery con la cual trabajaremos y a una hoja de estilos para el formulario, también el script que hará la funcionalidad de validación.
[html]
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="script.js"></script>
[/html]
Paso 2: Estructura HTML
Dentro del formulario de registro tendremos una llamada en el evento “onsubmit”, si la clave esta vacía o no cumple con las reglas de una clave segura no seguirá la petición del formulario.
[html]
<form onsubmit="return checkform($('#pswd').val());" id="login" >
<ul>
<!– html –>
<li>
<label for="pswd">Clave:</label>
<span><input id="pswd" type="password" name="pswd" /></span>
</li>
<li>
<button type="submit">Register</button>
</li>
</ul>
</form>
[/html]
Paso 3: HTML de validación
El siguiente es una estructura HTML que servirá de información para los posibles errores cometidos en el formulario.
[html]
<div id="pswd_info">
<h4>Las claves deben cumplir las siguientes reglas:</h4>
<ul>
<li id="letter" class="invalid">Por lo menos <strong>una letra</strong></li>
<li id="capital" class="invalid">Por lo menos <strong>una letra mayuscula</strong></li>
<li id="number" class="invalid">Por lo menos <strong>un numero</strong></li>
<li id="length" class="invalid">Debe tener <strong> más de 8 caracteres</strong></li>
</ul>
</div>
[/html]
Ver Demo – Descargar
vía: WebDesignerDepot.com
