He estado trabajando en un proyecto de pase recientemente. Ingresar una contraseña en el módulo de registro en el interior requiere la resistencia de la contraseña (baja, media y alta). Hoy compartiré con ustedes los resultados del trabajo. El código no es tan complicado como la búsqueda en línea y puede satisfacer las necesidades generales.
El código HTML es el siguiente:
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8"/>
<title> Password Strength </title>
<style type = "text/css">
#passstrength {altura: 6px; ancho: 120px; borde: 1px sólido #ccc; padding: 2px;}
.strengthlv1 {fondo: rojo; altura: 6px; ancho: 40px;}
.Strengthlv2 {fondo: naranja; altura: 6px; ancho: 80px;}
.Strengthlv3 {fondo: verde; altura: 6px; ancho: 120px;}
</style>
</ablo>
<Body>
<input type = "contraseña" name = "pass" id = "pass" maxLength = "16"/>
<div>
<em> Fuerza de contraseña: </em>
<div id = "passstrength"> </div>
</div>
</body>
</html>
<script type = "text/javaScript" src = "js/contraseñaTrength.js"> </script>
<script type = "text/javaScript">
nueva contraseña Estrength ('pass', 'passstrength');
</script>
El código JS es el siguiente:
La copia del código es la siguiente:
Función PasswordStrength (PasswordId, StrenityId) {
this.init (fortaleza);
var _This = this;
document.getElementById (PasswordId) .OnkeyUp = function () {
_THIS.CHECKSTRength (this.Value);
}
};
PasswordStrength.prototype.init = function (StrenityId) {
var id = document.getElementById (StrenityId);
var div = document.createElement ('div');
var strong = document.createElement ('fuerte');
this.ostrength = id.appendChild (div);
this.ostrengthtxt = id.ParentNode.AppendChild (Strong);
};
PasswordStrength.Prototype.Checkstrength = function (val) {
var alvtxt = ['', 'bajo', 'medio', 'alto'];
var lv = 0;
if (val.match (/[az]/g)) {lv ++;}
if (val.match (/[0-9]/g)) {lv ++;}
if (val.match (/(.§ A-Z0-9])/g)) {lv ++;}
if (val.length <6) {lv = 0;}
if (lv> 3) {lv = 3;}
this.ostrength.classname = 'FortalentLv' + lv;
this.ostrengthtxt.innerhtml = Alvtxt [lv];
};
Imagen de reproducción:
Instrucciones para su uso:
1. El primer parámetro del objeto es la ID del cuadro de entrada de contraseña, y el segundo parámetro es la ID de la barra de resistencia de contraseña.
2. El método CheckStrength puede personalizar las reglas de resistencia de la contraseña.
3. La intensidad de la contraseña muestra baja, media y alta corresponde a 3 estilos CSS (Fuerza de Fuerza1, Fuerza de Fuerza2, Fuerza de Fuerza3).