Библиотека jQuery очень просто при интегрировании в любой сайт. И используя эту библиотеку можно довольно таки сложные вещи делать очень просто. К примеру, в этой статье я покажу как сделать простую проверку сложности пароля с помощью jQuery.
html структура
Ниже показана html структура части формы, в которой находится поле ввода пароля, метка с надписью «password» и <div>, который будет менять свой цвет в зависимости от сложности введенного пароля.
<div id="single_form_element"> <label class="label" for="new_pass">Password</label> <input type="password" name="password" value="" class="password-box"/> <div class="chk_avlblty chk_pswd"><span class="password-strength"></span> <span class="strength-text">Type Password</span></div> </div>
css стили
Стили очень просты, просто скопируйте их себе в ваш файл стилей и, если хотите, измените на свое усмотрение.
#single_form_element{margin-top:50px;}
#single_form_element .chk_avlblty{margin: 10px 0 0 110px;width:110px;text-align:right;}
#single_form_element .strength-text{font-size:13px;font-weight:bold;}
#single_form_element .chk_avlblty span.password-strength{width:110px;-moz-border-radius:5px;-webkit-border-radius:5px;height:10px;background-color:#555;display:block;}
#single_form_element .chk_avlblty span.client-avail{display:block;}
jQuery
Код описанный ниже скопируйте себе на сраницу внутри тега <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.webdeveloperjuice.com/demos/js/passwordstrength.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( 'input.password-box' ).live( 'keyup', function() {
var howStrong = passwordStrength( $( this ).val() );
$( '.strength-text', $( this ).next() ).text( howStrong );
var sColor = '#555';
switch( howStrong ) {
case 'Strong' :
$( '.password-strength', $( this ).next() ).css( 'background-color', 'green' );
break;
case 'Medium' :
$( '.password-strength', $( this ).next() ).css( 'background-color', 'lightgreen' );
break;
case 'Weak' :
$( '.password-strength', $( this ).next() ).css( 'background-color', 'orange' );
break;
case 'Short' :
$( '.password-strength', $( this ).next() ).css( 'background-color', 'red' );
break;
default :
$( '.password-strength', $( this ).next() ).css( 'background-color', '#555' );
}
}).focusout( function() {
$( this ).trigger( 'keyup' );
});
});
</script>
Скрип почему-то не работает, ваш пример на сайте тоже =(