验证表单后选项卡崩溃 (JavaScript)

Question

我是 JavaScript 的新手，我尝试为 html 表单编写一个简单的验证程序，但在大多数情况下它会崩溃。单击 "Submit" 按钮后，页面变得没有响应，有时我什至无法关闭它。

电子邮件验证器似乎工作正常，但名称验证器和邮政编码验证器经常崩溃，即使一切正常。

求求你帮忙！

我的JS代码和HTML表单

var myForm    = document.forms.myForm;
var message   = document.getElementById("messageField");


myForm.onsubmit = function()
{
    if (emailValidator() == false || nameValidator() == false || zipCodeValidator() == false)
    {
        return false;
    }
    else
    {
        message.innerHTML = "";
        return true;
    }
};


function emailValidator()
{
    if (myForm.email.value.indexOf("@") == -1 || myForm.email.value.indexOf("@") == 0 || myForm.email.value.indexOf("@") == myForm.email.value.length - 1 || myForm.email.value.indexOf("@") != myForm.email.value.lastIndexOf("@"))
    {
        console.log("Invalid email error!");
        message.innerHTML = "Your email is incorrect!";
        return false;
    }

    else
    {
        return true;
    }
}

function nameValidator()
{
    // var firstNameString = String(myForm.firstName.value);
    // var lastNameString  = String(myForm.lastName.value);

    for (var i = 0; String(myForm.firstName.value).length; i++)
    {
        if (!isNaN(String(myForm.firstName.value)[i]))
        {
            console.log("Invalid first name!");
            message.innerHTML = "Your first name is incorrect!";
            return false;
        }
    }

    for (var i = 0; String(myForm.lastName.value).length; i++)
    {
        if (!isNaN(String(myForm.lastName.value)[i]))
        {
            console.log("Invalid last name!");
            message.innerHTML = "Your last name is incorrect!";
            return false;
        }
    }

    return true;
}

function zipCodeValidator()
{
    var zipCodeString = String(myForm.zipCode.value);

    if (zipCodeString.length != 5)
    {
        console.log("Invalid zip code!");
        message.innerHTML = "Your zip code is incorrect!";
        return false;
    }

    for (var i = 0; i < 5; i++)
    {
        if (isNaN(zipCodeString[i]))
        {
            console.log("Invalid zip code!");
            message.innerHTML = "Your zip code is incorrect!";
            return false;
        }
    }

    return true;
}

    <body>
        <form id="myForm" name="myForm" action="#" method="#">
            <p>First name</p>
            <input type="text" name="firstName" required/>
            <p>Last name</p>
            <input type="text" name="lastName" required/>
            <p>ZIP code</p>
            <input type="text" name="zipCode" required/>
            <p>Email</p>
            <input type="text" name="email" required/>
            <p><input type="reset"/> <input type="submit" name="submit" value="Submit"/></p>
        </form>
        <div id="messageField" style="color: red"></div>
        <script src="javascript.js"></script>
    </body>

jsfiddle：https://jsfiddle.net/dd92y2vh/

Answer 1

问题

在函数 nameValidator() 中，您在循环的条件检查中有 2 个拼写错误，即您在开头错过了 i <。现在的情况是，您的条件检查是数字（名称字段的长度），JS 将其视为 true (Boolean(7) === true)，因此您陷入了无限循环。

解决方案

将String(myForm.firstName.value).length替换为i < myForm.firstName.value.length
将String(myForm.lastName.value).length替换为i < myForm.lastName.value.length

正确的循环声明

实施上述解决方案后，您的循环声明应如下所示：

for (var i = 0; i < myForm.lastName.value.length; i++)
for (var i = 0; i < myForm.lastName.value.length; i++)

Working code 从你的分叉而来。

Answer 2

下面代码中存在逻辑错误。

for (var i = 0; String(myForm.firstName.value).length; i++)
{
    if (!isNaN(String(myForm.firstName.value)[i]))
    {
        console.log("Invalid first name!");
        message.innerHTML = "Your first name is incorrect!";
        return false;
    }
}

for (var i = 0; String(myForm.lastName.value).length; i++)
{
    if (!isNaN(String(myForm.lastName.value)[i]))
    {
        console.log("Invalid last name!");
        message.innerHTML = "Your last name is incorrect!";
        return false;
    }
}

只看循环中断情况。你写的怎么样。

for (var i = 0; **String(myForm.firstName.value).length**; i++)

假设如果 firstname 值为 "John" 那么它的长度将为 4 并且循环中断条件始终为真。基本上这是一个无限循环。我确信这就是使您的页面无响应的原因。如果您更改循环中断条件，它将起作用.... 编码愉快

验证表单后选项卡崩溃 (JavaScript)

Tab crashes after validating form (JavaScript)

javascript

forms

submit

问题

解决方案

正确的循环声明