js原始方式实现密码的校验

最新推荐文章于 2023-05-26 15:03:33 发布

弄玉x

最新推荐文章于 2023-05-26 15:03:33 发布

阅读量219

点赞数 2

分类专栏： js 文章标签： html

本文链接：https://blog.csdn.net/m0_46069861/article/details/107537648

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新浪网站设置密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style>
    div{
        width: 600px;
        margin: 100px auto;
    }
    .message{
        display: inline-block;
        font-size: 12px;
        color: #999999;
        background: url(提示.png) no-repeat left center;
        padding-left: 20px;
    }
    .wrong{
        color: red;
        background-image: url(wrong.jpg);
    }
    .right{
        color: green;
        background-image: url(right.jpg);
    }
</style>
</head>
<body>
    <div type="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
<script>
var inp = document.querySelector('.ipt');
var message  = document.querySelector('.message');
inp.onblur = function(){
    if(inp.value.length<6 || inp.value.length>16){
        
        console.log('error');
        //改变为wrong的同时，还要保留message的样式。
        message.className='message wrong';
        message.innerHTML= '密码个数不正确';
    }else{   
        //改变为right的同时，还要保留message的样式。
         message.className='message right';
         message.innerHTML='输入正确';
    }
}
</script>

</body>
</html>

实现结果：
在这里插入图片描述

使用到的图片：
在这里插入图片描述

在这里插入图片描述

弄玉x

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js原始方式实现密码的校验

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>新浪网站设置密码</title> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫