一个简单的js密码验证记录_js密码注册密码验证-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_63898223/article/details/124440312

<!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>