| Ratings | | Unique User Downloads | | Download Rankings |
 79% | | Total: 127 | | All time: 373 This week: 5 |
|
| Description | | Author |
This object can calculate and display the strength of a password.
It can listen to changes in a given form password input.
When the user enters a new password, the object calculates a factor that determines the strength of the password based om given requirements and displays messages to let the user know about the password quality.
The object can consider requirements like length of typed characters, upper and lower case characters, digits and special characters.
The message templates can be changed to support other languages. The output of the messages can be customized with CSS. It also allows changing the requirements for a check, as well the weights for scoring. Innovation Award
October 2016
Winner |
When a user enters a password on a site, it is often useful to let him know how easy it may be to guess that password, so the user enters a better one.
This object can show the strength of a given password as the user enters it on a form input.
It can configure the strength parameters based on the number of letters, digits and punctuation that the user entered.
Manuel Lemos |
| |
 |
|
Innovation award
Nominee: 1x
Winner: 1x |
|
Example
<!DOCTYPE html>
<html>
<head>
<title>Demo for password checker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="ahpwcheck.class.min.js"></script>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<h1>Demo 1 for password checker (ahpwcheck.class.js)</h1>
<nav>
<a href="example.html" class="active">example 1</a>
<a href="example2.html">example 2</a>
<a href="example3.html">example 3</a>
<a href="example4.html">example 4</a>
<a href="example5.html">example 5</a>
</nav>
<!-- ************************************************************** -->
<h2>Basic usage: watch a password field</h2>
<p class="info">
Type something. Below the form is an info field that shows
the kind of typed characters.
</p>
<form>
password-field:
<input type="password" id="ePassword">
</form>
<div id="outpwcheck"></div>
<script id="source">
var oPwCheck = new ahpwcheck();
oPwCheck.watch('ePassword', 'outpwcheck');
</script>
<!-- ************************************************************** -->
<h2>Explaination</h2>
<p>
A simple form contains a password field with id "ePassword".<br>
Below the form is a div with id "outpwcheck"<br>
<br>
The method "watch()" adds a listener. While you type something
the output div will be updated.
</p>
<script>
document.write("<pre>" + document.getElementById("source").innerHTML + "</pre>");
</script>
<hr>
DOCS: <a href="http://www.axel-hahn.de/docs/ahpwcheck/index.htm" target="_blank">http://www.axel-hahn.de/docs/ahpwcheck/index.htm</a>
</body>
</html>
|
Details
password check (ahpwcheck.class.js)
about
Javascript class for optical verification of an entered password.
You can define count of required letters, digits and special chars. This
class shows fulfilled requirements while a user types his (new) password.
* Author: Axel Hahn
* project home: <https://github.com/axelhahn/ahpwcheck>
* licence: GNU GPL
* see documentation: <http://www.axel-hahn.de/docs/ahpwcheck/index.htm>
examples
watch a password field and show requirements
var oPwCheck = new ahpwcheck(aOptions);
oPwCheck.watch(
[id of password field],
[id of div for output]
);
Show a score
var oPwCheck = new ahpwcheck(aOptions);
alert(oPwCheck.getScore('My:0815;Password');
see example html files in the package and the section Get started in the documentation:
<http://www.axel-hahn.de/docs/ahpwcheck/get_started.htm>
| |
Applications that use this package |
|
No pages of applications that use this class were specified.
If you know an application of this package, send a message to the author to add a link here.
Files
Download
ahpwcheck.class.js
