U.Helper

07 Января 2009 14:10
Главная » 2009 » Январь » 7 » Проверка уровня сложности пароля. Украшательство.
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?>

5. Пример: здесь.
Просмотров: 957 | Добавил: kydapodatsya | Рейтинг: 5.0/2 |
Всего комментариев: 5
0
}{0тт@бь)ч[Материал] 14:54, 07 Января 2009
насяльника, а плимер? sad

Ответ:в короткой версии было, поставил в полную...
Цитировать
Сайт
0
Vanofuture[Материал] 18:34, 07 Января 2009
Как-то не слишком эффективно работает.
qwerty получил 8 из 10, 123456 получил 7 из 10. biggrin

Ответ:123456 - логический ряд. а qwerty - нет...
Цитировать
Сайт
0
Fluder[Материал] 01:21, 08 Января 2009
у меня не работает.
Даже не знаю почему... вроде всё правильно делал.

Ответ:ссылку в студию
Цитировать
Сайт
0
Fluder[Материал] 18:27, 08 Января 2009
вот

Ответ:почему у Вас 2 раза jQ подключен?
Цитировать
Сайт
0
CoolFENIX[Материал] 00:45, 10 Января 2009
Решения только на jq пошли...
Цитировать
Сайт
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
U.Helper © Используются технологии uCoz