public
Last active — forked from njonsson/demo.html

Just a refactor for njonsson - Example seen here: http://jsbin.com/ayoxa4/2

  • Download Gist
demo.html
Liquid
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
<?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();
jQuery(document).ready(function($) {
$(document).ready(function () {
$(':password:first').passwordComplexity();
});
});
//]]>
</script>
</body>
</html>
jquery.password-complexity.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
'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));

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.