请问怎样实现用户名、密码不为空判定啊？

问题遇到的现象和发生背景

我想实现一个登录跳转（跳转到主页）的内容，但是前面得有一个用户名、密码不为空校验。但是校验并不成功，我用户名密码为空依旧会跳转，请问是什么情况啊？

问题相关代码，请勿粘贴截图

<!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>
<script>
    function checkUserName(obj){
    var username = obj;
    if (username.trim().length == 0) {
        var checkUserNameResult = document.getElementById("checkUserNAmeResult");
        checkUserNameResult.innerHTML = "用户名不能为空";
        obj.focus();
    }else{
        checkUserNameResult.innerHTML = '';
    }
}

function checkPassword(obj){
    var password = obj;
    if (username.trim().length == 0) {
        var checkPasswordResult = document.getElementById("checkPasswordResult");
        checkPasswordResult.innerHTML = "密码不能为空";
        obj.focus();
    }else{
        checkPasswordResult.innerHTML = '';
    }
}
</script>
    <div class="container">
        <div class="box">
            <div class="title">书目核对管理系统</div>
            <form >
            <div class="username">
                <input type="text"id="username" placeholder="账号" onblur="checkUserName(this.value);" class="info">
                <span></span>
            </div>
            <div class="password">
                <input type="password"id="password" placeholder="密码" onblur="checkPassword(this.value);" class="info">
                <span></span>
            </div>
            <div class="button">
                <input type="submit" onblur="checkForm" value="登          录" onclick="window.open('./index.html')">
            </div>
            </form>           
        </div>
    </div>
</body>
</html>

运行结果及报错内容

运行结果就是无论是否为空都会跳转

我的解答思路和尝试过的方法

我想要达到的结果

希望可以先实现用户名密码判空的功能，再跳转登录

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

3条回答默认最新

CSDN专家-showbo 2022-03-13 10:35

关注

在表单onsubmit事件中再次判断是否通过，设置表单action实现跳转，
而且题主checkPasswordResult，checkUserNAmeResult这2个dom也不存在，span少了id
checkUserName，checkPassword传递的是控件值（字符串），字符串没有focus方法，要么直接传递控件。checkPassword引用的变量还是username也没改
获取错误容器的代码位置也有错误，应该放到if外面，要不else语句得到的undefined又出错了

好多小问题，修改后的代码如下

<!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>
    <script>
        function checkUserName(obj) {
            var username = obj.value;////////获取值
            var checkUserNameResult = document.getElementById("checkUserNAmeResult");////////////放外面，要不else分支有问题
            if (username.trim().length == 0) {
                checkUserNameResult.innerHTML = "用户名不能为空";
                obj.focus();
            } else {
                checkUserNameResult.innerHTML = '';
            }
        }

        function checkPassword(obj) {
            var password = obj.value;////////获取值
            var checkPasswordResult = document.getElementById("checkPasswordResult");////////////放外面，要不else分支有问题
            if (password.trim().length == 0) {
                checkPasswordResult.innerHTML = "密码不能为空";
                obj.focus();
            } else {
                checkPasswordResult.innerHTML = '';
            }
        }
        function checkform() {
            //再次验证
            checkUserName(document.getElementById('username'))
            checkPassword(document.getElementById('password'))

            var checkPasswordResult = document.getElementById("checkPasswordResult");
            var checkUserNameResult = document.getElementById("checkUserNAmeResult");
            if (checkPasswordResult.innerHTML != '' || checkUserNameResult.innerHTML != '') {//验证不通过return false阻止表单提交访问index.html
                return false;
            }
        }
    </script>
    <div class="container">
        <div class="box">
            <div class="title">书目核对管理系统</div>
            <form action="./index.html" onsubmit="return checkform()">
                <div class="username">
                    <input type="text" id="username" placeholder="账号" onblur="checkUserName(this);" class="info">
                    <span id="checkUserNAmeResult"></span>
                </div>
                <div class="password">
                    <input type="password" id="password" placeholder="密码" onblur="checkPassword(this);" class="info">
                    <span id="checkPasswordResult"></span>
                </div>
                <div class="button">
                    <input type="submit" value="登          录" >
                </div>
            </form>
        </div>
    </div>
</body>
</html>