表單驗證對表單不執行任何操作，沒有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);