jquery-pwd-measure
Version:
jQuery plugin to measure the strength of the password.
527 lines (448 loc) • 20 kB
text/jade
doctype 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
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")
body
#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'));
a.gh-ribbons(href="https://github.com/tsuyoshiwada/jquery-pwd-measure")
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")
div.hero
div.container
h1
i.fa.fa-code
| jQuery.pwdMeasure.js
p jQuery.pwdMeasure.js is jQuery plug-in that measure the strength of the password.
ul.list-inline
li
a.btn.btn--hero(href="https://raw.githubusercontent.com/tsuyoshiwada/jquery-pwd-measure/master/jquery.pwdMeasure.min.js", download)
i.fa.fa-download
| Download
li
a.btn.btn--hero(href="https://github.com/tsuyoshiwada/jquery-pwd-measure")
i.fa.fa-github
| Github
//- Shares
div.shares
a.twitter-share-button(href='https://twitter.com/share', data-url='http://tsuyoshiwada.github.io/jquery-pwd-measure/', data-lang='ja') ツイート
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');
div.fb-like(data-layout="button_count")
a.hatena-bookmark-button(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='このエントリーをはてなブックマークに追加')
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')
a.pocket-btn(data-pocket-label='pocket', data-pocket-count='horizontal', data-lang='en')
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");
//- Shares
div.container.contents
div.section
h2.section__title
i.fa.fa-hand-o-right
| Demo
div.form-group
label.form-group__label(for="demo-pm-input") パスワード
input#demo-pm-input.form-group__input(type="password", value="", placeholder="Your password")
div#demo-pm-indicator.pm-indicator
div.section
h2.section__title
i.fa.fa-paragraph
| Description
p <code>jQuery.pwdMeasure.js</code>はパスワードの強度を測定する<code>jQuery</code>プラグインです。
p 主な特徴は下記の通りです。
ul
li パスワードの強度をパーセント表示可能
li 単一の入力フィールド、確認フィールドへの対応
li 強度を示すラベルを詳細に設定可能
li 必要最低限のパスワード強度をパーセント指定可能
li 判定をクリアした時、値が変わった時などのコールバックをサポート
div.section
h2.section__title
i.fa.fa-rocket
| How To Use
h3 Install
p いつも通り<code>script</code>タグで読み込む方法以外に、<code>Bower</code>と<code>npm</code>でのインストールをサポートしています。
h4 npm
div.show-code
button.show-code__copy Copy
:markdown
```
$ npm install jquery-pwd-measure
```
h4 Bower
small ※非推奨, 更新の予定はありません
div.show-code
button.show-code__copy Copy
:markdown
```
$ bower install jquery-pwd-measure
```
h4 script
div.show-code
button.show-code__copy Copy
:markdown
```html
<script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./jquery.pwdMeasure.min.js"></script>
```
h3 Basic
h4 HTML
div.show-code
button.show-code__copy Copy
:markdown
```html
<input type="password" id="pm-input" value="" placeholder="Your Password">
<div id="pm-indicator"></div>
```
h4 JavaScript
div.show-code
button.show-code__copy Copy
:markdown
```js
$(document).ready(function(){
$("#pm-input").pwdMeasure();
});
```
div.section
h2.section__title
i.fa.fa-dot-circle-o
| Examples
h3 Basic
p
| 最も基本的な使い方です。単一の入力フィールドに対して、強度判定を行ないます。<br />
| デフォルトで<code>#pm-indicator</code>に強度が表示されます。
div.form-group
label.form-group__label(for="pm-input") パスワード
input#pm-input.form-group__input(type="password", value="", placeholder="Your password")
div#pm-indicator.pm-indicator
div.show-code
button.show-code__copy Copy
:markdown
```js
$("#pm-input").pwdMeasure();
```
h3 Confirm
p
| <code>confirm</code>オプションで確認用のフィールドを指定した例です。確認用のフィールドがある場合は、値が一致しているかのチェックも行ないます。
div.form-group
label.form-group__label(for="pm-input2") パスワード
input#pm-input2.form-group__input(type="password", value="", placeholder="Your password")
div.form-group
label.form-group__label(for="pm-confirm2") パスワード確認
input#pm-confirm2.form-group__input(type="password", value="", placeholder="Your password")
div#pm-indicator2.pm-indicator
div.show-code
button.show-code__copy Copy
:markdown
```js
$("#pm-input2").pwdMeasure({
indicator: "#pm-indicator2",
confirm: "#pm-input-confirm2"
});
```
h3 Change Labels
p 表示ラベルを変更する例です。
div.form-group
label.form-group__label(for="pm-input3") パスワード
input#pm-input3.form-group__input(type="password", value="", placeholder="Your password")
div#pm-indicator3.pm-indicator
div.show-code
button.show-code__copy Copy
:markdown
```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"}
]
});
```
h3 Change Events
p 強度判定を行うタイミングを決める為のイベントを変更することが出来ます。下記では<code>change</code>のみに絞っています。
div.form-group
label.form-group__label(for="pm-input4") パスワード
input#pm-input4.form-group__input(type="password", value="", placeholder="Your password")
div#pm-indicator4.pm-indicator
div.show-code
button.show-code__copy Copy
:markdown
```js
$("#pm-input4").pwdMeasure({
indicator: "#pm-indicator4",
events: "change"
});
```
h3 Use Callback
p
| コールバックを使用して、パスワードが一定の強度より低い場合はフォームの送信を止める例です。<br />
| 下記では強度を示すパーセントが50以下の場合送信をキャンセルします。
form#pm-form5
div.form-group
label.form-group__label(for="pm-input5") パスワード
input#pm-input5.form-group__input(type="password", value="", placeholder="Your password")
div.form-group
label.form-group__label(for="pm-confirm5") パスワード
input#pm-confirm5.form-group__input(type="password", value="", placeholder="Your password")
div#pm-indicator5.pm-indicator
div.text-center
button.btn.btn--primary(type="submit") Submit!
div.show-code
button.show-code__copy Copy
:markdown
```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();
}
});
```
div.section
h2.section__title
i.fa.fa-code
| Default Options
p オプションを指定せずに実行した場合、下記のオプションが適用されます。各オプションの詳細は<a href="https://github.com/tsuyoshiwada/jquery-pwd-measure">リポジトリ</a>にてご確認下さい。
div.show-code
button.show-code__copy Copy
:markdown
```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
});
```
div.section
h2.section__title
i.fa.fa-file-code-o
| CSS Example
p
| <code>jQuery.pwdMeasure.js</code>では、スタイルを柔軟に設定することが出来ます。<br />
| このページで強度表示に使用しているスタイルは次のとおりです。是非参考にしてみてください。
h3 CSS
div.show-code
button.show-code__copy Copy
:markdown
```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;
}
```
h3 Scss
div.show-code
button.show-code__copy Copy
:markdown
```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;
}
}
```
div.section
h2.section__title
i.fa.fa-bell-o
| Change Log
h3
| v1.0.5
small 2017.04.2504
p 非推奨になっていた<code>.size()</code>を<code>.length</code>に変更。(<a href="https://github.com/tsuyoshiwada/jquery-pwd-measure/pull/1">#1</a>)
h3
| v1.0.4
small 2015.06.13
p IE8以下で起きるエラーの修正。(<code>labels</code>内の<code>class</code>を<code>className</code>に変更しています)
h3
| v1.0.2
small 2015.02.14
p <code>bower</code>を使ったインストールに対応 & <code>empty</code>オプションの追加
h3
| v1.0.0
small 2015.01.24
p First Release.
div.footer
p.copyright <a href="https://github.com/tsuyoshiwada">tsuyoshiwada</a> Copyright © All Right Reserved.
script(type="text/javascript", src="./js/google-code-prettify/prettify.js")
script(type="text/javascript", src="./js/zeroclipboard-2.2.0/ZeroClipboard.min.js")
script(type="text/javascript", src="./js/jquery-1.11.1.min.js")
script(type="text/javascript", src="./js/jquery.pwdMeasure.js")
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();
}
});
}());
});