Skip to content

Instantly share code, notes, and snippets.

@njonsson
Created May 12, 2010 21:59
Show Gist options
  • Save njonsson/399181 to your computer and use it in GitHub Desktop.
Save njonsson/399181 to your computer and use it in GitHub Desktop.
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>
passwordComplexity jQuery plugin demo
</title>
<style type='text/css'>
* {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
}
.field {
clear: both;
}
.field label {
display: block;
float: left;
padding: 0.25em 0.5em 0 0;
text-align: right;
width: 5em;
height: 2em;
}
.field input {
width: 6em;
}
.password-complexity {
background-color: #fcf0ad;
border-top: 1px solid lightgrey;
border-right: 1px solid dimgray;
border-bottom: 1px solid dimgray;
border-left: 1px solid lightgrey;
font-size: 70%;
margin-left: 1em;
padding: 0.25em;
}
</style>
</head>
<body>
<div class='field'>
<label for='password'>Password:</label>
<input id='password' name='password' type='password' />
</div>
<div class='field'>
<label for='password_confirmation'>Again:</label>
<input name='password_confirmation' type='password' />
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='jquery.password-complexity.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery.noConflict();
(function ($) {
$(document).ready(function () {
$(':password:first').passwordComplexity();
});
}(jQuery));
//]]>
</script>
</body>
</html>
'use strict';
(function ($) {
$.fn.passwordComplexity = function () {
return this.each(function () {
var suggestionsElement = $('<span class="password-complexity" ' +
'style="display: none;">' +
'</span>');
$(this).after(suggestionsElement).blur(function () {
var password = $(this).val(),
suggestions = [],
message = null;
if (0 !== password.length) {
if (password.match(/[a-z]/) === null) {
suggestions.push('a lowercase letter');
}
if (password.match(/[A-Z]/) === null) {
suggestions.push('an uppercase letter');
}
if (password.match(/\d/) === null) {
suggestions.push('a numeric character');
}
if (password.match(/[\W_]/) === null) {
suggestions.push('a punctuation character');
}
if (0 !== suggestions.length) {
message = 'Add ' +
suggestions.join(' or ') +
' to strengthen your password.';
}
}
if (message) {
suggestionsElement.html(message).fadeIn();
} else {
suggestionsElement.fadeOut(function () {
suggestionsElement.html(message);
});
}
});
});
};
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment