Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2014 » Апрель » 5 » Индикатор надежности пароля


19:44
Индикатор надежности пароля

Индикатор надежности пароля

 

 

ДЕМО                      СКАЧАТЬ

В этом уроке мы будем создавать красивый индикатор надежности пароля. Он будет определять сложность пароля и двигаться с помощью нового плагина JQuery . После того,  когда пароль будет достаточно сложный, пользователь сможет продолжить свою регистрацию.

HTML

Мы начнем с документа  HTML5, который будет включать нашу регистрационную форму. Форма будет служить лишь в качестве примера счетчика пароля - если вам нужна поддержка для реальных регистраций, вам нужно будет написать необходимый код на стороне сервера.

index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>How to Make a Beautiful Password Strength Indicator</title>

 

        <!-- The stylesheet -->

        <link rel="stylesheet" href="assets/css/styles.css" />

 

        <!--[if lt IE 9]>

          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

    </head>

 

    <body>

 

        <div id="main">

 

                <h1>Sign up, it's FREE!</h1>

 

                <form class="" method="post" action="">

 

                               <div class="row email">

                                               <input type="text" id="email" name="email" placeholder="Email" />

                               </div>

 

                               <div class="row pass">

                                               <input type="password" id="password1" name="password1" placeholder="Password" />

                               </div>

 

                               <div class="row pass">

                                               <input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />

                               </div>

 

                               <!-- The rotating arrow -->

                               <div class="arrowCap"></div>

                               <div class="arrow"></div>

 

                               <p class="meterText">Password Meter</p>

 

                               <input type="submit" value="Register" />

 

                </form>

        </div>

 

        <!-- JavaScript includes - jQuery, the complexify plugin and our own script.js -->

        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

        <script src="assets/js/jquery.complexify.js"></script>

        <script src="assets/js/script.js"></script>

 

    </body>

</html>

 

 

JQuery

Код JQuery который приведен ниже довольно прост. Мы связываем ряд мероприятий для элементов формы и проверки их. Если произошла ошибка, мы добавляем "класс ошибка", который содержит входные данные. На экране появится красный крестик. " Класс успех ", с другой стороны появится зеленая галочка.

активы / JS / script.js

 

$(function(){

 

    // Form items

    var pass1 = $('#password1'),

        pass2 = $('#password2'),

        email = $('#email'),

        form = $('#main form'),

        arrow = $('#main .arrow');

 

    // Empty the fields on load

    $('#main .row input').val('');

 

    // Handle form submissions

    form.on('submit',function(e){

 

        // Is everything entered correctly?

        if($('#main .row.success').length == $('#main .row').length){

 

            // Yes!

            alert("Thank you for trying out this demo!");

            e.preventDefault(); // Remove this to allow actual submission

 

        }

        else{

 

            // No. Prevent form submission

            e.preventDefault();

 

        }

    });

 

    // Validate the email field

    email.on('blur',function(){

 

        // Very simple email validation

        if (!/^\S+@\S+\.\S+$/.test(email.val())){

            email.parent().addClass('error').removeClass('success');

        }

        else{

            email.parent().removeClass('error').addClass('success');

        }

 

    });

 

    /* The Complexify code will go here */

 

    // Validate the second password field

    pass2.on('keydown input',function(){

 

        // Make sure it equals the first

        if(pass2.val() == pass1.val()){

 

            pass2.parent()

                    .removeClass('error')

                    .addClass('success');

        }

        else{

            pass2.parent()

                    .removeClass('success')

                    .addClass('error');

        }

    });

 

});

 

Плагин принимает функцию обратного вызова с двумя аргументами - значение в процентах от 0 до 100 в зависимости от сложности пароля, учитывающий минимальные требования,  длину, определяемую minimumChars.

Масштаб по умолчанию является 1, который требует комплекс  верхнего и нижнего регистра букв, цифр и специальных символов, но я счел его слишком строгим, поэтому я опустил его до 0,7. Вы можете снизить его еще больше, если вам нужны еще более простые пароли.

 

pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){

 

    if(valid){

        pass2.removeAttr('disabled');

 

        pass1.parent()

                .removeClass('error')

                .addClass('success');

    }

    else{

        pass2.attr('disabled','true');

 

        pass1.parent()

                .removeClass('success')

                .addClass('error');

    }

 

    var calculated = (complexity/100)*268 - 134;

    var prop = 'rotate('+(calculated)+'deg)';

 

    // Rotate the arrow. Additional rules for different browser engines.

    arrow.css({

        '-moz-transform':prop,

        '-webkit-transform':prop,

        '-o-transform':prop,

        '-ms-transform':prop,

        'transform':prop

    });

});

 

Мы также будем использовать CSS3 преобразования, чтобы поворачивать  стрелку. Преобразование будет анимационным , которое можно увидеть в разделе CSS. Стрелка перемещается от -134 до 134 градусов (по умолчанию 0 градусов соответствует вертикальной стрелке), так что код компенсирует это.

CSS

Я буду включать только наиболее интересные части таблицы стилей. Приведенный ниже код стилей стрелки  и определения перехода.

активы / CSS / styles.css

 

#main form .arrow{

    background: url("../img/arrow.png") no-repeat -10px 0;

    height: 120px;

    left: 214px;

    position: absolute;

    top: 392px;

    width: 11px;

 

                /* Defining a smooth CSS3 animation for turning the arrow */

 

    -moz-transition:0.3s;

    -webkit-transition:0.3s;

    -o-transition:0.3s;

    -ms-transition:0.3s;

    transition:0.3s;

 

    /* Putting the arrow in its initial position */

 

    -moz-transform: rotate(-134deg);

    -webkit-transform: rotate(-134deg);

    -o-transform: rotate(-134deg);

    -ms-transform: rotate(-134deg);

    transform: rotate(-134deg);

}

 

/* The small piece that goes over the arrow */

#main form .arrowCap{

    background: url("../img/arrow.png") no-repeat -43px 0;

    height: 20px;

    left: 208px;

    position: absolute;

    top: 443px;

    width: 20px;

    z-index: 10;

}

 

Вы можете найти остальную часть кода в активах / CSS / styles.css . 

 Мы закончили!

ДЕМО                      СКАЧАТЬ

 

Источник

Категория: CSS//HTML//JS | Просмотров: 946 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди