JavaScriptで動的にパスワード強度をチェックする実装方法

通常、一部の Web サイトの登録ページまたはパスワード変更ページでパスワードを入力すると、プログレスバーに似た長いバーが表示され、ユーザーにパスワードの強度の入力を求めます。以下に示すように:

何人かの人々がそれをいくつかの異なる写真に置き換えているのを見ましたが、これはうまくいくようですが、あまり良くありません。だから私は別の方法でやります。

基本的に、これはユーザーが入力したさまざまなパスワードの強度に基づいて色領域の長さを変更します。

パスワードの強度の横棒は基本的にdivです。div内にspanタグがあり、spanの長さと色を変えることでパスワードの強度を示します。原理は非常にシンプルですが、運用中に厄介な問題が発生することがあります。

1. まず、パスワードを入力するための入力ボックスを HTML ページに 1 つの div ずつ定義し、div 内に spam タグを置き、対応する属性、タイプ、名前、値、クラス、ID などを設定します。

<font color="#FF0000">*</font>密码：<input type="text" name="password" id="password" value="请输入密码" onfocus=" passwordClear()" onblur="pwdComplex(),passwordValidate()" onkeyup="pwdComplex()" /></td><td><font id="pwdTip">不少于6位字符</font><br/>

2 パスワードの強度:

<div class="pwdStrongth"><span class="cinnerprogress" id="innerprogress"></span></div><font id="strongthTip"></font>

2. ラベルのスタイルを制御し、ラベルをより美しく見せるために、ラベルに対応する CSS を設定します:

<style type="text/css">
/*用于修饰密码强度条外边框div*/
.pwdStrongth{
border:solid 1px #000000;
border-radius:5px;
height:15px;
width:150px;}
/*用于设置span标签的初始样式*/
.cinnerprogress{
display: block;
height: 100%;
background-color:transparent;
border-radius: 5px;
width: 100%;
}
/*下面四个将用于设置span标签在不同密码强度的样式*/
.strengthLv1{
display: block;
height: 100%;
border-radius: 5px;
background:red;width:25%;}
.strengthLv2{
display: block;
height: 100%;
border-radius: 5px;
background:orange;width:50%;}
.strengthLv3{
display: block;
height: 100%;
border-radius: 5px;
background:#09F;width:75%;}
.strengthLv4{
display: block;
height: 100%;
border-radius: 5px;
background:green;width:100%;}
</style>

3.検出を通過するための対応する JavaScript メソッド ユーザーが入力したパスワードの強度は、パスワードの強度を表現するためのさまざまなスタイルを呼び出すために使用されます。パスワードの強度のルールは、onblur (lost focus) イベントで自由に定義できます。パスワード入力ボックスの onkeyup (キーボードを押した後) イベント: メソッドは次のとおりです: