Knockout を使用してパスワード強度検証をより簡単に実装する方法を見てみましょう。 元のコードを表示してください: コードをコピー コードは次のとおりです: ;html xmlns ="http://www.w3.org/1999/xhtml"> > <br>//CharMode 関数 <br>function CharMode(iN) { <br>if (iN >=48&& iN <=) 57) / /数字<BR>return1; <BR>if (iN >=65&& iN <=90) //大文字<BR>return2; <BR>if (iN >=97&& iN <=122) ) // 小文字の <BR>return4; <BR>else <BR>return8; //特殊文字 <BR>} <BR>//bitTotal 関数 <BR>function bitTotal(num) { <BR>modes =0; 🎜>for (i =0; i <4; i ) { <BR>if (num &1) モード ; <BR>num >>>=1; <br>return モード; 🎜>} <br>//checkStrong function<br>function checkStrong(sPW) { <br>if (sPW.length return0; //パスワードが短すぎます<br>Modes =0; <br>for (i =0; i <spw.length i>モード |= CharMode(sPW.charCodeAt(i)); <br>return bitTotal(Modes); >} <br>//pwStrength 関数 <br>function pwStrength(pwd) { <br>O_color ="#eeeeee"; <br>M_color ="#FF9900"; >H_color = #33CC00"; <br>if (pwd ==null|| pwd =='') { <br>Lcolor = Mcolor = Hcolor = O_color; <br>S_level = checkStrong( pwd); <br>switch (S_level) { <br>case0: <br>Lcolor = Mcolor = O_color; <br>Lcolor = L_color; >ブレイク; <br>ケース 2: <br>Lcolor = Mcolor; <br>デフォルト: <br>Lcolor = Mcolor = H_color; 🎜>document.getElementById("strength_L").style.background = Lcolor; <br>document.getElementById("strength_M").style.background; = Hcolor; <br>return; <br>} <br><form name="form1" action="">パスワード" size= "10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"> <br><br> <br>パスワードの強度: <br><table width= "217" border="1" cellpacing="0" cellpadding="1" bordercolor="#cccccc" <BR>height="23" style='display: inline'> <br><tr align= center" bgcolor= "#eeeeee"> <br><td width="33%" id="strength_L"> <br>弱い<br></td> <br><td width=" 33%" id ="strength_M"> <br>中<br></td> <br><td width="33%" id="strength_H"> <br>強い<br>< /td> <br></tr> <br></form> <br><br> 🎜>まず、上記のブロガーの検証機能を次のコードに改良しましょう: <br><br><br><br><br>コードをコピー <br><br><br> コードは次のとおりです: <br><br> <br>var Page = ページ {}; <br>Page.Utility.Registration = Page.Utility.Registration || {}; <br>//パスワードの強度を取得します <br>Page.Utility.Registration.getPasswordLevel = function (パスワード) { <br>if (password == null || パスワード == '') <br>return 0; <br>if (password.length < ;= 4) <br>return 0; //パスワードが短すぎます<br>var Modes = 0; <br>for (i = 0; i <password.length i>モード |= CharMode(password.charCodeAt(i)); <br>return bitTotal(Modes) </password.length></spw.length> </div>//CharMode function<br>function CharMode(iN) { <br> if (iN >= 48 && iN return 1; <span>if (iN >= 65 && iN return ; <u>if (iN >= 97 && iN return 4; else </u></span>return 8; //特殊文字} <div class="codebody" id="code68720">//bitTotal function<br>function bitTotal(num) { <br>modes = 0; <br>for (i = 0; i if (num & 1) モード ; ;>>= 1; <br>} <br>return モード; <br><br> <br>次に、Knockout を参照する前に、ビュー モデルを作成する必要があります。 Knockout の Js クラス ライブラリを参照してください (詳細については、Knockout アプリケーション開発ガイドの一連のチュートリアルを参照してください) <br>コードは次のとおりです: <br><br><br><br><br>コードをコピーします<br><br><br> コードは次のとおりです:<br><div class="codebody" id="code46693"> <br>var viewModel = { <br>Password: ko.observable(""), <br>Ocolor: "#eeeeee" <br>}; <br>パスワードの強度と色の値は異なります。パスワードの文字列の値なので、それらの依存プロパティを宣言する必要があります。コードは次のとおりです。 <br>viewModel.PasswordLevel = ko.dependentObservable(function () { <br>return Page.Utility.Registration. getPasswordLevel(this.Password()) ; <br>}, viewModel); <br>viewModel.Lcolor = ko.dependentObservable(function () { <br>//パスワードの強度に基づいて最初のセルの背景色を判断します<br>return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00 ")) <br>}, viewModel ; : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00") <br>}, viewModel); <br>viewModel.Hcolor = ko.dependentObservable( function () { <br>//パスワード強度判定による 3番目のセルに表示される背景色 <br>return this.PasswordLevel() < this.Ocolor : "#33CC00" <BR>}, viewModel) ; <BR>次に、applyBindings メソッドを使用してビュー モデルを適用します。このページにバインドするには、jQuery の Ready 関数を使用してバインド コードを実行するか、ページの下部にあるバインド コードを実行します。コードは次のとおりです: <BR>$((function () { <BR>ko.applyBindings(viewModel); <BR>})); 最後に見てみましょう。これらの値がどのように HTML 要素に動的にバインドされるかについては、次のコードを参照してください (onKeyUp と onBlur の代わりに Afterkeydown が使用されています): <BR><BR><BR><BR></div>コードをコピー <BR> <BR><div class="codetitle"> コードは次のとおりです: <span><a style="CURSOR: pointer" data="86214" class="copybut" id="copybut86214" onclick="doCopy('code86214')"> <U>< form name="form1" action=""> パスワードを入力してください: <input type=" text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'"> ; <br> </div>パスワードの強度: <div class="codebody" id="code86214"><table width="217" border= "1" cellpacing="0" cellpadding="1" bordercolor="#cccccc" <BR>height ="23" style='display: inline'> <br><tr align="center" bgcolor= #eeeeee"> <br><td width="50" data-bind="style: {backgroundColor: Lcolor }">弱い</td> <br><td width="50"data-bind ="スタイル: { 背景色: Mcolor }">中</td> <br>< ;td width="50"data-bind="style: { 背景色: Hcolor }">強</td> ></tr> <br></table> <br></form> <br><br> <br> 次に、コードを実行すると、まったく同じ関数が表示されます。 <br>検証のために改良したコードを削除すると、コードの合計は元の方法より確実に小さくなります。 <br>完全版のコードは次のとおりです: <br><br><br> </div> <br>コードをコピーします<br><br><br> コードは次のとおりです:<div class="codetitle"><div class="codebody" id="code67652"> <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <BR><html> <BR><頭> <BR><script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"> <br>var Page = ページ || {}; <br>Page.Utility = ページ.ユーティリティ || {}; <br>Page.Utility.Registration = Page.Utility.Registration || {}; <br>//获取密码强度 <br>Page.Utility.Registration.getPasswordLevel =function (パスワード) { <br>if (パスワード ==null|| パスワード =='') <br>return0; <br>if (password.length return0; //密码太短 <br>var Modes =0; <br>for (i =0; i <password.length i>モード |= CharMode(password.charCodeAt(i)); <br>} <br>return bitTotal(Modes); <br>//CharMode関数数 <br>function CharMode(iN) { <br>if (iN >=48&& iN return1; <br>if (iN >=65&& iN return2; <br>if (iN >=97&& iN return4; <br>else <br>return8; //特殊文字 <br>} <br>//bitTotal関数数 <br>function bitTotal(num) { <br>modes =0; <br>for (i =0; i if (num &1) モード ; <br>num >>>=1; <br>} <br>モードを返します。 <br>} <br>}; <br>var viewModel = { <br>パスワード: ko.observable(""), <br>Ocolor: "#eeeeee" <br>}; <br>viewModel.PasswordLevel = ko.dependentObservable(function () { <br>return Page.Utility.Registration.getPasswordLevel(this.Password()); <br>}, viewModel); <br>viewModel.Lcolor = ko.dependentObservable(function () { <br>//根元密码强度判断第一格显示的背景色 <br>returnthis.PasswordLevel() ==0?this.Ocolor : (this .PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")) <br>}, viewModel); <br>viewModel.Mcolor = ko.dependentObservable(function () { <br>//根元密码度判断第二格显示的背景色 <br>returnthis.PasswordLevel() <2?this.Ocolor : (this .PasswordLevel() ==2?"#FF9900" : "#33CC00") <br>}, viewModel); <br>viewModel.Hcolor = ko.dependentObservable(function () { <br>//根元密码强度判断第二格显示的背景色 <br>returnthis.PasswordLevel() <3?this.Ocolor : "# 33CC00" <br>}、ビューモデル); <br>$((function () { <br>ko.applyBindings(viewModel); <br>})); <br> <フォーム名="form1" アクション=""> 输入密码: 秘密暗号度: height="23" style='display : インライン'> 弱い 中 强
