Maison >interface Web >js tutoriel >JS implémente l'affichage des mots de passe faibles, moyens et forts

JS implémente l'affichage des mots de passe faibles, moyens et forts

小云云original: 2018-03-21 17:17:382553parcourir

Cet article partage principalement avec vous du JS pour implémenter l'affichage faible, moyen et fort des mots de passe. Il est principalement partagé avec vous sous forme de code. J'espère qu'il pourra aider tout le monde.

<!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>

Recommandations associées :

Expression régulière JS pour implémenter la fonction de vérification de la force du mot de passe

Deux expressions régulières JS pour implémenter la force du mot de passe Méthode

Code de détermination de la force du mot de passe JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'implémentation d'addition, soustraction, multiplication et division précises à l'aide de JSArticle suivant：Exemple d'implémentation d'addition, soustraction, multiplication et division précises à l'aide de JS

Articles Liés

Voir plus