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

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

コードをコピー コードは次のとおりです: ;html xmlns ="http://www.w3.org/1999/xhtml"> > //CharMode 関数 function CharMode(iN) { if (iN >=48&& iN return1; if (iN >=65&& iN return2; if (iN >=97&& iN return4; else return8; //特殊文字 } //bitTotal 関数 function bitTotal(num) { modes =0; 🎜>for (i =0; i if (num &1) モード ; num >>>=1; return モード; 🎜>} //checkStrong function function checkStrong(sPW) { if (sPW.length return0; //パスワードが短すぎます Modes =0; for (i =0; i モード |= CharMode(sPW.charCodeAt(i)); return bitTotal(Modes); >} //pwStrength 関数 function pwStrength(pwd) { O_color ="#eeeeee"; M_color ="#FF9900"; >H_color = #33CC00"; if (pwd ==null|| pwd =='') { Lcolor = Mcolor = Hcolor = O_color; S_level = checkStrong( pwd); switch (S_level) { case0: Lcolor = Mcolor = O_color; Lcolor = L_color; >ブレイク; ケース 2: Lcolor = Mcolor; デフォルト: Lcolor = Mcolor = H_color; 🎜>document.getElementById("strength_L").style.background = Lcolor; document.getElementById("strength_M").style.background; = Hcolor; return; } パスワード" size= "10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)">

パスワードの強度: height="23" style='display: inline'> 弱い 中 強い

🎜>まず、上記のブロガーの検証機能を次のコードに改良しましょう:

コードをコピー

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

次に、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'> 弱い 中 &lt ;td width="50"data-bind="style: { 背景色: Hcolor }">強 >

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

コードをコピーします

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

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

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

関連記事