表單驗證對錶單沒有影響，沒有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);