Question

我正在尝试创建登录页面。我需要验证用户名和密码，但我的js似乎不起作用。我现在只是为了使它工作起来更简单。这是我的HTML：

<script  type="text/javascript" src = "js/checklogin.js"></script>
<h3>Already have an account?</h3>
            <span id = "feedback"></span>
            <form id = "login" action = "login.html"  method = "post">
                <label for = "name">User name:</label><br>
                <input type = "text" name = "username " id = "username"><br>
                <label for = "password">Password:</label><br>
                <input type = "password" name = "password" id = "password"><br> 

                <input type="submit" value="Login">
            </form>

这是我的js：

var elUsername = document.getElementById('username'); 
var elPassword = document.getElementById('password')
var elMsg = document.getElementById('feedback');      
function checkFilled(length) {                    
 if (length == "") {           
    elMsg.innerHTML = 'Please fill out this field';
 } else {                                            
  document.getElementById("login").submit();                        
}
}
elUsername.addEventListener('blur', checkFilled(elUsername.value),false);
elPassword.addEventListener('blur', checkFilled(elPassword.value),false);

我仍然无法让它发挥作用。另外，如何让它在文本框中显示为弹出窗口？看起来像这样的东西： Error image

Answer 1

你的代码有几个问题，所以这里是我做的方式的完整例子（使用你已经拥有的相同的HTML）。这适用于我在代码段JSFiddle及其下方的测试。

var elUsername = document.getElementById('username');
var elPassword = document.getElementById('password')
var elMsg = document.getElementById('feedback');
var elForm = document.getElementById('login');

function checkFilled() {
    if (elUsername.value == "" || elPassword.value == "") {
        elMsg.innerHTML = 'Please fill out this field';
        event.preventDefault();
    } else {
        elMsg.innerHTML = '';
    }
}

if (elForm.addEventListener) {
    elForm.addEventListener('submit', function() {
         checkFilled();
    }, false);
} else {
    elForm.attachEvent('onsubmit', function() {
         checkFilled();
    });
}

if (elUsername.addEventListener) {
    elUsername.addEventListener('blur', function() {
        checkFilled();
    }, false);
} else {
    elUsername.attachEvent('onblur', function() {
        checkFilled();
    });
}

if (elPassword.addEventListener) {
    elPassword.addEventListener('blur', function() {
        checkFilled();
    }, false);
} else {
    elPassword.attachEvent('onblur', function() {
        checkFilled();
    });
}

<!--<script  type="text/javascript" src = "js/checklogin.js"></script>-->
<h3>Already have an account?</h3>
            <span id = "feedback"></span>
            <form id = "login" action = "login.html"  method = "post">
                <label for = "name">User name:</label><br>
                <input type = "text" name = "username " id = "username"><br>
                <label for = "password">Password:</label><br>
                <input type = "password" name = "password" id = "password"><br> 

                <input type="submit" value="Login">
            </form>

Javascript检查是否输入了登录字段

1 个答案: