表单验证对表单没有影响，没有HTML，只有JS

Question

我想学JS，所以我只写JS代码（只有在我的HTML代码中使用脚本的身体标记）。

我想在上面提到的条件，写一个登录表单，并验证它与验证功能。 由于某些原因，当我提交表单时（我相信它甚至没有调用验证函数，因为我在它的开始部分放了一个警报）没有任何反应。

我的代码：

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 = “返回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 提交按钮一个按钮，但你已经知道如何创建一个。

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