这个,能不能帮我解答一下?(语言-javascript)

img


这个做了一半儿,发现不太对,想看你们的,然后跟我的对照一下,这个挺简单的就是差了点步骤

把你代码贴出来,看能不能修改

把你觉得不太对的地方说一下,最好贴一下代码



<!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>
  </head>
  <body>
    <input id="user" type="text" type="text" />
    <span style="display: none" id="usererror"
      ><b style="color: #f00">用户输入框不能为空</b></span
    >
    <br />
    <input id="psd" type="password" type="text" />
    <span style="display: none" id="psderror"
      ><b style="color: #f00">密码入框不能为空</b></span
    ><br />
    <button id="bnt">登录</button>
    <script>
      let user = document.getElementById("user");
      let psd = document.getElementById("psd");
      let usererror = document.getElementById("usererror");
      let psderror = document.getElementById("psderror");
      let bnt = document.getElementById("bnt");
      user.onblur = function () {
        console.log(this.value, "==this");
        if (this.value === "") {
          usererror.style.display = "inline-block";
        } else {
          usererror.style.display = "none";
        }
      };
      psd.onblur = function () {
        console.log(this.value, "==this");
        if (this.value === "") {
          psderror.style.display = "inline-block";
        } else {
          psderror.style.display = "none";
        }
      };
      bnt.onclick = function () {
        let uservalue = user.value;
        let psdvalue = psd.value;
        if (uservalue == "") {
          usererror.style.display = "inline-block";
        }
        if (psdvalue == "") {
          psderror.style.display = "inline-block";
        }
        if (psdvalue == "" || uservalue == "") {
          return;
        }
        if (uservalue == "admin" && psdvalue == "123") {
          alert("登录成功!");
        } else {
          alert("用户名或密码登录不正确!");
        }
      };
    </script>
  </body>
</html>


<!-- 以下就是创建 a2.html的文件 -->
<!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>
</head>
<body>
    <!-- 1id为user带提示词 的用户名输入框 -->
    <input type="text" id="user" placeholder="请输入用户名">
    <!-- 2id为usererror 的红色b标签display:none让打开页面时候元素隐藏 -->
    <b id="usererror" style="color: red;display:none">用户名输入框不能为空</b>
    <br>
    <!-- 3id为psd带提示词 的密码输入框 -->
    <input type="password" id="psd" placeholder="请输入密码">
    <!-- 4id为psderror 的红色b标签 display:none让打开页面时候元素隐藏-->
    <b id="psderror" style="color: red;display:none">密码输入框不能为空</b>
    <br>
    <!-- 5登录按钮 -->
    <button id="but">登录</button>
    <!-- 以上的12345  可以拿到5分 -->
    

    <script>
        //1用户名绑定失去焦点事件
        var user=document.getElementById("user")
        var usererror=document.getElementById("usererror")
        user.onblur=function(e){
            //2失去焦点是没有输入数据
            if (!this.value) {
                //不存在值的时候 使用b标签提示
                usererror.style.display='inline-block'
            }else{
                //存在值的时候 b隐藏
                usererror.style.display='none'
            }
        }
        //2密码绑定失去焦点事件
        var psd=document.getElementById("psd")
        var psderror=document.getElementById("psderror")
        psd.onblur=function(e){
            //2失去焦点是没有输入数据
            if (!this.value) {
                //不存在值的时候 使用b标签提示
                psderror.style.display='inline-block'
            }else{
                //存在值的时候 b隐藏
                psderror.style.display='none'
            }
        }
        // 以上内容完成把  b标签的提示与否  以及密码|用户绑定失去焦点事件  和非空的处理  10分
        
        //给登录按钮添加点击事件 
        var but=document.getElementById("but")
        but.onclick=function(){
            //非空的终止拦截
            if (!user.value || !psd.value) {
                return
            }
            //判断 密码是否123 用户是否admin
            if ( user.value=="admin" && psd.value=="123") {
                window.alert("登陆成功")
            }else{
                window.alert("用户名或密码不正确")
            }
        }
        // 以上内容完成把登录添加点击事件    进行用户名和密码的判断处理  给出提示  5分


    </script>

</body>
</html>

<!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>
        #usererror, 
        #psderror {
            color: red;
            display: none;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" placeholder="请输入用户名" id="user"> <b id="usererror">用户名输入框不能为空</b>
    </div>
    <div>
        <input type="password" placeholder="请输入用户名" id="psd"> <b id="psderror">密码输入框不能为空</b>
    </div>
    <div>
        <button id="btn">登录</button>
    </div>

    <script>
        var username = document.getElementById("user");
        var userpassword = document.getElementById("psd");
        var userError = document.getElementById("usererror");
        var psdError = document.getElementById("psderror");
        var btn = document.getElementById("btn");

        username.onblur = function() {
            // console.log(username.value.length);
            if(username.value.length == 0) {
                userError.style["display"] = "inline-block";
            }else {
                userError.style["display"] = "none";
            }
        }
        userpassword.onblur = function() {
            // console.log(username.value.length);
            if(userpassword.value.length == 0) {
                psdError.style["display"] = "inline-block";
            }else {
                psdError.style["display"] = "none";
            }
        }

        btn.onclick = function() {
            // console.log(1);
            if(username.value == 'admin' && userpassword.value == '123') {
                alert("登录成功")
            }else {
                alert("登录失败")
            }
        }
    </script>
</body>
</html>

function check(thisform) {
 
    var name=document.getElementById("name").value;  //读取表单数据,创建变量
    var pass=document.getElementById("pass").value;
 
    if (name=="admin" && pass=="123456" || name=="admin2" && pass=="456789") {  
        //验证变量。此处设置账号、密码(可设置多组,用||隔开)
        alert("登录成功!");
        window.document.f.action="test.html";  //此处设置登录后跳转页面
        window.document.f.submit();
    }
    else{
        alert("用户名或密码错误!");
    }
 
}