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

我正在尝试学习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（）”； 进入

---

出于某种原因，为我解决了这个问题。

首先，您的目标是DOM对象，而不是值。 而不是：

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

使用：

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

编辑：

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

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

---

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

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

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

---

您的

onsubmit

属性未添加到表单中。要解决此问题，请使用

.setAttribute

，如下面代码所示

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

.value

如果您不希望在使用真实登录凭据时，页面重新加载（或重定向到表单的

操作

属性中给定的任何页面，请将

事件.preventDefault（）

预先发送到

验证登录（）

---

谢谢，但不管你向我展示了什么优点，我甚至没有看到函数开头的警报。这是由于语法错误还是函数中没有出现警报？我已经更新了代码来回答你的问题。另外，请访问JSlint.com，在那里你可以在线检查你的代码。如果你对它比较满意，请在y中使用它我们自己的编辑器，因此您不必复制/粘贴代码。感谢您的帮助！谢谢，它不应该是subm.onclick=return validateLogin（）；？此时，使用您提供的代码，它会在validateLogin（）的开头自动启动警报功能，甚至不让我看到表单伟大的答案谢谢。在这一点上，我提交表单时没有发生任何事情，甚至没有警告（“检查”）; statement@Sharonica我已经测试了我在一个空白文件中发布的代码，该文件只包含一个

和

标记，并将

包装在上面的JavaScript代码周围，对我来说效果很好。好的，我会继续挖掘，可能是其他原因阻止了我的代码正常工作。非常感谢much@Sharonica你喜欢哪个浏览器用于测试此功能？我尝试了Chrome和IE，在编辑代码（我编辑了问题）后，它可以工作

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

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

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);