Form.PasswordStrength

Builds and animates a password strength meter under an input element, using basic information entropy.

by nak5ive

HTML

<script src="https://github.com/nak5ive/Form.PasswordStrength/raw/master/Source/Form.PasswordStrength.js"></script>
<form>
    <label for="password">Password</label>
    <input id="password" type="password" name="password" value=""/>
</form>
<pre id="console"></pre>

CSS

form {
    margin-bottom: 1em;
}
pre {
    color: #666;
    font-size: 10px;
}

JavaScript

new Form.PasswordStrength('password', {
    primer: 'Gr8Pass!',
    height: 3,
    bgcolor: '#666',
    opacity: 1,
    onUpdate: function(element, strength, threshold){
        var console = document.id('console');
        var buffer = console.get('text');
        var out = "Strength: " + (100 * strength / threshold).round().limit(0, 100) + "%\t" + element.get('value') + "\n";
        console.set('text', out + buffer);
    }
});