js实现判断密码设置是否正确

最新推荐文章于 2023-05-09 14:56:31 发布

Partiality315

最新推荐文章于 2023-05-09 14:56:31 发布

阅读量1.2k

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_62485207/article/details/128906988

版权

事件为表单失去焦点，符合密码设置规定，提示语句及图标变为绿色，不符合变为红色。

html代码

<div class="register">
        <input type="password" class="ipt">
        <i class="fa fa-circle-o" aria-hidden="true"></i>
        <p class="message">请输入6-16位密码</p>
</div>

css代码

        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            padding-left: 2px;
        }

        .fa-circle-o {
            color: #999;
            padding-left: 8px;
        }

        .worng {
            color: coral;

        }

        .fa-dot-circle-o {
            color: coral;
            padding-left: 8px;
        }

        .right {
            color: green;
        }

        .fa-check-square-o {
            color: green;
            padding-left: 8px;
        }

js代码

<script>
        //获取元素
        var ipt = document.querySelector('.ipt');//输入框
        var message = document.querySelector('.message');//提示语句
        var logo = document.querySelector('.fa-circle-o');//提示图标
        //失去焦点
        ipt.onblur = function () {
            //密码不符合要求
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message worng';
                message.innerHTML = '您输入的位数不正确';
                logo.className = 'fa fa-dot-circle-o';
            } else {//密码符合要求
                message.className = 'message right';
                message.innerHTML = '设置成功';
                logo.className = 'fa fa-check-square-o';
            }
        }
    </script>

效果图

待输入