ホームページ > ウェブフロントエンド > jsチュートリアル > JSで弱、中、強のパスワード表示を実装

JSで弱、中、強のパスワード表示を実装

小云云
リリース: 2018-03-21 17:17:38
オリジナル
2549 人が閲覧しました

この記事では主に、弱いパスワード、中程度のパスワード、および強力なパスワード表示の JS 実装をコードの形式で共有します。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script>
        onload = function () {
            var tds = document.getElementById(&#39;tb&#39;).getElementsByTagName(&#39;td&#39;);


            document.getElementById(&#39;txt&#39;).onkeyup = function () {
                for (var i = 0; i < tds.length; i++) {//防止输入正确密码后倒退删除时候出问题
                    tds[i].style.backgroundColor = &#39;gray&#39;;
                }
                if (this.value.length>0) {
                    var result = checkPwd(this.value);
                    if (result<=1) {//弱
                        tds[0].style.backgroundColor=&#39;red&#39;;
                    }else if (result==2) {//中
                        tds[0].style.backgroundColor=&#39;green&#39;;
                        tds[1].style.backgroundColor=&#39;green&#39;;
    
                    }else if (result==3) {//强
                        tds[0].style.backgroundColor=&#39;blue&#39;;
                        tds[1].style.backgroundColor=&#39;blue&#39;;
                        tds[2].style.backgroundColor=&#39;blue&#39;;
                    }
                }
            }
        }


        function checkPwd(msg){ //判断含有数字字母特殊符号
            var lvl = 0;
            if (msg.match(/[0-9]/)){
                lvl++;
            }
            if (msg.match(/[a-zA-Z]/)) {
                lvl++;
            }
            if (msg.match(/[^0-9a-zA-Z]/)) {
                lvl++;
            }
            if (msg.length<6) {
                lvl--;
            }
            return lvl;
        }
    </script>
</head>
<body>
    <input type="text" name="name" id="txt" />
    <table id="tb" border="1" style="width:300px;height:35px;text-align:center;background-color:gray">
        <tr>
            <td>
                弱
            </td>
            <td>
                中
            </td>
            <td>
                强
            </td>


        </tr>
    </table>
</body>
</html>
ログイン後にコピー

関連する推奨事項:

パスワード強度検証機能を実装するためのJS正規表現

パスワード強度を実装するための2つのJS正規表現メソッド

JavaScriptパスワード強度判定コード

以上がJSで弱、中、強のパスワード表示を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート