JQ テクノロジーは、パスワード強度検証_jquery を備えた登録ページを実装します

主に、パスワード強度検証を備えた登録ページを実装するための jQuery の使用方法を紹介します。もちろん、パスワード強度検証を備えた美しい登録ページを生成するには、関連するプラグインとクラス ライブラリを使用する必要があります。以下のように:

関連するプラグインとライブラリ

complexify - パスワード強度チェック jQuery プラグイン
justgage - 互換性の高いダッシュボード クラス ライブラリ
主な機能

登録にはパスワード強度の検証コンポーネントが含まれています。ユーザーは登録する前に一定の強度のパスワードを設定する必要があります。
パスワードの強度は、ダッシュボード クラス ライブラリ justgage を使用して表示されます。強度が異なるパスワードは、異なる色で表示されます
。 パスワードの強度が要件を満たすと、登録ボタンが表示されます
コードの説明

HTML：

<div id="page-wrap">
<div id="title">注册新账号 - gbtags.com</div>
<p>
<input type="text" name="email" id="email" placeholder="电子邮件"/>
</p>
<p>
<input type="password" name="password" id="password" placeholder="输入密码"/>
</p>
<div id="complexity"></div>
<p>
<input type="button" name="submit" id="submit" value="注册" />
</p>
<p id="msgbox"></p>
</div>

電子メールとパスワードの入力ボックスと、そのパスワード強度のコンポーネントを追加します。

JavaScript:

次のような必要なクラス ライブラリをインポートします。

<スクリプト src="js/jquery.placeholder.min.js">
<スクリプト src="js/raphael.2.1.0.min.js">
<スクリプト src="js/justgage.1.0.1.min.js">

以下は、ダッシュボードとそのパスワード強度を生成するコードです:

$(function(){
$('#submit').attr('disabled', true);
var g1 = new JustGage({
id: "complexity",
value: 0,
min: 0,
max: 100,
title: "密码强度提示",
titleFontColor: '#9d7540',
valueFontColor : '#CCCCCC',
label: "points",
levelColors: [
"#dfa65a",
"#926d3b",
"#584224"
]
});
$('input[placeholder]').placeholder();
$("#password").complexify({}, function(valid, complexity){
if(valid){
$('#submit').fadeIn();
}else{
$('#submit').fadeOut();
}
g1.refresh(Math.round(complexity));
});
$('#submit').click(function(){
$('#msgbox').html('welcome to gbtags.com');
});
});

上記のコードでは、JustGage を使用して必要なダッシュボードを生成します。関連するオプションについてはコードを参照してください。

次のコードでは、complexify のコールバック メソッドを使用して、ユーザーが入力したパスワードの強度が要件を満たしているかどうかを判断します。

$("#password").complexify({}, function(valid, complexity){
if(valid){
$('#submit').fadeIn();
}else{
$('#submit').fadeOut();
}
g1.refresh(Math.round(complexity));
});

一致する場合は登録ボタンが表示され、一致しない場合は非表示になります。ダッシュボードの値と色を同時に更新します。

CSS代码：

body{
background: url('../images/body.png');
}
 
#container{
background: url('../images/bg.jpg');
padding: 30px;
margin-top: 150px;
box-shadow: 0px 0px 30px #9d7540;
border-radius: 5px 5px 0px 0px;
}
 
#page-wrap{
margin: 0 auto;
width: 310px;
text-align: center;
font-size: 14px;
padding:0px;
font-family: Arial;
}
 
P{
margin: 20px 0;
padding:0;
}
 
#title{
width: 292px;
margin: 20px 0;
font-size: 14px;
font-weight: normal;
font-family: Arial;
color: #a27942;
text-align:left;
border-left: 4px solid #6e522d;
border-right: 6px solid #303030;
border-radius: 5px;
padding: 12px 5px;
background: #303030;
box-shadow: 0px 0px 10px #4f3b20;
}
 
#msgbox{
color: #808080;
}
 
input{
width: 300px;
height: 40px;
box-shadow: 0px 0px 10px #4f3b20;
border-radius: 5px;
font-size: 14px;
font-weight: normal;
margin:0;
padding: 0 5px;
border: 1px solid #606060;
font-family: Arial;
background: #303030;
color: #CCC;
}
 
#complexity{
width: 302px;
padding: 5px 5px;
font-size: 18px;
font-weight: bold;
margin: 0px;
box-shadow: 0px 0px 10px #4f3b20;
border-radius: 5px;
color:#CCC;
background: #303030;
}
 
#submit{
display: none;
width: 310px;
}
 
#gbin1{
padding: 15px 0px;
text-align: center;
background: #101010;
color: #909090;
font-size:12px;
font-family: Arial;
border-radius: 0px 0px 5px 5px;
box-shadow: 0px 0px 20px #4f3b20;
}
 
#gbin1 a{
font-family: Arial;
font-size:12px;
color: #909090;
text-shadow: 1px 1px 25px #fff;
text-decoration: none;
}

関連するクラス ライブラリとプラグインを通じてパスワードの強度を検証する美しい登録ページを生成し、JQ テクノロジーを使用してこの機能を実装します。皆さんに気に入っていただけると幸いです。