Minimal jQuery Password Strength Meter - YAPSM

File Size: 4.92KB
Views Total: 1277
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal jQuery Password Strength Meter - YAPSM

YAPSM is an extremely simple jQuery plugin that makes it easy to create a real-time password strength meter attached to your password input field.

See also:

How to use it:

1. Create the Html.

<form class="form-stacked">
<fieldset class="inputs">
<input id="user_name" name="user[name]" type="text" placeholder="Enter your username" />
<input id="user_password" name="user[password]" type="password" placeholder="Enter your password" />
<p id="password_complexity"></p>
</fieldset>
<fieldset class="buttons">
<input name="commit" type="submit" value="Submit" />
</fieldset>
</form>

2. Load the jQuery javascript library and jQuery YAPSM plugin on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.YAPSM.js"></script>

3. Implement the plugin.

<script>
$("#user_password").yapsm({
dictionary: function() // dictionary function
})
.keyup(function() {
$("#password_complexity").html(this.complexity);
});
</script>

This awesome jQuery plugin is developed by trimentor. For more Advanced Usages, please check the demo page or visit the official website.