131 lines
5.3 KiB
HTML
131 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery PWStrength</title>
|
|
<link href="demo/style.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
<body>
|
|
<a href="https://github.com/matoilic/jquery.pwstrength" class="fork"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
|
<div id="wrapper">
|
|
<div class="download">
|
|
<a href="https://github.com/matoilic/jquery.pwstrength/zipball/master" title="Download as zip">
|
|
<img border="0" width="60" src="https://github.com/images/modules/download/zip.png">
|
|
</a>
|
|
<a href="https://github.com/matoilic/jquery.pwstrength/tarball/master" title="Download as tar.gz">
|
|
<img border="0" width="60" src="https://github.com/images/modules/download/tar.png">
|
|
</a>
|
|
</div>
|
|
<h1>jQuery Password Strength Indicator</h1>
|
|
<section id="usage">
|
|
<h2>Example</h2>
|
|
<form action="#" method="post">
|
|
<label for="field">Password:</label><br>
|
|
<input type="password" id="field" data-indicator="pwindicator">
|
|
<div id="pwindicator">
|
|
<div class="bar"></div>
|
|
<div class="label"></div>
|
|
</div>
|
|
</form>
|
|
|
|
<h2>Code</h2>
|
|
|
|
<p><strong>HTML</strong></p>
|
|
<code>
|
|
<pre>
|
|
<form action="#" method="post">
|
|
<label for="field">Password:</label><br>
|
|
<input type="password" id="field" data-indicator="<strong>pwindicator</strong>">
|
|
<div id="<strong>pwindicator</strong>">
|
|
<div class="bar"></div>
|
|
<div class="label"></div>
|
|
</div>
|
|
</form>
|
|
</pre>
|
|
</code>
|
|
|
|
<p>The data-indicator attribute on the password field specifies which element is used as indicator.</p>
|
|
|
|
<p><strong>JavaScript</strong></p>
|
|
<code>
|
|
<pre>
|
|
jQuery(function($) {
|
|
$('#field').pwstrength();
|
|
});
|
|
</pre>
|
|
</code>
|
|
|
|
<p>
|
|
<strong>You can also check the password manually by calling</strong>
|
|
</p>
|
|
<code><pre> $.pwstrength</pre></code>
|
|
</section>
|
|
<section id="options">
|
|
<h2>Options</h2>
|
|
<ul>
|
|
<li>
|
|
<p>
|
|
<strong>label</strong><br>
|
|
The Selector for the label element within the indicator container.<br>
|
|
Default: .label
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<strong>classes</strong><br>
|
|
The CSS classes which get added for each strength level.<br>
|
|
Default: ['pw-very-weak', 'pw-weak', 'pw-mediocre', 'pw-strong', 'pw-very-strong']
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<strong>texts</strong><br>
|
|
The texts that get inserted into the label for each strength level.<br>
|
|
Default: ['very weak', 'weak', 'mediocre', 'strong', 'very strong']
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<h2>Requirements</h2>
|
|
<p>jQuery 1.5 or higher</p>
|
|
</section>
|
|
<section id="support">
|
|
<h2>Supported Browsers</h2>
|
|
<ul>
|
|
<li>Firefox 3+</li>
|
|
<li>Safari 3+</li>
|
|
<li>Chrome 10+</li>
|
|
<li>Opera 9+</li>
|
|
<li>Internet Explorer 6+</li>
|
|
</ul>
|
|
</section>
|
|
<section id="download">
|
|
<h2>Download</h2>
|
|
<p>
|
|
You can download this project in either
|
|
<a href="https://github.com/matoilic/jquery.pwstrength/zipball/master">zip</a> or
|
|
<a href="https://github.com/matoilic/jquery.pwstrength/tarball/master">tar</a> formats.
|
|
</p>
|
|
<p>
|
|
You can also clone the project with <a href="http://git-scm.com">Git</a> by running:
|
|
<code>$ git clone git://github.com/matoilic/jquery.pwstrength</code>
|
|
</p>
|
|
</section>
|
|
<section id="licence">
|
|
<h2>Licence</h2>
|
|
<p>Copyright © 2012 Mato Ilic</p>
|
|
<p>jquery.pwstrength is dual licensed under the MIT and GPL licenses:</p>
|
|
<p>
|
|
<a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a><br>
|
|
<a href="http://www.gnu.org/licenses/gpl.html">http://www.gnu.org/licenses/gpl.html</a>
|
|
</p>
|
|
</section>
|
|
</div>
|
|
<script src="vendor/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="jquery.pwstrength.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript">
|
|
jQuery(function($) { $('#field').pwstrength(); });
|
|
</script>
|
|
</body>
|
|
</html> |