Javascriptを使用してユーザーが入力したパスワードの強度を評価する（ノックアウト版）_JavaScriptスキル

Knockout を使用してパスワード強度検証をより簡単に実装する方法を見てみましょう。
元のコードを表示してください:

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

;html xmlns ="http://www.w3.org/1999/xhtml">

>

//CharMode function
function CharMode(iN) {
if (iN >= 48 && iN return 1; if (iN >= 65 && iN return ; if (iN >= 97 && iN return 4; else return 8; //特殊文字}

//bitTotal function
function bitTotal(num) {
modes = 0;
for (i = 0; i if (num & 1) モード ; ;>>= 1;
}
return モード;


次に、Knockout を参照する前に、ビュー モデルを作成する必要があります。 Knockout の Js クラス ライブラリを参照してください (詳細については、Knockout アプリケーション開発ガイドの一連のチュートリアルを参照してください)
コードは次のとおりです:




コードをコピーします


コードは次のとおりです:

var viewModel = {
Password: ko.observable(""),
Ocolor: "#eeeeee"
};
パスワードの強度と色の値は異なります。パスワードの文字列の値なので、それらの依存プロパティを宣言する必要があります。コードは次のとおりです。
viewModel.PasswordLevel = ko.dependentObservable(function () {
return Page.Utility.Registration. getPasswordLevel(this.Password()) ;
}, viewModel);
viewModel.Lcolor = ko.dependentObservable(function () {
//パスワードの強度に基づいて最初のセルの背景色を判断します
return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00 "))
}, viewModel ; : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")
}, viewModel);
viewModel.Hcolor = ko.dependentObservable( function () {
//パスワード強度判定による 3番目のセルに表示される背景色
return this.PasswordLevel() }, viewModel) ;
次に、applyBindings メソッドを使用してビュー モデルを適用します。このページにバインドするには、jQuery の Ready 関数を使用してバインド コードを実行するか、ページの下部にあるバインド コードを実行します。コードは次のとおりです:
$((function () {
ko.applyBindings(viewModel);
})); 最後に見てみましょう。これらの値がどのように HTML 要素に動的にバインドされるかについては、次のコードを参照してください (onKeyUp と onBlur の代わりに Afterkeydown が使用されています):

コードをコピー

コードは次のとおりです: パスワードを入力してください:

パスワードの強度:

height ="23" style='display: inline'>



< ;td width="50"data-bind="style: { 背景色: Hcolor }">強 >

弱い

中

次に、コードを実行すると、まったく同じ関数が表示されます。
検証のために改良したコードを削除すると、コードの合計は元の方法より確実に小さくなります。
完全版のコードは次のとおりです:

コードをコピーします


コードは次のとおりです:

输入密码:


秘密暗号度:
height="23" style='display : インライン'>

弱い

中

强