U.Helper

23 Декабря 2008 15:10
Главная » Разработки » Разработки для модуля "Пользователи" » Проверка уровня сложности пароля. Украшательство.
1. Подключаем jQuery
2. Добавляем следующий ява-скрипт между <head> и </head>
Code

<script type="text/javascript">
$.fn.passwordStrength = function( options ){
  return this.each(function(){
  var that = this;that.opts = {};
  that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);
   
  that.div = $(that.opts.targetDiv);
  that.defaultClass = that.div.attr('class');
   
  that.percents = (that.opts.classes.length) ? 100 / that.opts.classes.length : 100;

  v = $(this)
  .keyup(function(){
  if( typeof el == "undefined" )
  this.el = $(this);
  var s = getPasswordStrength (this.value);
  var p = this.percents;
  var t = Math.floor( s / p );
   
  if( 100 <= s )
  t = this.opts.classes.length - 1;
   
  this.div
  .removeAttr('class')
  .addClass( this.defaultClass )
  .addClass( this.opts.classes[ t ] );
   
  })
  .after('')
  .next()
  .click(function(){
  $(this).prev().val( randomPassword() ).trigger('keyup');
  return false;
  });
  });

  function getPasswordStrength(H){
  var D=(H.length);
  if(D>5){
  D=5
  }
  var F=H.replace(/[0-9]/g,"");
  var G=(H.length-F.length);
  if(G>3){G=3}
  var A=H.replace(/\W/g,"");
  var C=(H.length-A.length);
  if(C>3){C=3}
  var B=H.replace(/[A-Z]/g,"");
  var I=(H.length-B.length);
  if(I>3){I=3}
  var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
  if(E<0){E=0}
  if(E>100){E=100}
  return E
  }

  function randomPassword() {
  var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$_+";
  var size = 10;
  var i = 1;
  var ret = ""
  while ( i <= size ) {
  $max = chars.length-1;
  $num = Math.floor(Math.random()*$max);
  $temp = chars.substr($num, 1);
  ret += $temp;
  i++;
  }
  return ret;
  }

};
   
$.fn.passwordStrength.defaults = {
  classes : Array('is10','is20','is30','is40','is50','is60','is70','is80','is90','is100'),
  targetDiv : '#passwordStrengthDiv',
  cache : {}
}
$(document)
.ready(function(){
  $('input[name="password"]').passwordStrength();
  });
</script>

3. В CSS добавляем следующее:
Code

.is0{background:url("/progressImg1.png") no-repeat 0 0;width:138px;height:7px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}

где progressImg1.png - картинка, отвечающая за графическое отображение.
Картинку заливаем в корень своего сайта (по умолчанию), либо в другую какую-нибудь папку, не забывая исправить ссылку на картинку в CSS.
4. Главная » Управление дизайном » Редактирование шаблонов - Форма регистрации пользователей.
Находим (по умолчанию):
Code

<?if($PASSWORD_FL$)?>
<tr id="siM45"><td class="manTd1" id="siM46">$PASSWORD_SIGN$</td><td class="manTd2" id="siM47">$PASSWORD_FL$</td>
</tr>
<?endif?>

заменяем на следующее:
Code
<?if($PASSWORD_FL$)?>
<tr id="siM45"><td class="manTd1" id="siM46">$PASSWORD_SIGN$</td><td class="manTd2" id="siM47">$PASSWORD_FL$</td>
</tr><tr><td>Проверка безопасности: </td><td><div id="passwordStrengthDiv" class="is0"></div></td>
</tr>
<?endif?>



Правила использования:

  • Все права на публикуемые скрипты принадлежат их авторам!
  • Запрещается распространение скриптов без указания автора!
  • Запрещается "затирание" копирайтов!
Рейтинг: ← 11 →
Модуль: Пользователи | 3214 просмотров | Автор: kydapodatsya | Добавлено: 23 Декабря 2008 | Пример | Теги: украшательство
5 комментариев

-1
bgsnd[Материал] 22:19, 03 Февраля 2009
Здравствуйте, применил ваш скрипт, но увы.

Что я не так сделал?


Ответ:значит что-то не сделали.. ссылку, где устанавливали....
Цитировать
E-MailСайт
-1
mrSpam[Материал] 12:05, 07 Апреля 2009
Скрипт умер! =(

Ответ:попробуйте поставить скрипт после <body>
Цитировать
Сайт
-1
Senek[Материал] 14:02, 24 Июля 2009
Ну почему же украшательство, по моему полезно — визуальное отображение фантазии пользователя ;)
Цитировать
-1
Daniil[Материал] 01:07, 29 Мая 2010
аналогично! сделал все по инструкции, но скрипт не работает!
Цитировать
0
vitnet[Материал] 12:19, 23 Февраля 2011
а где картинка?
Цитировать
E-Mail
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

© U.Helper 2007-2024 Используются технологии uCoz