Создаем индикатор сложности пароля
Сегодня, я покажу как можно сделать индикатор сложности пароля. Всего у нас будет 4 степени сложности пароля: очень слабый, слабый, простой и надежный. Каждой степени сложности будет соответствовать свой цвет.
Надежным мы будем считать пароль, который будет состоять не меньше, чем из 6-ти символов и в нем будет содержаться минимум 1 цифра, спецсимвол, буква в нижнем регистре и буква в верхнем регистре. Для работы нам понадобятся PHP и .
Создадим 2 файла: indicator.php и checkpass.php. В файле indicator.php будет текстовое поле для ввода пароля и наш индикатор в виде полоски. С помощью ajax’a, мы будем отправлять пароль на проверку в файл checkpass.php.
Файл indicator.php
<html>
<head>
<title>.::2coders.ru::.</title>
<style type="text/css">
#indicator {
background:#d9d6d6;
width:200px;
height:10px;
margin-top:5px;
}
</style>
<script src='../js/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
$('#password').keyup(function () {
val = $('#password').val();
$.ajax({
type: "POST",
url: "checkpass.php",
data: "password="+val,
success: function(html){
$("#indicator").html(html);
}
});
});
});
</script>
</head>
<body>
Пароль: <input type="password" name="password" id="password"/>
<div id="indicator"></div>
</body>
</html>
В файле checkpass.php с помощью регулярных выражений будет производиться проверка, на содержание тех или иных символов в пароле. Степень сложности пароля будет храниться в переменной $strong. В зависимости от содержащихся символов, увеличиваем или оставляем неизменным значение переменной $strong. Пробел будет считаться недопустимым символом.
Файл checkpass.php
<?php
$password = $_POST['password'];
//Проверяем, есть ли пробелы в пароле
if(preg_match("/([\s])/", $password))
{
$html = '<div style="background:#ff0000; width:100%; height:10px;"></div>';
$html .= "Недопустимые символы в пароле";
}
else
{
if(strlen($password) < 6)
{
$html = '<div style="background:#ff0000; width:100%; height:10px;"></div>';
$html .= "Пароль должен быть не менее 6 символов";
}
else
{
$strong = 0;
//Проверяем, есть ли в пароле числа
if(preg_match("/([0-9]+)/", $password))
{
$strong++;
}
//Проверяем, есть ли в пароле буквы в нижнем регистре
if(preg_match("/([a-z]+)/", $password))
{
$strong++;
}
//Проверяем, есть ли в пароле буквы в верхнем регистре
if(preg_match("/([A-Z]+)/", $password))
{
$strong++;
}
//Проверяем, есть ли в пароле спецсимволы
if(preg_match("/\W/", $password))
{
$strong++;
}
//В зависимости от сложности пароля выводим полоски
if($strong == 1)
{
$html = '<div style="background:#ff0000; width:25%; height:10px;"></div>';
$html .= "Очень слабый";
}
if($strong == 2)
{
$html = '<div style="background:#edc431; width:50%; height:10px;"></div>';
$html .= "Слабый";
}
if($strong == 3)
{
$html = '<div style="background:#edc431; width:50%; height:10px;"></div>';
$html .= "Простой";
}
if($strong == 4)
{
$html = '<div style="background:#2dda2f; width:100%; height:10px;"></div>';
$html .= "Надежный";
}
}
}
echo $html;
?>
В готовом виде, при надежном пароле индикатор будет выглядеть вот так:
No comments yet!