Home > Article > Web Front-end > JS implements weak, medium and strong password display

JS implements weak, medium and strong password display

小云云Original: 2018-03-21 17:17:382521browse

This article mainly shares with you JS to implement weak, medium and strong display of passwords. It is mainly shared with you in the form of code. I hope it can help you.

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

Related recommendations:

JS regular expression to implement password strength verification function

Two JS regular expression methods to implement password strength

JavaScript password strength judgment code

The above is the detailed content of JS implements weak, medium and strong password display. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of implementing precise addition, subtraction, multiplication and division using JSNext article：Example of implementing precise addition, subtraction, multiplication and division using JS

See more

JS implements weak, medium and strong password display

Related articles