Dom 密码强度检查

最新推荐文章于 2018-08-02 16:52:49 发布

Soloensiz

最新推荐文章于 2018-08-02 16:52:49 发布

阅读量486

点赞数

分类专栏： web前端文章标签： dom web前端密码强度检查

本文链接：https://blog.csdn.net/Lu_1u/article/details/75094701

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <style type="text/css">
        #table td{
            width:40px;
            height:19px;
            background-color: #F3F3F3;
            border:1px solid #D0D0D0;
            color:#BBBBBB;
            line-height: 9px;
        }


    </style>
</head>
<body>
    <form>
        <label for="password">密码:</label>
        <input id="password" type="password" name="password"/>
        <table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;">
            <tr align="center">
                <td id="td1">弱</td>
                <td id="td2">中</td>
                <td id="td3">强</td>
            </tr>


        </table>


    </form>
</body>
</html>
<script type="text/javascript">
/*密码强度规则:
    弱：强度为1， 密码长度小于6位
    中：强度为2
    强：强度为3，长度大于等于8，包含小写大写字母
*/
    //申明一个函数检查密码强度
    function checkPassword(value){
        if(!value){
            return 1;
        }
        if(value.length<6){
            return 1;
        }
        /*if(value.length>=8 && /[0,9]/.test(value)){

        }*/
        if(value.length>=8 && value.match(/[0-9]/) && value.match(/[a-z]/) &&value.match(/[A-Z]/)){
            return 3;
        }

        return 2;
    }



    setInterval(function () {
        var passwordElement = document.getElementById("password");

        var level = checkPassword(passwordElement.value);

        switch(level){
            case 1:{
                document.getElementById("td1").style.backgroundColor="#ff8040";
                document.getElementById("td2").style.backgroundColor=null;
                document.getElementById("td3").style.backgroundColor=null;
                break;
            }
            case 2:{
                document.getElementById("td1").style.backgroundColor="#ff8040";
                document.getElementById("td2").style.backgroundColor="#ffff6f";
                document.getElementById("td3").style.backgroundColor=null;
                break;
            }
            case 3:{
                document.getElementById("td1").style.backgroundColor="#ff8040";
                document.getElementById("td2").style.backgroundColor="#ffff6f";
                document.getElementById("td3").style.backgroundColor="#a8ff24";
                break;
            }
        }

    },100)
    //创建定时器，100毫秒检查密码强度
</script>