$('#pass').keyup(function(e) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!');
}
return true;
});
Assumes this HTML:
<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>
example please!
Just stick it into dreamweaver and run it! … or even Notepad :)
didn’t work !
did you add your jquery file to the page
Worked fine for me, and is a very good discerning script
@Amine : To get it working you just have to paste the code after the closing tag
Thanks for the snippet
Not work for me
how I put the js codes into html file?
This code snippet works great! Here is the simple code in action: http://jsfiddle.net/9SUWP/
must be use this js with above codes
script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
Cool snippet. :)
Really usefully snippet , pity I only saw it now as I could of used for a recent project I completed. Next time!
Best Example. Thanks for share code. I send additional css code for your example, and changed to take the js code as follows:
CSS:
.passstrength {
border: 1px solid #D7D7D7;
background-color: #eaeaea;
font-size: 9px;
vertical-align: middle;
display: inline-block;
margin-top: 5px;
}
.passstrength.error {
border: 1px solid #ff6161;
background-color: #ff7575;
}
.passstrength.alert {
border: 1px solid #ffc937;
background-color: #ffde5a;
}
.passstrength.ok {
border: 1px solid #4bb12c;
background-color: #57c435;
}
JS:
$(‘#pass’).keyup(function(e) {
…
if (false == enoughRegex.test($(this).val())) {
$(this).next(‘.passstrength’).html(”);
} else if (strongRegex.test($(this).val())) {
$(this).next(‘.passstrength’).attr(‘class’,’passstrength’);
$(this).next(‘.passstrength’).addClass(‘ok’);
$(this).next(‘.passstrength’).html(‘Strong!’);
} else if (mediumRegex.test($(this).val())) {
$(this).next(‘.passstrength’).attr(‘class’,’passstrength’);
$(this).next(‘.passstrength’).addClass(‘alert’);
$(this).next(‘.passstrength’).html(‘Medium!’);
} else {
$(this).next(‘.passstrength’).attr(‘class’,’passstrength’);
$(this).next(‘.passstrength’).addClass(‘error’);
$(this).next(‘.passstrength’).html(‘Weak!’);
}
…
});
$(‘#pass’).keyup(function(e) {
…
if (false == enoughRegex.test($(this).val())) {
$(‘.passstrength’).html(”);
} else if (strongRegex.test($(this).val())) {
$(‘.passstrength’).attr(‘class’,’passstrength’);
$(‘.passstrength’).addClass(‘ok’);
$(‘.passstrength’).html(‘Strong!’);
} else if (mediumRegex.test($(this).val())) {
$(‘.passstrength’).attr(‘class’,’passstrength’);
$(‘.passstrength’).addClass(‘alert’);
$(‘.passstrength’).html(‘Medium!’);
} else {
$(‘.passstrength’).attr(‘class’,’passstrength’);
$(‘.passstrength’).addClass(‘error’);
$(‘.passstrength’).html(‘Weak!’);
}
…
});
Nice script. Just what I was looking for. I made a small tweak so I had a more obvious notification to the user, and simplified as there was only minimum characters needed for my script.
http://jsfiddle.net/Xt9yG/
Thanks again for the script.
why return true? why not false?
Can we return $(this) to allow chainning?