Question

我正在尝试学习JS，所以我只在JS中编写代码（我的html代码中只有body标签使用脚本）。

我正在尝试上述条件，编写登录表单并使用验证函数对其进行验证。由于某种原因，当我提交表单时没有任何反应（我相信它甚至没有调用验证函数，因为我在它的开头放了一个警告）。

我的代码：

function validateLogin() {
    alert("CHECK");
    var username = document.getElementById('username').value;
    var pass = document.getElementById('pass').value;
    if (username === "admin" && pass === "admin") {
        return true;
    } else {
        alert("Wrong username or password!");
        return false;
    }
}

var loginDiv = document.createElement('div');
loginDiv.className = 'loginDiv';
var loginForm = document.createElement('form');
loginForm.className = 'loginForm';
loginForm.onsubmit = "return validateLogin()";
var username = document.createElement('input');
username.id = 'username';
var pass = document.createElement('input');
pass.id = 'pass';
pass.type = 'password';
var subm = document.createElement('input');
subm.type = 'submit';
loginForm.appendChild(document.createTextNode("Username:"));
loginForm.appendChild(username);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(document.createTextNode("Password:"));
loginForm.appendChild(pass);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(subm);
loginForm.action = "#";
loginForm.method = "post";

loginDiv.appendChild(loginForm);
document.body.appendChild(loginDiv);

编辑我发现改变了 loginForm.onsubmit =“return validateLogin（）”; 成

loginForm.onsubmit = validateLogin;

出于某种原因

为我解决了。

Answer 1

首先，您要定位DOM对象，而不是值。而不是：

var username = document.getElementById('username');

使用：

var username = document.getElementById('username').value;

当然，这不是构建身份验证系统的好方法，但由于它是出于学习目的，我们将继续使用它。我也不建议使用所有这些“appendChild”函数来创建HTML。有更好的方法来做到这一点。看看像MuschacheJS这样的东西以及它们如何渲染。

编辑：

您还需要调用函数validateLogin（）; 你可以这样做：

document.getElementById("submitButton").addEventListener("click", function(e) {
  validateLogin();
});

此代码假定有一个ID为 submitButton 的按钮，但您已经知道如何创建它。

Answer 2

将按钮代码更改为以下内容：

 var subm = document.createElement('button');
 subm.innerHTML = 'click me';
 subm.onclick = validateLogin();
 subm.type = 'submit';

Answer 3

您的onsubmit属性未添加到表单中。要解决此问题，请使用.setAttribute，如下面的代码所示。

第二个问题是，您没有获得输入字段的值，而是获得完整节点的值。为此，您需要附加.value。

如果您不希望页面重新加载（或重定向到真实登录凭据时表单的action属性中指定的任何页面，请将event.preventDefault()添加到validateLogin() }。

function validateLogin() {    
    alert("CHECK");
    var username = document.getElementById('username').value;
    var pass = document.getElementById('pass').value;
    if(username === "admin" && pass ==="admin"){
        return true;
    } else{
        alert("Wrong username or password!");
        return false;
    }
}
var loginDiv = document.createElement('div');
loginDiv.className = 'loginDiv';
    var loginForm = document.createElement('form');
        loginForm.className = 'loginForm';
        // .setAttribute() allows to set all kind of attributes to a node
        loginForm.setAttribute("onsubmit", "return validateLogin()");
        var username = document.createElement('input');
                username.id = 'username';
            var pass = document.createElement('input');
                pass.id = 'pass';
                pass.type = 'password';
            var subm = document.createElement('input');
            subm.type = 'submit';
        loginForm.appendChild(document.createTextNode("Username:"));
        loginForm.appendChild(username);
        loginForm.appendChild(document.createElement('br'));
        loginForm.appendChild(document.createTextNode("Password:"));
        loginForm.appendChild(pass);
        loginForm.appendChild(document.createElement('br'));
        loginForm.appendChild(subm);
        loginForm.action = "#";
        loginForm.method = "post";

    loginDiv.appendChild(loginForm);
document.body.appendChild(loginDiv);

表单验证对表单没有任何作用，没有HTML，只有JS

3 个答案: