PHP

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

Сегодня, я покажу как можно сделать индикатор сложности пароля. Всего у нас будет 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;
?>


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

Теги:
password, strong, будет, style, пароле, height, width, background, indicator, match, checkpass, Проверяем, пароля, сложности, script, символов, ff0000, индикатор, function, else , помощью, title, верхнем, файле, javascript, будем, edc431, степени, Пароль, пароль, зависимости, нижнем, регистре, буквы, буква
Похожие новости:
Добавлено: 27 Февраля 2015 07:27:33 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...