Question

我有一个关于使用JavaScript进行用户输入验证的小问题。

以下是我写的代码。当此代码没有第二次验证时，它正在工作。当我包含第二次验证时，即使第一次验证也不起作用。

忘记我提到的www.bbc.co.uk。

<!DOCTYPE html>
<html>
<head>
<script>

function validateForm() {
    /* first validation */
    var eml = document.forms["myForm"]["email"].value;
    if (eml == null || eml == "") {
        alert("Email Address must be filled out");
        return false;
    }

    /* second validation */
    var reg = /^([A-Za-z0-9._-])+@[A-Za-z0-9.-])+\.([A-Za-z]{2,4})$/;
    if (reg.test(document.forms["myForm"]["emaill"].value) == false) {
        alert("Invalid Email - Reg Function");
        document.getElementById("email").focus();
        return false;
    }
}

</script>
</head>

<body>
<form name="myForm" action="www.bbc.co.uk" onsubmit="return validateForm()" method="post">
    Email Address: <input type="text" name="email">
    <input type="submit" value="Submit">
</form>
</body>

</html>

Answer 1

你在这行拼错了“电子邮件”：

if (reg.test(document.forms["myForm"]["emaill"].value) == false)

无论如何都没有理由从DOM重新获取值;你之前已经在函数中做过了。

if (!reg.test(eml))

就够了。明确地与布尔常量进行比较通常是个坏主意。这不一定是错的，但它很少是必要的，如果你不习惯这种语言，它可能会导致奇怪的事情发生。

Answer 2

您的代码不仅仅是拼写错误。我对你的功能进行了半重写，这里简要说明了我的所作所为。

之前，您返回false两次，但从未返回true。要使onSubmit()起作用，您必须返回其中一个。您应该创建一个flag变量并将其初始设置为false。验证完所有条件后，将其设置为true。在函数结束时，return flag。

其次，您试图通过email抓取id来设置focus()，即使它没有设置id。为此，只需将表单元素设置为变量，然后将元素值设置为不同的变量，这样在函数过程中您可以访问两者（eml和emlVal）

第三，你的正则表达式无效。这里显示的正则表达式是从这里拉出来的： Validate email address in JavaScript?

此外，您应该三思而后行，因为该正则表达式可能不符合RFC： Using a regular expression to validate an email address

第四，从DOM错误地抓取了电子邮件。您在代码的一部分中拼错了email。要抓取您需要的元素var eml = document.myForm.email。这将为您提供email输入元素，然后您可以使用eml.value获取它的值。

最后，除非我忘记某些内容，否则初始if...else上的逻辑应为&& (and)而不是|| (or)

function validateForm() {
    var flag = false;
    /* first validation */
    var eml = document.myForm.email;
    var emlVal = eml.value;
    if (emlVal !== null && emlVal !== "") {
        var reg =/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (!reg.test(emlVal)) {
            alert("Invalid Email - Reg Function");
            eml.focus();
        }
        else {
            flag = true;
        }
    }
    else {
        alert("Email is required");
    }
    return flag;

    /* second validation */
}

jsFiddle

Answer 3

您有一个拼写错误：将emaill改为email。

用户输入验证例程表现很奇怪

3 个答案:

jsFiddle