Я недавно работал над проектом Pass. Ввод пароля в модуль регистрации внутри требует прочности пароля (низкий, средний и высокий). Сегодня я поделюсь с вами результатами работы. Код не так сложный, как поиск в Интернете, и может удовлетворить общие потребности.
HTML -код выглядит следующим образом:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8"/>
<Title> Сила пароля </title>
<стиль типа = "text/css">
#PassStrength {высота: 6px; ширина: 120px; граница: 1px sold #ccc; padding: 2px;}
.strengthlv1 {founal: красный; высота: 6px; ширина: 40px;}
.strengthlv2 {founal: Orange; высота: 6px; ширина: 80px;}
.strengthlv3 {founal: green; высота: 6px; ширина: 120px;}
</style>
</head>
<тело>
<input type = "password" name = "pass" id = "pass" maxlength = "16"/>
<div>
<em> Сила пароля: </em>
<div id = "passstrength"> </div>
</div>
</body>
</html>
<script type = "text/javascript" src = "js/passwordstrength.js"> </script>
<script type = "text/javascript">
новая пароль ('pass', 'passstrength');
</script>
Код JS выглядит следующим образом:
Кода -копия выглядит следующим образом:
Функция PasswordStrength (passwordId, PellessID) {
this.init (witherid);
var _this = это;
document.getElementbyId (password) .onkeyup = function () {
_this.checkstrength (this.value);
}
};
PasswordStrength.prototype.init = function (witherID) {
var id = document.getElementbyId (witenID);
var div = document.createElement ('div');
var strong = document.createElement ('strong');
this.ostrength = id.appendchild (div);
this.ostrengthtxt = id.parentnode.appendchild (strong);
};
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.ostrength.classname = 'wielslv' + lv;
this.ostrengthtxt.innerhtml = alvtxt [lv];
};
Изображение воспроизведения:
Инструкции для использования:
1. Первым параметром объекта является идентификатор окна ввода пароля, а второй параметр - это идентификатор панели прочности пароля.
2. Метод проверки, который может настроить правила прочности пароля.
3. Сила пароля отображается низким, средним и высоким, соответствует 3 стилям CSS (Pelleslv1, Plieslv2, Pellylv3).