Tutorial:cree un hermoso medidor de fuerza de contraseña

En este tutorial, crearemos un hermoso indicador de seguridad de la contraseña. Determinará la complejidad de una contraseña y moverá un medidor en consecuencia con la ayuda del nuevo complemento Complexify jQuery. Solo cuando se ingrese una contraseña lo suficientemente compleja, el usuario podrá continuar con su registro.

También hay disponible un archivo PSD, para que pueda personalizar el formulario a su gusto.

El HTML

Comenzamos con un documento HTML5 estándar que incluirá nuestro formulario de registro. El formulario solo servirá como ejemplo del medidor de contraseñas:si necesita soporte para registros reales, deberá escribir el código del lado del servidor requerido.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>How to Make a Beautiful Password Strength Indicator</title>

        <!-- The stylesheet -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="main">

            <h1>Sign up, it's FREE!</h1>

            <form class="" method="post" action="">

                <div class="row email">
                    <input type="text" id="email" name="email" placeholder="Email" />
                </div>

                <div class="row pass">
                    <input type="password" id="password1" name="password1" placeholder="Password" />
                </div>

                <div class="row pass">
                    <input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
                </div>

                <!-- The rotating arrow -->
                <div class="arrowCap"></div>
                <div class="arrow"></div>

                <p class="meterText">Password Meter</p>

                <input type="submit" value="Register" />

            </form>
        </div>

        <!-- JavaScript includes - jQuery, the complexify plugin and our own script.js -->
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="assets/js/jquery.complexify.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

Incluimos la última versión de jQuery, el complemento Complexify y nuestro script.js justo antes de la etiqueta del cuerpo de cierre para un mejor rendimiento.

jQuery

El siguiente código jQuery es bastante sencillo. Estamos vinculando una serie de eventos a los elementos del formulario y validándolos. Si se encontró un error, agregamos un "error " clase a la .fila div que contiene la entrada. Esto mostrará la cruz roja. El "éxito Por otro lado, la clase " mostrará una marca de verificación verde. Cuando se envía el formulario, verificamos si todas las filas están marcadas como exitosas para permitir el envío.

activos/js/script.js

$(function(){

    // Form items
    var pass1 = $('#password1'),
        pass2 = $('#password2'),
        email = $('#email'),
        form = $('#main form'),
        arrow = $('#main .arrow');

    // Empty the fields on load
    $('#main .row input').val('');

    // Handle form submissions
    form.on('submit',function(e){

        // Is everything entered correctly?
        if($('#main .row.success').length == $('#main .row').length){

            // Yes!
            alert("Thank you for trying out this demo!");
            e.preventDefault(); // Remove this to allow actual submission

        }
        else{

            // No. Prevent form submission
            e.preventDefault();

        }
    });

    // Validate the email field
    email.on('blur',function(){

        // Very simple email validation
        if (!/^\[email protected]\S+\.\S+$/.test(email.val())){
            email.parent().addClass('error').removeClass('success');
        }
        else{
            email.parent().removeClass('error').addClass('success');
        }

    });

    /* The Complexify code will go here */

    // Validate the second password field
    pass2.on('keydown input',function(){

        // Make sure it equals the first
        if(pass2.val() == pass1.val()){

            pass2.parent()
                    .removeClass('error')
                    .addClass('success');
        }
        else{
            pass2.parent()
                    .removeClass('success')
                    .addClass('error');
        }
    });

});

Con esto fuera del camino, podemos continuar con el complemento Complexify que validará la contraseña. El complemento acepta una función de devolución de llamada con dos argumentos:un valor porcentual de 0 a 100 según la complejidad de la contraseña y un valor válido. indicador que tiene en cuenta el requisito de longitud mínima, definido por minimumChars propiedad.

Ajustando el strengthScaleFactor propiedad puede permitir el uso de contraseñas más simples. La escala predeterminada es 1, que requiere una combinación de letras mayúsculas y minúsculas, números y caracteres especiales, pero me pareció demasiado estricta, así que la reduje a 0,7. Puede reducirlo aún más si necesita contraseñas aún más simples.

pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){

    if(valid){
        pass2.removeAttr('disabled');

        pass1.parent()
                .removeClass('error')
                .addClass('success');
    }
    else{
        pass2.attr('disabled','true');

        pass1.parent()
                .removeClass('success')
                .addClass('error');
    }

    var calculated = (complexity/100)*268 - 134;
    var prop = 'rotate('+(calculated)+'deg)';

    // Rotate the arrow. Additional rules for different browser engines.
    arrow.css({
        '-moz-transform':prop,
        '-webkit-transform':prop,
        '-o-transform':prop,
        '-ms-transform':prop,
        'transform':prop
    });
});

Si se ha pasado un valor válido, habilitaremos el segundo campo de contraseña (está deshabilitado por defecto). También usaremos transformaciones CSS3 para rotar la flecha. La transformación se animará gracias a una propiedad de transición que puedes ver en la sección CSS. La flecha se mueve de -134 a 134 grados (los 0 grados predeterminados corresponden a la flecha que apunta verticalmente hacia arriba), por lo que el código lo compensa.

CSS

Incluiré aquí solo las partes más interesantes de la hoja de estilo. El código que sigue le da estilo a la flecha y define una transición.

activos/css/estilos.css

#main form .arrow{
    background: url("../img/arrow.png") no-repeat -10px 0;
    height: 120px;
    left: 214px;
    position: absolute;
    top: 392px;
    width: 11px;

    /* Defining a smooth CSS3 animation for turning the arrow */

    -moz-transition:0.3s;
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    -ms-transition:0.3s;
    transition:0.3s;

    /* Putting the arrow in its initial position */

    -moz-transform: rotate(-134deg);
    -webkit-transform: rotate(-134deg);
    -o-transform: rotate(-134deg);
    -ms-transform: rotate(-134deg);
    transform: rotate(-134deg);
}

/* The small piece that goes over the arrow */
#main form .arrowCap{
    background: url("../img/arrow.png") no-repeat -43px 0;
    height: 20px;
    left: 208px;
    position: absolute;
    top: 443px;
    width: 20px;
    z-index: 10;
}

Puede encontrar el resto del código en assets/css/styles.css . La mejor manera de aprender cómo funciona todo es inspeccionar la demostración en funcionamiento con las herramientas para desarrolladores de Firebug o Chrome y jugar con los estilos.

¡Hemos terminado!

Puede basarse en este ejemplo y usarlo para presentar una opción de validación llamativa para sus clientes. Y es aún más fácil de personalizar con el PSD incluido.