我正在尝试使用 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;
}
}
我检查了一遍又一遍，但找不到错误。
最佳答案
首先，将来请尝试将您的代码简化为一个小示例，而不是将整个页面都放在问题中。一个很好的方法是使用 jsFiddle .
第二，请确保您的代码有效!我已经检查并纠正了您损坏的 HTML，例如代码中的各种位，例如 for"name" 应该是 for="name"。
第三，修复此问题后，很明显问题(显示在浏览器控制台中，这是调试 Javascript 的关键)是您试图获取 的 。这意味着，在某个地方，您正在对不存在的东西调用 value >未定义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;
你看到问题了吗？当您访问 phone 时，您的元素的名称为 phonenumber。如果将代码更改为 document.forms['myForm']['phonenumber'].value，则可以正常工作。
Here is your code in a working jsFiddle .
最后，当然，您的主要问题可以概括为“重新发明轮子”。你正在做的事情之前已经实现过很多次了(并且启动起来更好很多次)。研究可以为您完成工作的框架，尤其是利用 HTML5 内置表单验证的现代框架。
关于javascript - 为什么我的 javascript 不验证我的 html 表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19833185/