JQuery_jquery に基づくパスワード強度検証コード

これは JQuery ベースのコントロールであるため、当然、このコントロールには JQuery ライブラリと JS が必要です。 JQuery の JS は公式 Web サイトからダウンロードできます: http://code.jquery.com/jquery-1.4.2.min.js
このコントロールの JS ファイル:password_strength_plugin.js
password_strength_plugin.js

コードをコピーします コードは次のとおりです:

(function($){
$.fn.shortPass = '短すぎます';
$.fn.badPass = '弱い';
$.fn.goodPass = '強い';
$.fn.samePassword = 'ユーザー名とパスワードが同じです。';
$.fn.resultStyle = "";
$.fn.passStrength = function(options) {
vardefaults = {
shortPass: "shortPass ", // オプション
badPass: "badPass", // オプション
goodPass: "goodPass", // オプション
strongPass: "strongPass", // オプション
baseStyle: "testresult", //オプション
userid: "", //必須のオーバーライド
messageloc: 1 // == 0 の前、または == 1 の後
}; $.extend(defaults, options );
return this.each(function() {
var obj = $(this);
$(obj).unbind().keyup(function()
{
var results = $.fn.teststrength($(this).val(),$(opts.userid).val(),opts);
if(opts.messageloc === 1) )
{
$(this).next("." opts.baseStyle).remove();
$(this).after("< ;/span>");
$(this).next("." opts.baseStyle).addClass($(this).resultStyle).find(" scan").text(results );
}
else
{
$(this).prev("." opts.baseStyle).remove();
$(this) .before("");
$(this).prev("." opts. BaseStyle).addClass($( this).resultStyle).find("span").text(results);
}
}); function(password,username,option ){
var core = 0;
//password < 4
if (password.length < 4 ) { this.resultStyle = option.shortPass;return $( this).shortPass; }
//パスワード == ユーザー名
if (password.toLowerCase()==username.toLowerCase()){this.resultStyle = option.badPass;return $(this).samePassword ;}
// パスワードの長さ
スコア = パスワード.長さ * 4;
スコア = ( $.fn.checkRepetition(1,password).length - パスワード.長さ ) * 1; = ( $.fn.checkRepetition (2,password).length - パスワード.length ) * 1;
スコア = ( $.fn.checkRepetition(3,password).length - password.length ) * 1; >score = ( $.fn .checkRepetition(4,password).length - password.length ) * 1;
//パスワードには 3 つの数字があります
if (password.match(/(.*[0-9) ].*[0-9 ].*[0-9])/)){ スコア = 5;}
//パスワードには 2 つの記号があります
if (password.match(/(.*[!, @,#,$,% ,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){スコア = 5 ;}
//パスワードには上位文字と下位文字があります
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { スコア = 10;}
//パスワードには数字と文字が含まれています
if (password.match(/([a-zA-Z])/) && password.match(/([0-9]) /)){ スコア = 15 ;}
//
//パスワードには数字と記号が含まれています
if (password.match(/([!,@,#,$,%,^,&, *,?,_,~ ])/) && password.match(/([0-9])/)){ スコア = 15;}
//パスワードには文字と記号が含まれています
if (パスワード. match(/([!, @,#,$,%,^,&,*,?,_,~])/) &&password.match(/([a-zA-Z])/)){スコア= 15;}
//パスワードは単なる数字または文字です
if (password.match(/^w $/) || password.match(/^d $/) ){ スコア -= 10; }
// 0 < スコア < 100
if ( スコア < 0 ){ スコア = 0;}
if ( スコア > 100 ){ スコア = 100;}
if (スコア < 34 ){ this.resultStyle = option.badPass; return $(this).badPass;}
if (score < 68 ){ this.resultStyle = option.goodPass; return $(this).goodPass ;}
this.strongPass;
return
}); 🎜>$.fn.checkRepetition = function(pLen,str) {
var res = "";
for (var i=0; i{
var繰り返し = true;
for (var j=0;j 繰り返し = 繰り返し && (str.charAt(j i)==str. charAt(j i pLen));
}
if (jif (repeat) {
i =pLen-1;
}
else {
res =str.charAt(i)
}
}

;
この制御ファイルの css 文例：
style.css

复制代码代码如下:

td label{
font-size:14px;
フォントの太さ:太字;
カラー:#666;
フォントファミリー: arail、helvetica、san-serif;
}
input{
高さ:28px;
幅:200ピクセル;
ボーダー:1px ソリッド #ccc;
フォントサイズ:16px;
フォントの太さ: 太字;
カラー:#666;
パディング:7px 0 0 4px;
}
/* 高度なスタイル */
.top_testresult{
font-weight: 太字;
フォントサイズ:13px;
フォントファミリー: arail、helvetica、san-serif;
カラー:#666;
パディング:0;
マージン:0 0 2px 0;
}
.top_testresult scan{
padding:6px ;
マージン:0;
}
.top_shortPass{
background:#edabab;
ボーダー:1px ソリッド #bc0000;
表示:ブロック;
}
.top_shortPass スパン{
}
.top_badPass{
background:#edabab;
ボーダー:1px ソリッド #bc0000;
表示:ブロック;
}
.top_badPass スパン{
}
.top_goodPass{
background:#ede3ab;
ボーダー:1px ソリッド #bc9f00;
表示:ブロック;
}
.top_goodPass スパン{
}
.top_strongPass{
background:#d3edab;
ボーダー:1px ソリッド #73bc00;
表示:ブロック;
}
.top_strongPass span{
}
/* 結果のスタイル */
.testresult{
font-weight: 太字;
フォントサイズ:13px;
フォントファミリー: arial、helvetica、san-serif;
カラー:#666;
パディング:0px 0px 12px 10px;
マージン左:10px;
表示: ブロック;
高さ:28px;
浮動小数点:左;
}
.testresultspan{
padding:10px 20px 12px 10px;
マージン: 0px 0px 0px 20px;
表示:ブロック;
float:right;
空白: nowrap;
}
.shortPass{
background:url(../images/red.png) no-repeat 0 0;
}
.shortPass span{
background:url(../images/red.png) 右上;
}
.badPass{
background:url(../images/red.png) no-repeat 0 0;
}
.badPass span{
background:url(../images/red.png) 右上;
}
.goodPass{
background:url(../images/ yellow.png) no-repeat 0 0;
}
.goodPass span{
background:url(../images/ yellow.png) 右上; 繰り返しなし;
}
.strongPass{
background:url(../images/green.png) no-repeat 0 0;
}
.strongPass span{
background:url(../images/green.png) 右上; 繰り返しなし;
}

head部分代码
head

复制代码 代码如下:

$(document).ready( function() {
//BASIC
$(".password_test").passStrength({
userid: "#user_id"
});
//ADVANCED
$(".password_adv").passStrength({
shortPass: "top_shortPass",
badPass: "top_badPass",
goodPass: "top_goodPass",
strongPass : "top_strongPass",
baseStyle: "top_testresult",
userid: "#user_id_adv",
messageloc: 0
});

本体部分代码
本体

复制代码 代码如下:

<表 cellpadding="2" cellpacing="0" border="0">

ユーザー名:



パスワード:

関連ラベル：

jquery パスワードの強度

ソース：php.cn

前の記事：JavaScript ページの更新とポップアップ ウィンドウの問題の解決策_JavaScript スキル 次の記事：JavaScript オブジェクト指向コード practice_js オブジェクト指向

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...

から 2024-04-05 09:26:49

0

1

1418

エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...

から 2024-04-04 18:40:04

0

1

3528

ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...

から 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...

から 2024-04-04 12:53:48

0

1

303

関連トピック

詳細>

• jqueryプラグインとは何ですか?
• jQueryでJSONを操作する方法
• jqueryで要素を削除する方法
• jQueryのhover()メソッドの使用
• jqueryはページングメソッドを実装します
• jqueryの隠し要素とは何ですか
• jQueryでハイライト表示されているもの
• Huaweiデュアルシステム間で設定を切り替える方法