Eu tenho trabalhado em um projeto de aprovação recentemente. Digitar uma senha no módulo de registro interno requer a força da senha (baixa, média e alta). Hoje vou compartilhar com você os resultados do trabalho. O código não é tão complicado quanto a pesquisa on -line e pode atender às necessidades gerais.
O código HTML é o seguinte:
A cópia do código é a seguinte:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
<title> força de senha </title>
<style type = "text/css">
#PassStriot {Hight: 6px; largura: 120px; borda: 1px Solid #CCC; Padding: 2px;}
.StrengthLv1 {Background: Red; Altura: 6px; Largura: 40px;}
.StrengthLv2 {Background: Orange; Altura: 6px; Largura: 80px;}
.StrengthLv3 {Background: Green; Altura: 6px; Largura: 120px;}
</style>
</head>
<Body>
<input type = "senha" name = "pass" id = "pass" maxlength = "16"/>
<div>
<em> Força de senha: </em>
<div id = "Passviário"> </div>
</div>
</body>
</html>
<script type = "text/javascript" src = "js/senhastrendlest.js"> </script>
<script type = "text/javascript">
novo PasswordStrength ('Pass', 'Passvinder');
</script>
O código JS é o seguinte:
A cópia do código é a seguinte:
Função senha PasswordStength (PasswordID, fortaleId) {
this.init (fortaldid);
var _This = this;
document.getElementById (PasswordID) .onKeyUp = function () {
_This.CheckStrength (this.value);
}
};
PasswordStrength.prototype.init = function (fortaleId) {
var id = document.getElementById (fortaleDID);
var div = document.createElement ('div');
var fort = document.createElement ('forte');
this.oStrength = id.appendChild (div);
this.osttrengthTxt = id.parentnode.appendChild (forte);
};
PasswordStrength.prototype.CheckStength = function (Val) {
var alvtxt = ['', 'Low', 'Medium', 'High'];
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.
this.osttrengthtxt.innerhtml = alvtxt [lv];
};
Imagem de reprodução:
Instruções para uso:
1. O primeiro parâmetro do objeto é o ID da caixa de entrada de senha e o segundo parâmetro é o ID da barra de força de senha.
2. O método de seleção de seleção pode personalizar as regras de força da senha.
3. A resistência à senha exibe baixa, média e alta corresponde a 3 estilos CSS (Strengthlv1, Strengthlv2, Strengthlv3).