Question

我是JavaScript的新手，我尝试为html表单编写一个简单的验证器，但在大多数情况下都崩溃了。点击＆＃34;提交＆＃34;按钮，页面变得无法响应，有时我甚至无法关闭它。

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

请帮忙！

我的JS代码和HTML表单

＆＃13;

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

＆＃13;

    <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>

＆＃13;

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

Answer 1

问题

在功能nameValidator()中，你在循环中有2个拼写错误＆＃39;条件检查，即您在开始时错过i <。它现在的方式，你的条件检查是数字（名称字段的长度），JS视为真（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，循环中断条件始终为true。基本上它是一个无限循环。我确信这就是让您的网页无法响应的原因。如果您更改循环中断条件，它将起作用.... 快乐编码

验证表单（JavaScript）后选项卡崩溃

2 个答案:

问题

解决方案

更正循环声明