javascript - 注册样式页面上的表单验证Javascript问题

Question

我在获取表单验证事件和相关逻辑时遇到麻烦。

当前的问题出在我网站的“注册”部分。

在浏览器控制台中，我得到“未定义registerFName”，但我感觉问题大于此。

任何人都可以提供的任何帮助将不胜感激。

`$（'。loginMessage a'）。click（function（）{
        $（'form'）。animate（{height：“ toggle”，opacity：“ toggle”}，“ slow”）;
        }）;

// pre-coded users

var existingUsers = 
[
    {   
        firstname: "Gerry",
        lastname: "Agnew",
        username: "GerryA",
        password: "password123",
        email: "gerry@gmit.ie",
        phone:"0833333333"

    },
    {
        firstname: "Sean",
        lastname: "Duignan",
        username: "SeanD",
        password: "password456",
        email: "sean@gmit.ie",
        phone:"0822222222"
    },
    {
        firstname: "Michael",
        lastname: "Duignan",
        username: "MichaelD",
        password: "password789",
        email: "michael@gmit.ie",
        phone:"0844444444"
    }
]

//function setup()
//{
    // setup functions
//}


function dropdown()
{
    document.getElementById("myDropDwn").classList.toggle("show");
}

//=========================================================================

// Validation Events

username.addEventListener('blur', logUserVerify, true);
password.addEventListener('blur', logPassVerify, true);
newFName.addEventListener('blur', fNameVerify, true);
newLName.addEventListener('blur', lNameVerify, true);
newUName.addEventListener('blur', regUserVerify, true);
newPass.addEventListener('blur', regPassVerify, true);
newEmail.addEventListener('blur', emailVerify, true);
newPhone.addEventListener('blur', phoneVerify, true);

//=========================================================================

// Validation error functions

function loginValidate()
{
    if(username == "")
    {
        document.getElementById("login-user-error").innerHTML = "Username required";
        username.focus();
        return false;
    }

    if(password == "")
    {
        document.getElementById("login-pass-error").innerHTML = "Password required";
        password.focus();
        return false;
    }       
}

function registerValidate()
{
    if(registerFName == "")
    {
        document.getElementById("reg-FName-error").innerHTML = "First Name required";
        newFName.focus();
        return false;
    }
    if(registerLName == "")
    {
        document.getElementById("reg-LName-error").innerHTML = "Last Name required";
        newLName.focus();
        return false;
    }
    if(registerUName == "")
    {
        document.getElementById("reg-UName-error").innerHTML = "Username required";
        newUName.focus();
        return false;
    }
    if(registerUName.length < 8)
    {
        document.getElementById("reg-UName-error").innerHTML = "Username must be 8 characters or more";
        newUName.focus();
        return false;
    }
    if(registerPass == "")
    {
        document.getElementById("reg-pass-error").innerHTML = "Password required";
        newPass.focus();
        return false;
    }
    if(registerEmail == "")
    {
        document.getElementById("reg-email-error").innerHTML = "Email required";
        newEmail.focus();
        return false;
    }
    if(registerPhone == "")
    {
        document.getElementById("reg-phone-error").innerHTML = "Phone number required";
        newPhone.focus();
        return false;
    }
}

// end of Validation error functions

//==================================================================================

// Event Functions

function logUserVerify()
{
    if (username != "")
    {
        document.getElementById("login-user-error").innerHTML = "";
        return true;
    }
}
function logPassVerify()
{
    if (password != "")
    {
        document.getElementById("login-pass-error").innerHTML = "";
        return true;
    }
}
function fNameVerify()
{
    if (registerFName != "")
    {
        document.getElementById("login-FName-error").innerHTML = "";
        return true;
    }
}
function lNameVerify()
{
    if (registerLName != "")
    {
        document.getElementById("login-LName-error").innerHTML = "";
        return true;
    }
}
function regUserVerify()
{
    if (registerUName != "")
    {
        document.getElementById("login-UName-error").innerHTML = "";
        return true;
    }
    if (registerUName > 8)
    {
        document.getElementById("login-UName-error").innerHTML = "";
        return true;
    }
}
function regPassVerify()
{
    if (registerPass != "")
    {
        document.getElementById("login-pass-error").innerHTML = "";
        return true;
    }
}
function phoneVerify()
{
    if (registerPhone != "")
    {
        document.getElementById("login-phone-error").innerHTML = "";
        return true;
    }
}
function emailVerify()
{
    if (registerEmail != "")
    {
        document.getElementById("login-email-error").innerHTML = "";
        return true;
    }
}

// end of event functions

//===================================================================================

// Login/Register Functions

function loginUser()
{
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var userCheck = false;
    var passCheck = false;

    loginValidate();

    for (i = 0; i < existingUsers.length; i++)
    {


        if(username == existingUsers[i].username)
        {
            document.getElementById("login-user-error").innerHTML = "";
            userCheck = true;
        }
        else if(username != existingUsers[i].username)
        {
            document.getElementById("login-user-error").innerHTML = "Invalid, user does not exist";
            username.focus();
            return false;
        }

        if(password == existingUsers[i].password)
        {
            document.getElementById("login-pass-error").innerHTML = "";
            passCheck = true;
        }
        else if(password != existingUsers[i].password)
        {
            document.getElementById("login-pass-error").innerHTML = "Error, incorrect password";
            password.focus();
            return false;
        }

        if(userCheck == true && passCheck == true)
        {
            document.getElementById("loggedIn-Out").innerHTML = username;
            localStorage.user = username;
            localStorage.pass = password;
            return;
        }
    }
}

function logoutUser()
{
    localStorage.removeItem("user");
    localStorage.removeItem("pass");
    document.getElementById("loggedIn-Out").innerHTML = "Login/Register";
}

function registerUser()
{

    var registerFName = document.getElementById("newFName").value;
    var registerLName = document.getElementById("newLName").value;
    var registerUName = document.getElementById("newUName").value;
    var registerPass = document.getElementById("newPass").value;
    var registerEmail = document.getElementById("newEmail").value;
    var registerPhone = document.getElementById("newPhone").value;

    registerValidate();

    localStorage.regFname = registerFName;
    localStorage.regLname = registerLName;
    localStorage.regUname = registerUName;
    localStorage.regPass = registerPass;
    localStorage.regMail = registerEmail;
    localStorage.regPhone = registerPhone;

    var newUser =
    {
        firstname: registerFName,
        lastname: registerLName,
        username: registerUName,
        password: registerPass,
        email: registerEmail,
        phone: registerPhone
    }

    for(i = 0; i < existingUsers.length; i++)
    {

        if(registerUName == existingUsers[i].username)
        {
            document.getElementById("reg-UName-error").innerHTML = "Username already exists";
            newUName.focus();
            return false;
        }

        if(registerEmail == existingUsers[i].email)
        {
            document.getElementById("reg-email-error").innerHTML = "Email already exists";
            newEmail.focus();
            return false;
        }

    }
    existingUsers.push(newUser);
}

// end of Login/Register Functions

//================================================================================

// Password Strength functions

function passwordStr()
{
    var passValue = document.getElementById("newPass").value;

    if(passValue.length >= 8 && passValue.length <= 10)
    {
        document.getElementById("passStrength").innerHTML = "Weak";
    }
    else if(passValue.length > 10 && passValue.length <= 16)
    {
        document.getElementById("passStrength").innerHTML = "Average";
        document.getElementById("passStrength").style.color = "yellow";
    }
    else if(passValue.length > 16)
    {
        document.getElementById("passStrength").innerHTML = "Strong";
        document.getElementById("passStrength").style.color = "green";
    }
    else
    {
        document.getElementById("passStrength").style.color = "red";
    }
}
var passInput = document.getElementById("newPass");
passInput.addEventListener("input", passwordStr);

Answer 1

我发现了问题。

问题与我的事件和我的if / else结构有关。
return语句阻止了后续逻辑的运行。
我将它们替换为：

var valid true，每次都将valid设置为false。

然后我注释掉了我的事件，并在其他事件上添加了一个空的“”以替换出现的错误。

我将if条件替换为root document.getElement而不是在函数中尚未实例化的var名称，这导致了一些错误。