JavaScript验证-在文本框上不起作用

Question

试图在表单上运行一些Javascript验证，但是没有任何效果。 应该发出警报，阻止用户继续预订座位，但是他们可以自由地继续。 不知道我在做什么错，但似乎很基本。

如果有人可以看一下我的代码，我将不胜感激。

文字输入表格>>>

<form method="POST" name="Customer_Details" action="Ice Cream.php">
    <h3> Full Name </h3>
    <p> Name - Full Name. </p>
    <input type="text" name="Name" oninput="nameCheck();" />

    <h3> Email Address </h3>
    <p> Email here please </p>
    <input type="text" name="Email" oninput="return(validateEmail());" />
    <input type="submit" name="submit" value="Book Tickets">
</form>

validateEmail（）的JavaScript；

var email = document.Customer_Details.Email;

function validateEmail(email)  
{  
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
    if(email.value.match(mailformat))  
    {  
        return true;  
    }  
    else  
    {  
        alert("You have entered an invalid email address. Please try again!");  
        email.focus();  
        return false;  
    }  
} 

Answer 1

您的var电子邮件不是您的validate email功能的参数。 该函数不需要任何参数：

function validateEmail()  
{  
    email = document.Customer_Details.Email;
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
    if(email.value.match(mailformat))  
    {  
        return true;  
    }  
    else  
    {  
        alert("You have entered an invalid email address. Please try again!");  
        email.focus();  
        return false;  
    }  
}

（但是使用oniput使得输入电子邮件变得困难...）

Answer 2

我认为您的问题是在错误的位置调用了您的JavaScript验证。 提交表单时应调用它。

当我测试它时，此代码有效：

HTML：

<form method="POST" name="Customer_Details" action="Ice Cream.php" onsubmit="return validateEmail()">
    <h3> Full Name </h3>
    <p> Name - Full Name. </p>
    <input type="text" name="Name">
    <h3> Email Address </h3>
    <p> Email here please </p>
    <input type="text" name="Email">
    <input type="submit" name="submit" value="Book Tickets">
</form>

JS：

function validateEmail() {
    var email = document.Customer_Details.Email;

    if(!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value)) {
        alert("You have entered an invalid email address");
        email.focus();
        return false;
    } else {
        return true;  
    }  
}