一个简单的js密码验证记录

最新推荐文章于 2022-06-08 09:56:41 发布

前端小菜鸭

最新推荐文章于 2022-06-08 09:56:41 发布

阅读量192

点赞数 1

分类专栏：参考文章标签： javascript

本文链接：https://blog.csdn.net/m0_63898223/article/details/124440312

版权

参考专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form>p>input{
            color: #999;
        }
        #ipt{
            color: #333;
        }
        span{
            color: #999;
        }
    

    </style>
</head>
<body>
    <form action="">
        <h2>世纪佳缘登录</h2>
        <p>账号：<input type="text" name="" id="text" value="请输入您的账号" placeholder></p>
        <p>密码：<input type="text" name="" id="ipt2" value="请输入您的密码" placeholder> <span>请输入6-16位的密码</span></p>
        <input type="button" value="提交" id="submit">
        <input type="reset" value="重置">
    </form>
    <script>
        var input = document.getElementById("text");
        var ipt = document.getElementById("ipt2");
        var span=document.querySelector("span");
        var submit=document.getElementById("submit")
        input.onfocus=function(){
            if(input.value!=""){
                this.value=""
            }
            this.style.color="#333"

        }
         input.onblur=function(){
            this.style.color="#999"
            if(this.value==""){
                this.value="请输入您的账号"
            }
        }

        ipt.onfocus=function(){
            if(input.value!=""){
                this.value=""
            }
            this.type="password"
            this.style.color="#333"
        }

            ipt.onblur = function(){


            if(this.value.length<6 || this.value.length>16){
                span.style.color="red"
                span.innerHTML="请出入正确的密码"
                
            }
            else{
                
                span.style.color="green"
                span.innerHTML="您输入正确"

            }
            
            
        }
        submit.onclick = function(){
            if(input.value=='123456'&&ipt.value=='123456')
            {
                alert('密码正确')
            }
            else{
                alert('密码错误，请输入正确的密码')
            }
        }

           

    </script>
</body>
</html>

前端小菜鸭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
一个简单的js密码验证记录

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫