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

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

javascript html forms validation

为什么我的javascript不验证我的html表单？,javascript,html,forms,validation,Javascript,Html,Forms,Validation,我试图用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>

我试图用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>


形式
请填写这张表格

名字：


姓氏：


电邮：


电话：


地址：

验证HTML的Java脚本代码

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

函数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（“.”）；
// ______________________________________________
如果（x==null | | x==“”）{
警报（“必须输入名字”）；
返回false；
}
//___________________________________________
如果（y==null | | y==“”）{
警报（“必须输入姓氏”）；
返回false；
}
//___________________________________________
if（parseInt（j）！=j）{
警报（“请输入正确的电话号码”）；
返回false；
}
//___________________________________________
if（atpos<1 | | dotpos=i.length）{
警报（“不是有效的电子邮件地址”）；
返回false；
}
//___________________________________________
如果（地址==null | |地址==“”）{
提醒（“您最多输入您的地址”）；
返回false；
}
}

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

首先，以后请尝试将代码简化为一个小示例，而不是在问题中拖长整个页面。一个很好的方法是使用

第二，请使您的代码有效！我已经检查并更正了您的HTML格式，例如，您的代码中应该是

for=“name”

的“name”的各种位

第三，在解决了这个问题之后，问题很明显（显示在浏览器控制台中，调试Javascript的关键点）是您试图获取

未定义的的值。这意味着，在某个地方，你在调用一些不存在的东西的value

通过查看Javascript并将其与HTML进行比较，我们可以看到以下对比：
HTML
你看到问题了吗？当您访问phone
时，元素的名称为phonenumber
。如果您将代码更改为document.forms['myForm']['phonenumber'].value
，则它可以正常工作

最后，当然，你的主要问题可以概括为“重新发明轮子”。您正在做的事情以前已经实现过很多次了（而且比引导好很多倍）。看看那些能为你做这项工作的框架，尤其是那些利用HTML5内置的表单验证的现代框架。
首先，在将来，请尝试将你的代码简化为一个小例子，而不是在这个问题上拖拖拉拉地整页。一个很好的方法是使用
第二，请使您的代码有效！我已经检查并更正了您的HTML格式，例如，您的代码中应该是for=“name”
的“name”
的各种位
第三，在解决了这个问题之后，问题很明显（显示在浏览器控制台中，调试Javascript的关键点）是您试图获取未定义的的值。这意味着，在某个地方，你在调用一些不存在的东西的value

通过查看Javascript并将其与HTML进行比较，我们可以看到以下对比：
HTML
你看到问题了吗？当您访问phone
时，元素的名称为phonenumber
。如果您将代码更改为document.forms['myForm']['phonenumber'].value
，则它可以正常工作

最后，当然，你的主要问题可以概括为“重新发明轮子”。您正在做的事情以前已经实现过很多次了（而且比引导好很多倍）。看看那些能为你做这项工作的框架，尤其是那些利用HTML5内置的表单验证的现代框架。
首先，在将来，请尝试将你的代码简化为一个小例子，而不是在这个问题上拖拖拉拉地整页。一个很好的方法是使用
第二，请使您的代码有效！我已经检查并更正了您的HTML格式，例如，您的代码中应该是for=“name”
的“name”
的各种位
第三，在解决了这个问题之后，问题很明显（显示在浏览器控制台中，调试Javascript的关键点）是您试图获取未定义的的值。这意味着，在某个地方，你在调用一些不存在的东西的value

通过查看Javascript并将其与HTML进行比较，我们可以看到以下对比：
HTML
你看到问题了吗？当您访问phone
时，元素的名称为phonenumber
。如果您将代码更改为document.forms['myForm']['phonenumber'].value
，则它可以正常工作

最后，当然，你的主要问题可以概括为“重新发明轮子”。您正在做的事情以前已经实现过很多次了（而且比引导好很多倍）。看看那些能为你做这项工作的框架，尤其是那些利用HTML5内置的表单验证的现代框架。首先，以后请尝试
<p>
    <label class="field" for"name">Phone:</label>
    <input type="text" name="phonenumber" class="textbox-300" />
</p>

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

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

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