jquery-pwd-measure
Version:
jQuery plugin to measure the strength of the password.
451 lines (417 loc) • 20.4 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="jQuery.pwdMeasure.jsはパスワードの強度を測定するjQueryプラグインです。">
<meta name="keywords" content="jQuery, パスワード, 強度, プラグイン, jQuery.pwdMeasure.js">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="website">
<meta property="og:title" content="jQuery.pwdMeasure.js">
<meta property="og:description" content="jQuery.pwdMeasure.jsはパスワードの強度を測定するjQueryプラグインです。">
<meta property="og:url" content="http://tsuyoshiwada.github.io/jquery-pwd-measure/">
<meta property="og:site_name" content="jQuery.pwdMeasure.js">
<title>jQuery.pwdMeasure.js</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="./js/google-code-prettify/prettify.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="fb-root">
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</div><a href="https://github.com/tsuyoshiwada/jquery-pwd-measure" class="gh-ribbons"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="hero">
<div class="container">
<h1><i class="fa fa-code"></i> jQuery.pwdMeasure.js</h1>
<p>jQuery.pwdMeasure.js is jQuery plug-in that measure the strength of the password.</p>
<ul class="list-inline">
<li><a href="https://raw.githubusercontent.com/tsuyoshiwada/jquery-pwd-measure/master/jquery.pwdMeasure.min.js" download class="btn btn--hero"><i class="fa fa-download"></i> Download</a></li>
<li><a href="https://github.com/tsuyoshiwada/jquery-pwd-measure" class="btn btn--hero"><i class="fa fa-github"></i> Github</a></li>
</ul>
<div class="shares"><a href="https://twitter.com/share" data-url="http://tsuyoshiwada.github.io/jquery-pwd-measure/" data-lang="ja" class="twitter-share-button">ツイート
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script></a>
<div data-layout="button_count" class="fb-like"></div><a href="http://b.hatena.ne.jp/entry/http://tsuyoshiwada.github.io/jquery-pwd-measure/" data-hatena-bookmark-title="jQuery.pwdMeasure.js" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加" class="hatena-bookmark-button"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;">
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></a><a data-pocket-label="pocket" data-pocket-count="horizontal" data-lang="en" class="pocket-btn">
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></a>
</div>
</div>
</div>
<div class="container contents">
<div class="section">
<h2 class="section__title"><i class="fa fa-hand-o-right"></i> Demo</h2>
<div class="form-group">
<label for="demo-pm-input" class="form-group__label">パスワード</label>
<input id="demo-pm-input" type="password" value="" placeholder="Your password" class="form-group__input">
</div>
<div id="demo-pm-indicator" class="pm-indicator"></div>
</div>
<div class="section">
<h2 class="section__title"><i class="fa fa-paragraph"></i> Description</h2>
<p><code>jQuery.pwdMeasure.js</code>はパスワードの強度を測定する<code>jQuery</code>プラグインです。</p>
<p>主な特徴は下記の通りです。</p>
<ul>
<li>パスワードの強度をパーセント表示可能</li>
<li>単一の入力フィールド、確認フィールドへの対応</li>
<li>強度を示すラベルを詳細に設定可能</li>
<li>必要最低限のパスワード強度をパーセント指定可能</li>
<li>判定をクリアした時、値が変わった時などのコールバックをサポート</li>
</ul>
</div>
<div class="section">
<h2 class="section__title"><i class="fa fa-rocket"></i> How To Use</h2>
<h3>Install</h3>
<p>いつも通り<code>script</code>タグで読み込む方法以外に、<code>Bower</code>と<code>npm</code>でのインストールをサポートしています。</p>
<h4>npm</h4>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code>$ npm install jquery-pwd-measure
</code></pre>
</div>
<h4>Bower<small>※非推奨, 更新の予定はありません</small></h4>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code>$ bower install jquery-pwd-measure
</code></pre>
</div>
<h4>script</h4>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-html"><script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./jquery.pwdMeasure.min.js"></script>
</code></pre>
</div>
<h3>Basic</h3>
<h4>HTML</h4>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-html"><input type="password" id="pm-input" value="" placeholder="Your Password">
<div id="pm-indicator"></div>
</code></pre>
</div>
<h4>JavaScript</h4>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-js">$(document).ready(function(){
$("#pm-input").pwdMeasure();
});
</code></pre>
</div>
</div>
<div class="section">
<h2 class="section__title"><i class="fa fa-dot-circle-o"></i> Examples</h2>
<h3>Basic</h3>
<p>
最も基本的な使い方です。単一の入力フィールドに対して、強度判定を行ないます。<br />
デフォルトで<code>#pm-indicator</code>に強度が表示されます。
</p>
<div class="form-group">
<label for="pm-input" class="form-group__label">パスワード</label>
<input id="pm-input" type="password" value="" placeholder="Your password" class="form-group__input">
</div>
<div id="pm-indicator" class="pm-indicator"></div>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-js">$("#pm-input").pwdMeasure();
</code></pre>
</div>
<h3>Confirm</h3>
<p><code>confirm</code>オプションで確認用のフィールドを指定した例です。確認用のフィールドがある場合は、値が一致しているかのチェックも行ないます。</p>
<div class="form-group">
<label for="pm-input2" class="form-group__label">パスワード</label>
<input id="pm-input2" type="password" value="" placeholder="Your password" class="form-group__input">
</div>
<div class="form-group">
<label for="pm-confirm2" class="form-group__label">パスワード確認</label>
<input id="pm-confirm2" type="password" value="" placeholder="Your password" class="form-group__input">
</div>
<div id="pm-indicator2" class="pm-indicator"></div>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-js">$("#pm-input2").pwdMeasure({
indicator: "#pm-indicator2",
confirm: "#pm-input-confirm2"
});
</code></pre>
</div>
<h3>Change Labels</h3>
<p>表示ラベルを変更する例です。</p>
<div class="form-group">
<label for="pm-input3" class="form-group__label">パスワード</label>
<input id="pm-input3" type="password" value="" placeholder="Your password" class="form-group__input">
</div>
<div id="pm-indicator3" class="pm-indicator"></div>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-js">$("#pm-input3").pwdMeasure({
indicator: "#pm-indicator3",
indicatorTemplate: "<%= label %>",
labels: [
{score:10, label:"Level 1", className:"very-weak"},
{score:30, label:"Level 2", className:"weak"},
{score:50, label:"Level 3", className:"average"},
{score:70, label:"Level 4", className:"strong"},
{score:100, label:"Max!!", className:"very-strong"}
]
});
</code></pre>
</div>
<h3>Change Events</h3>
<p>強度判定を行うタイミングを決める為のイベントを変更することが出来ます。下記では<code>change</code>のみに絞っています。</p>
<div class="form-group">
<label for="pm-input4" class="form-group__label">パスワード</label>
<input id="pm-input4" type="password" value="" placeholder="Your password" class="form-group__input">
</div>
<div id="pm-indicator4" class="pm-indicator"></div>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-js">$("#pm-input4").pwdMeasure({
indicator: "#pm-indicator4",
events: "change"
});
</code></pre>
</div>
<h3>Use Callback</h3>
<p>
コールバックを使用して、パスワードが一定の強度より低い場合はフォームの送信を止める例です。<br />
下記では強度を示すパーセントが50以下の場合送信をキャンセルします。
</p>
<form id="pm-form5">
<div class="form-group">
<label for="pm-input5" class="form-group__label">パスワード</label>
<input id="pm-input5" type="password" value="" placeholder="Your password" class="form-group__input">
</div>
<div class="form-group">
<label for="pm-confirm5" class="form-group__label">パスワード</label>
<input id="pm-confirm5" type="password" value="" placeholder="Your password" class="form-group__input">
</div>
<div id="pm-indicator5" class="pm-indicator"></div>
<div class="text-center">
<button type="submit" class="btn btn--primary">Submit!</button>
</div>
</form>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-js">var $form = $("#pm-form5");
// submitイベントをキャンセル
function formCancelSubmit(){
$form.off("submit").on("submit", function(e){
alert("パスワードが一致しないか基準値に達していません！");
e.preventDefault();
});
}
formCancelSubmit();
// コールバックを使用する
$("#pm-input5").pwdMeasure({
minScore: 50,
confirm: "#pm-confirm5",
indicator: "#pm-indicator5",
onValid: function(percentage, label, className){
$form.off("submit");
},
onInvalid: function(percentage, label, className){
formCancelSubmit();
}
});
</code></pre>
</div>
</div>
<div class="section">
<h2 class="section__title"><i class="fa fa-code"></i> Default Options</h2>
<p>オプションを指定せずに実行した場合、下記のオプションが適用されます。各オプションの詳細は<a href="https://github.com/tsuyoshiwada/jquery-pwd-measure">リポジトリ</a>にてご確認下さい。</p>
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-js">$(selector).pwdMeasure({
minScore: 50,
minLength: 6,
events: "keyup change",
labels: [
{score:10, label:"とても弱い", className:"very-weak"}, //0~10%
{score:30, label:"弱い", className:"weak"}, //11~30%
{score:50, label:"平均", className:"average"}, //31~50%
{score:70, label:"強い", className:"strong"}, //51~70%
{score:100, label:"とても強い", className:"very-strong"}, //71~100%
{score:"notMatch", label:"不一致", className:"not-match"}, //not match
{score:"empty", label:"未入力", className:"empty"} //empty
],
indicator: "#pm-indicator",
indicatorTemplate: "パスワード強度: <%= label %> (<%= percentage %>%)",
confirm: false,
// Callbacks
onValid: false,
onInvalid: false,
onNotMatch: false,
onEmpty: false,
onChangeState: false,
onChangeValue: false
});
</code></pre>
</div>
</div>
<div class="section">
<h2 class="section__title"><i class="fa fa-file-code-o"></i> CSS Example</h2>
<p>
<code>jQuery.pwdMeasure.js</code>では、スタイルを柔軟に設定することが出来ます。<br />
このページで強度表示に使用しているスタイルは次のとおりです。是非参考にしてみてください。
</p>
<h3>CSS
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-css">.pm-indicator {
margin:10px 0;
padding:1.5em 1em;
color:#2c3e50;
font-size:12px;
text-align:center;
border:1px solid #ccc;
border-radius:2px;
background:#e4e4e4;
text-shadow:1px 1px 0 rgba(255,255,255,.8);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
.pm-indicator.very-weak,
.pm-indicator.not-match {
border-color:#be1d30;
background-color:#ffc3cf;
}
.pm-indicator.weak {
border-color:#ff787d;
background-color:#ffe6e5;
}
.pm-indicator.strong {
border-color:#78bc42;
background-color:#bceea6;
}
.pm-indicator.very-strong {
border-color:#4f85a7;
background-color:#68c6d7;
}
</code></pre>
</div>
</h3>
<h3>Scss
<div class="show-code">
<button class="show-code__copy">Copy</button><pre><code class="lang-css">.pm-indicator {
margin:10px 0;
padding:1.5em 1em;
background:#e4e4e4;
border:1px solid #ccc;
border-radius:2px;
color:#2c3e50;
font-size:12px;
text-shadow:1px 1px 0 rgba(255, 255, 255, .8);
text-align:center;
transition:all .2s ease-in-out;
&.very-weak,
&.not-match {
background-color:#ffc3cf;
border-color:#be1d30;
}
&.weak {
background-color:#ffe6e5;
border-color:#ff787d;
}
&.average {
}
&.strong {
background-color:#bceea6;
border-color:#78bc42;
}
&.very-strong {
background-color:#68c6d7;
border-color:#4f85a7;
}
}
</code></pre>
</div>
</h3>
</div>
<div class="section">
<h2 class="section__title"> <i class="fa fa-bell-o"></i> Change Log</h2>
<h3>v1.0.5<small>2017.04.2504</small></h3>
<p>非推奨になっていた<code>.size()</code>を<code>.length</code>に変更。(<a href="https://github.com/tsuyoshiwada/jquery-pwd-measure/pull/1">#1</a>)</p>
<h3>v1.0.4<small>2015.06.13</small></h3>
<p>IE8以下で起きるエラーの修正。(<code>labels</code>内の<code>class</code>を<code>className</code>に変更しています)</p>
<h3>v1.0.2<small>2015.02.14</small></h3>
<p><code>bower</code>を使ったインストールに対応 & <code>empty</code>オプションの追加</p>
<h3>v1.0.0<small>2015.01.24</small></h3>
<p>First Release.</p>
</div>
</div>
<div class="footer">
<p class="copyright"><a href="https://github.com/tsuyoshiwada">tsuyoshiwada</a> Copyright © All Right Reserved.</p>
</div>
<script type="text/javascript" src="./js/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="./js/zeroclipboard-2.2.0/ZeroClipboard.min.js"></script>
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.pwdMeasure.js"></script>
<script>
$(function(){
// syntax highlight
$(".show-code").each(function(){
$("code", this).addClass("prettyprint");
});
prettyPrint();
// copy button
$(".show-code__copy").each(function(){
var $this = $(this);
$this.attr("data-clipboard-text", $this.parent().find("code").text());
var client = new ZeroClipboard($this);
//- client.on("ready", function(){
//- console.log("hhghgh");
//- });
});
// demo
$("#demo-pm-input").pwdMeasure({
indicator: "#demo-pm-indicator"
});
// basic
$("#pm-input").pwdMeasure();
// confirm
$("#pm-input2").pwdMeasure({
indicator: "#pm-indicator2",
confirm: "#pm-confirm2"
});
// change labels
$("#pm-input3").pwdMeasure({
indicator: "#pm-indicator3",
indicatorTemplate: "<%= label %>",
labels: [
{score:10, label:"Level 1", className:"very-weak"},
{score:30, label:"Level 2", className:"weak"},
{score:50, label:"Level 3", className:"average"},
{score:70, label:"Level 4", className:"strong"},
{score:100, label:"Max!!", className:"very-strong"}
]
});
// change events
$("#pm-input4").pwdMeasure({
indicator: "#pm-indicator4",
events: "change"
});
// use callback
(function(){
var $form = $("#pm-form5");
// submitイベントをキャンセル
function formCancelSubmit(){
$form.off("submit").on("submit", function(e){
alert("パスワードが一致しないか基準値に達していません！");
e.preventDefault();
});
}
formCancelSubmit();
// コールバックを使用する
$("#pm-input5").pwdMeasure({
minScore: 50,
confirm: "#pm-confirm5",
indicator: "#pm-indicator5",
onValid: function(percentage, label, className){
$form.off("submit");
},
onInvalid: function(percentage, label, className){
formCancelSubmit();
}
});
}());
});
</script>
</body>
</html>