Question

我的验证表格不起作用，我不知道为什么。我试图解决几个小时的错误，但无济于事。

我似乎无法使JavaScript代码验证电子邮件格式，尽管电子邮件验证部分的代码似乎是正确的（或者不是？）

此外，我似乎无法阻止该按钮进入死链接。

每当我添加电子邮件验证JavaScript代码时，都会忽略整个脚本，只处理该特定部分

以下是我的代码

HTML

<!DOCTYPE html>
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
    <title>FORM VALIDATION</title>

</head>
<body>
    <div id="wrapper">
        <div class="welcome">
            <p>Welcome to the Ramones fan page!</p>
            <p id="details">Please fill in your contact details below</p>
        </div><!--welcome ends here-->
        <div class="contianer">
            <form id="form" method="POST" action="index.php" onsubmit="return validate()" name="vForm">
                <div>
                    <h5>Name</h5>
                    <input type="text" name="username" class="textInput" placeholder="Username">
                    <div id="username_error" class="val_error"></div>
                </div><!--Name ends here-->
                <div>
                    <h5>Email</h5>
                    <input type="email" name="email" class="inputText" placeholder="Email">
                    <div id="email_error" class="val_error"></div>
                </div><!--email ends here-->
                <div>
                    <h5>Confirm Email</h5>
                    <input type="email" name="confirm_email" class="inputText" placeholder="Email">
                    <div id="confirm_email_error" class="val_error"></div>
                </div><!--email ends here-->
                <div>
                    <h5>Phone</h5>
                    <input type="text" name="phone" class="textInput" placeholder="Phone number">
                    <div id="phone_error" class="val_error"></div>
                </div><!--phone ends here-->
                <div>
                    <h5>Address</h5>
                    <input type="text" name="address" class="textInput" placeholder="Address">
                    <div id="address_error" class="val_error"></div>
                </div><!--address ends here-->
                <div>
                    <button type="submit" id="submit-btn" class="btn">Register</button>
                </div><!--submit button ends here-->
            </form><!--form ends here-->
        </div>

    </div><!--wrapper ends here-->
</body>
</html>

的JavaScript

// JavaScript Document
// text-fields//

//Execute JS after the page has loaded
window.onload = function(){

    //Get the submit button and add an event listener when the user submits the form

    document.getElementById("submit-btn").addEventListener("click", function(event){
        event.preventDefault();
        checkFields();
    });


    //Function that checks all fields on page
    function checkFields(){
        //Select fields by type
        var inputs = document.getElementsByTagName('input');

        //Add flag to check if email validates
        var hasErrors = false;

        //Reset all errors
        resetErrors();


        //Loop through all input fields and make sure they are not empty
        for(var i = 0; i < inputs.length; i++) {
            if (inputs[i].value === '') {
                document.getElementById(inputs[i].name+'_error').innerHTML= "Please enter " + inputs[i].placeholder;
                document.getElementById(inputs[i].name+'_error').style.display = "block";
                hasErrors = true;
            }
        }

        //If no errors check if email is confirmed correctly
        if (!hasErrors) {
            var emailValue = document.getElementsByName("email")[0].value;
            var confirmEmailValue = document.getElementsByName("confirm_email")[0].value;
            //if emails are not equal//
            if (emailValue !== confirmEmailValue) {
                document.getElementById('confirm_email_error').innerHTML= "Emails need to be identical";
                document.getElementById('confirm_email_error').style.display = "block";
            } else {
                //Reset all errors
                resetErrors();
                alert('Your form has been submited successfully');
            }
        }
    }

    function resetErrors(){
        //Select all errors and reset
        var errors = document.getElementsByClassName("val_error");
        for(var i = 0; i < errors.length; i++) {
            errors[i].style.display = "none";
            errors[i].innerHTML = "";
        }
    }
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
if(inputText.value.match(mailformat)) 
{ 
document.write ("Thank you, Email Address Valid"); <--------------
document.form1.text1.focus();

return true; 
} 
else 
{ 
alert("You have entered an invalid email address!"); 
document.form1.text1.focus(); 
return false; 
}

}

CSS

/* CSS Document */
html{
    background-image:url(ramoness.jpg);
    background-repeat:repeat;
    background-size:cover;
    font-family: 'Indie Flower', cursive;
    font-size:80px;
    color:#FFF;
    height: 100%;
}
.welcome{
    margin-top:-5%;
    margin-left:10%;
    font-weight:bold;
}
#details{
        font-size:50px;
        margin-left:14%;
        margin-top:-5%;
}
#form{
    font-size:20px; 
}

h5
{
    margin-bottom: 15px;
}

.val_error
{
    display: none;
    width: 200px;
    margin: 0 auto;
    padding: 15px;
    color: #FFF;
    background-color: red;
    font-size: 14px;
}

input
{
    border: none;
    border-radius: 5px;
    padding: 15px 5px;
    width: 200px;
    margin-bottom: 10px;
}

.contianer
{
    width: 400px;
    margin: 0 auto;
    text-align: center;
}

#submit-btn
{
    text-align: center;
    margin: 0;
    border: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    background: none;
    line-height: 1;
    font-size: 13px;
    background-color: #FFF;
    outline: none;
    width: 200px;
    padding: 10px;
    margin-top: 20px;

}

Answer 1

此处的主要问题是您在 mailformat 变量之前关闭您的 resetErrors 功能。这就是你的部分代码没有执行的原因。

进行更改后，您还需要定义一个正在使用的变量 inputText ，但未在任何地方定义/声明。

Answer 2

您必须使用test()代替match()。以下是您几乎完全相同的示例：code pen link。

我的JavaScript验证表单不起作用

HTML

的JavaScript

CSS

2 个答案: