通常のパスワード強度チェック

最低文字数5文字に設定

強度を表すラベル、ラベルの文字色、文字数を設定

パスワード強度の表示位置を変更

セキュリティレベル0に設定

セキュリティレベル2に設定

ラベル名変更

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<style>
	#PassStrength .PassStrength-box {
		width: 500px;
		margin: 20px auto;
	}
	#PassStrength .PassStrength-box p {
		font-weight: bold;
		margin-bottom: 5px;
	}
	#PassStrength .PassStrength-box #out {
		margin-bottom: 5px;
	}
</style>
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.passstrength.min.j"></script>
<script>
	$(window).load(function(){
		$('#passwd1').passStrengthify();
		$('#passwd2').passStrengthify({minimum:5});
		$('#passwd3').passStrengthify({
			levels: ['', 'Bad', 'Okay', 'Good'],
			colours: ['black', 'pink', '#A26FFF', 'orange'],
			tests: [/.{1}/, /.{5}/, /.{10}/ ]
		});
		$('#passwd4').passStrengthify({
			element: $('#out')
		});
		$('#passwd5').passStrengthify({
			security:0,
			rawEntropy:true
		});
		$('#passwd6').passStrengthify({
			security:2,
			rawEntropy:true
		});
		$('#passwd7').passStrengthify({
			minimum: 5,
			labels: {
				passwordStrength: 'パスワード強度'
			}
		});
	});
</script>
<div class="PassStrength-box">
	<p class="title">通常のパスワード強度チェック</p>
	<input type="text" id="passwd1" class="pass">
</div>

<div class="PassStrength-box">
	<p class="title">最低文字数5文字に設定</p>
	<input type="text" id="passwd2" class="pass">
</div>

<div class="PassStrength-box">
	<p class="title">強度を表すラベル、ラベルの文字色、文字数を設定</p>
	<input type="text" id="passwd3" class="pass">
</div>

<div class="PassStrength-box">
	<p class="title">パスワード強度の表示位置を変更</p>
	<div id="out"></div>
	<input type="text" id="passwd4" class="pass">
</div>

<div class="PassStrength-box">
	<p class="title">セキュリティレベル0に設定</p>
	<input type="text" id="passwd5" class="pass">
</div>

 <div class="PassStrength-box">
	<p class="title">セキュリティレベル2に設定</p>
	<input type="text" id="passwd6" class="pass">
</div>

<div class="PassStrength-box">
	<p class="title">ラベル名変更</p>
	<input type="text" id="passwd7" class="pass">
</div>

PassStrengthについて

PassStrengthは、入力されたパスワードの強度をわかりやすく表示してくれるプラグインです。
セキュリティレベルの設定や、表示するラベルの色、カラーなどをオプションから変更することができます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • Picker

    Picker

    ラジオボタンやチェックボックスのスタイルをクールにしてくれる

  • Autosize

    Autosize

    テキストエリアの高さを入力内容に応じて動的に伸縮

  • Chosen

    Chosen

    セレクトボックスの見た目と機能をグレードアップ

  • fancyInput

    fancyInput

    入力フォームの文字入力をユニークな見た目、動作に変更

  • ClearableTextField

    ClearableTextField

    入力フォームに文字を入力すると文字削除用のボタンを表示