密码的显示隐藏、判断密码位数的小案例

最新推荐文章于 2021-06-15 11:51:56 发布

小小白号

最新推荐文章于 2021-06-15 11:51:56 发布

阅读量228

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/WiseGirls/article/details/108925594

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

密码的显示隐藏

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pass{
            width: 250px;
            height: 20px;
            border: none;
            outline: none;
            border-bottom: 1px solid #999;
        }
        #span{
            display: inline-block;
            cursor: pointer;
            width: 20px;
            height: 20px; 
            background: url("images/close.png");
            background-size: 20px;
            margin-left: -25px;
        }
    </style>
</head>
<body>
    <input type="password" id="pass">
    <span id="span"></span>
    <script>
        var int=document.getElementById("pass");
        var t=true;
        var yan=document.getElementById("span");
        yan.onclick=function(){
            if(t){
                int.type="text";
                t=false;
                yan.style.backgroundImage='url("images/open.png")';
            }else{
                int.type="password";
                t=true;
                yan.style.backgroundImage='url("images/close.png")';
            }
        }
    </script>
</body>
</html>

判断密码的长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <input type="password" id="int"><span id="span">请输入6-16的密码</span>
    <script>
        var int=document.getElementById("int");
        var span=document.getElementById("span");
        int.onblur=function(){
            if(int.value.length < 6 || int.value.length > 16){
                span.innerHTML="密码该是6-16位的";
                span.style.cssText="color:red;";
            }else{
                span.innerHTML="密码正确";
                span.style.cssText="color:green;";
            }
        }
    </script>
</body>
</html>