Question

我正在尝试使用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脚本代码验证我的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;
    }
}

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

Answer 1

首先，将来请尝试将代码缩减为一个小例子，而不是在问题中整理整个页面。一个很好的方法是使用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，则可以正常使用。

Here is your code in a working jsFiddle

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

Answer 2

只需更改Java脚本代码：

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

使用

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

这是你的运气（JsFiddle）

为什么我的javascript不能验证我的html表单？

2 个答案: