Создаем индикатор сложности пароля



password
Сегодня, я покажу как можно сделать индикатор сложности пароля. Всего у нас будет 4 степени сложности пароля: очень слабый, слабый, простой и надежный. Каждой степени сложности будет соответствовать свой цвет.

Надежным мы будем считать пароль, который будет состоять не меньше, чем из 6-ти символов и в нем будет содержаться минимум 1 цифра, спецсимвол, буква в нижнем регистре и буква в верхнем регистре. Для работы нам понадобятся PHP и jQuery.


Создадим 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;
?>

В готовом виде, при надежном пароле индикатор будет выглядеть вот так:
Индикатор пароля



Теги: , ,

Оставить комментарий