javascript挑戰程式設計技能-第六題：檢查密碼強度
阿新 • • 發佈：2018-12-30
函式可以幫助我們抽象掉負責操作，還可以幫助我們構建可複用的元件。
開發一個程式，基於如下規則確定給定密碼的強度。
1、如果只包含數字，則為非常弱的密碼。
2、如果只包含字母，則為弱密碼。
3、如果包含字母，至少有一個數字，並且字數不少於8個字元，則為強密碼。
4、如果包含字母、數字和特殊字元，兵器字數不少於8字，則為非常強的密碼。
要求：
1、建立passwordValidator函式，以密碼為引數，返回一個可以幫助我們評估密碼強度的值。不要讓函式返回字串，未來可能需要支援多種語言。
2、使用單條輸出語句。
3、實時以圖形和文字形式提供反饋。當用戶輸入一個密碼時，確定其強度並顯示結果。
程式碼實現如下，具體演算法看註釋
<body> <div> <input id="inputString" type="text" placeholder="請輸入密碼" style="display: inline-block" onkeyup="keyupFunc()"> <span id="outText" style="display: inline-block;color:white"></span> </div> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script> var spancolor = [ { color: '#FF0000', text: '非常弱' }, { color: '#FFB5B5', text: '弱' }, { color: '#0000C6', text: '強' }, { color: '#53FF53', text: '非常強' } ]; function analizeCharacter(char) { var code = char.charCodeAt(0); if(code >= 48 && code <= 57) return 1; // 數字 if((code >= 97 && code <= 122)||(code >= 65 && code <= 90)) return 2; // 字母 return 4; // 特殊字元 和標點符號 }; function passwordValidator(psw){ if(psw%1 === 0){//這裡利用了js弱語言型別會自動轉換的特性 return 0;//純數字，為非常弱密碼 } var score = 0; var hasForeign = false; for(var i = 0;i < psw.length;i++) { score += analizeCharacter(psw[i]); if(analizeCharacter(psw[i]) === 4){ hasForeign = true; } } if(score === psw.length*2 && !hasForeign || psw.length < 8){ return 1;//純字母或長度小於8，為弱密碼 }else if(!hasForeign){ return 2;//字母帶數字，為強密碼 }else{ return 3; } } function keyupFunc(){ var inputString = $('#inputString').val(); $("#outText").text(spancolor[passwordValidator(inputString)].text); $("#outText").css('background-color', spancolor[passwordValidator(inputString)].color); } </script> </body>
執行結果：
第六節課就到這裡結束了吧,
謝謝你的閱讀.
有什麼問題可以直接聯絡我本人微信:yu_xiaohu
希望大家關注我的個人公眾號,有更新會在上面同步釋出哦.
我是小虎Oni,希望你開心.
