0

我正在尝试使用 javascript 验证我的表单，但它似乎不起作用。

谁能看到我的代码中的错误在哪里？

这是我的 HTML 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
<script src="js/validation.js"></script>
<title>Form</title>
</head>
<body>
<form name="myForm" method="post" onsubmit="return validateForm()">
    <fieldset>
        <legend> Please fill out this Form</legend>
        <p>
            <label class="field" for"name"> First name:</label>
            <input type="text" name="fname" class="textbox-300"/>
        </p>
        <p>
            <label class="field" for"name">Last name:</label>
            <input type="text" name="lname" class="textbox-300"/>
        </p>
        <p>
            <label class="field" for"name">Email:</label>
            <input type="text" name="email" class="textbox-300"/>
        </p>
        <p>
            <label class="field" for"name">Phone:</label>
            <input type="text" name="phonenumber" class="textbox-300"/>
        </p>
        <p>
            <label class="field" for"name">Adress:</label>
            <input type="text" name="address" class="textbox-300"/>
        </p>
        <p>
            <input type="submit" value="submit">
        </p>
    </fieldset>
</form>
</body>
</html>

我的 Java Script 代码来验证我的 HTML

function validateForm() {
    var x = document.forms['myForm']['fname'].value;
    var y = document.forms['myForm']['lname'].value;
    var i = document.forms['myForm']['email'].value;
    var j = document.forms['myForm']['phone'].value;
    var address = document.forms['myForm']['address'].value;
    var atpos = i.indexOf("@");
    var dotpos = i.lastIndexOf(".");
    // ______________________________________________
    if (x == null || x == "") {
        alert("First Name must be Entered");
        return false;
    }
    //___________________________________________
    if (y == null || y == "") {
        alert("Last Name must be Entered");
        return false;
    }
    //___________________________________________
    if (parseInt(j) != j) {
        alert("Please enter a correct phone number");
        return false;
    }
    //___________________________________________
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= i.length) {
        alert("Not a valid e-mail address");
        return false;
    }
    //___________________________________________
    if (address == null || address == "") {
        alert("You most enter your Address");
        return false;
    }
}

我一遍又一遍，我找不到错误。

4

2 回答 2

3

首先，将来请尝试将您的代码简化为一个小示例，而不是在问题中插入整个页面。一个很好的方法是使用jsFiddle。

其次，请使您的代码有效！我已经检查并纠正了您损坏的 HTML，例如for"name"您的代码中应该是for="name".

第三，在修复这个问题后，很明显问题（显示在您的浏览器控制台中，调试 Javascript 的关键）是您试图获取value. undefined这意味着，在某个地方，你正在调用value一些不存在的东西。

查看您的 Javascript 并将其与您的 HTML 进行比较，我们看到了这种对比：

HTML

<p>
    <label class="field" for"name">Phone:</label>
    <input type="text" name="phonenumber" class="textbox-300" />
</p>

Javascript

var j = document.forms['myForm']['phone'].value;

你看到问题了吗？phonenumber在您访问时，您的元素具有名称phone。如果将代码更改为document.forms['myForm']['phonenumber'].value，则可以正常工作。

这是您在工作 jsFiddle 中的代码。

最后，当然，您的主要问题可以概括为“重新发明轮子”。您正在做的事情之前已经实施了很多次（并且启动好很多次）。寻找可以为您完成工作的框架，尤其是那些利用 HTML5 中内置的表单验证的现代框架。

于 2013-11-07T10:21:17.497 回答
0

只需更改 Java Script 代码：

var j = document.forms['myForm']['phone'].value;

和

var j = document.forms['myForm']['phonenumber'].value;

这是你的运气（JsFiddle）

于 2013-11-07T10:30:54.863 回答