表单验证对表单不执行任何操作，没有HTML，仅JS

Question

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

我正在尝试在上述条件下编写登录表单并使用验证功能对其进行验证。 由于某种原因，我提交表单时什么也没发生（我相信它甚至都没有调用validate函数，因为我在表单的开头放了一个警报）。

我的代码：

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() ，请将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);