Question

我在一年级的Javascript项目中遇到了表单验证逻辑问题。

特别是我的错误报告事件。

当我测试＆＃34;没有输入用户名时，页面会随机刷新＆＃34;等等有些错误会暂时显示并消失。

非常感谢任何帮助，并将有助于解决整体问题。

<body onload="setup()">
<div class="container-fluid">
    <div class="page-header" class = "row">
        <div class="col-lg-12"> 
            <img id="banner" src = "pictures/homepage/banner.jpg" width = "100%" height = "20%"></img>
        </div>
        <p id="charc">Charcoal</p>
    </div>
    <div class="butts">
        <button onclick="dropdown()" class="button">Categories</button> 
        <button class="button">My Account</button>
        <button class="button">Shopping Cart</button>
        <button id="loggedIn-Out" class="button">Login/Register</button>
    </div>
    <div id="myDropDwn" class= "dropContent">
        <a href = "#"> womens </a>
        <a href = "#"> mens </a>
        <a href = "#"> shoes </a>
        <a href = "#"> accessories </a>
    </div>
</div>

<div class="login-page" class="col-lg-6">
    <div class="form">
        <form id="logForm" class="login-form">
            <input id="username" type="text" placeholder="Username">
            <div id="login-user-error" class="errorReps"></div>

            <input id="password" type="password" placeholder="Password">
            <div id="login-pass-error" class="errorReps"></div>

            <button onclick="loginUser()">Login</button>
            <div id="login-error" class="errorReps"></div>
            <p class="loginMessage"> Not Registered? <a href="#">Register</a>
            <br>
            <br>
            <a href="register.html" id="logoutButton" onclick="logoutUser()">Logout</a>
        </form>

        <form id="regForm" class="register-form">
            <input id="newFName" type="text" placeholder="First Name">
            <div id="reg-FName-error" class="errorReps"></div>

            <input id="newLName" type="text" placeholder="Last Name">
            <div id="reg-LName-error" class="errorReps"></div>

            <input id="newUName" type="text" placeholder="Username">
            <div id="reg-UName-error" class="errorReps"></div>

            <input id="newPass" type="password" placeholder="Password"> 
            <div id="reg-pass-error" class="errorReps"></div>
            <div id="passStrength"></div>

            <input id="newEmail" type="email" placeholder="Email">
            <div id="reg-email-error" class="errorReps"></div>

            <input id="newPhone" type="number" placeholder="Tel. Number">
            <div id="reg-phone-error" class="errorReps"></div>

            <button onclick="registerUser()">Create</button>
            <p class="loginMessage"> Already Registered? <a href="#">Login</a>
        </form>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $('.loginMessage a').click(function(){
    $('form').animate({height:"toggle", opacity: "toggle"}, "slow");
    });
</script>

<script>

// 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");
}
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);

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;
    }
}
// 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;
    }
}   

// Login/Register Functions

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

    for (i = 0; i < existingUsers.length; i++)
    {
        if(username == existingUsers[i].username && password == existingUsers[i].password)
        {
            alert(username + " Is logged in");
            document.getElementById("loggedIn-Out").innerHTML = username;
            document.getElementById("login-user-error").innerHTML = "";
            localStorage.user = username;
            localStorage.pass = password;
            return;
        }
        else if(username != existingUsers[i].username)
        {
            document.getElementById("login-user-error").innerHTML = "Invalid, user does not exist";
            username.focus();
            return false;
        }

        else
        {
            loginValidate();
        }   
    }
}

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;

    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;
        }
        registerValidate();
    }
    existingUsers.push(newUser);
}
// 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);

</script>

Answer 1

在登录按钮中添加type属性。 type="button"

<button type="button" onclick="loginUser()">Login</button>

如果不指定类型，该按钮将默认为submit行为。您似乎在没有默认表单提交的情况下处理登录，因此将类型设置为按钮只会将其更改为常规按钮，因此不会提交表单。

表单验证问题。使用Javascript / HTML

1 个答案: