Mostrar contraseña segura con jQuery en un campo HTML, Bootstrap (Predicción)

Mostrar contraseña segura con jQuery en un campo HTML, Bootstrap (Predicción), este excelente plugin muestra la fortaleza de una contraseña antes de ser ingresado al sistema, esta funcionalidad es muy útil pues apoya a tu sistema con una importante labor de seguridad.

Demostración: https://oscaruhp.github.io/password_strength/

1. -Para empezar vamos primero a incluir Bootstrap y JQuery

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

2.- Luego incluiremos los archivos del plugin

<link rel="stylesheet" href="css/strength.css">
<script src="js/password_strength.js"></script>
<script src="js/jquery-strength.js"></script>

3.- Como paso 3 crearemos nuestro campo input tipo password o componente text en tipo password (le pondremos una clase llamada check-seguridad).

<input type="password" class="check-seguridad form-control" name="password" value="" />

4.- Agregaremos la conversión del campo entrada mediante la siguiente instrucción:

	$(".check-seguridad").strength();

5.- Cambiamos la configuración del plugin y lo podemos poner en español o las clases que consideres necesarias.

jQuery(function($) {
			
			$(".check-seguridad").strength({
				templates: {
    			toggle: '<span class="input-group-addon"><span class="glyphicon glyphicon-eye-open {toggleClass}"></span></span>'
                
                },
                scoreLables: {
                        empty: 'Vacío',
                        invalid: 'Invalido',
                        weak: 'Débil',
                        good: 'Bueno',
                        strong: 'Fuerte'
                    }, 
                scoreClasses: {
                        empty: '',
                        invalid: 'label-danger',
                        weak: 'label-warning',
                        good: 'label-info',
                        strong: 'label-success'
                    },

			});
		});

Si la información te ha gustado no olvides en apoyarnos compartiendo el contenido y te invitamos a suscribirte a nuestro canal: http://youtube.com/develoteca

The post Mostrar contraseña segura con jQuery en un campo HTML, Bootstrap (Predicción) appeared first on Develoteca.