我正在尝试测试 HTML Web 表单，但遇到了一些问题。
如果所有数据输入正确，表单将打开辅助 HTML 文件(显示成功消息)。如果未输入数据，或者输入错误数据，字段名称应变为红色，并显示一条消息，指示用户重新输入信息。
我直接从 Finder(我使用的是 Mac)到 Google Chrome 打开该文件，文件在其中完整显示。但是，无论我在输入字段中输入(或不输入)什么内容，代码都会引导我看到成功消息。
代码如下:
<head>
<title>Form</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.Entry.name.value=="") {
msg+="You must enter your name \n";
document.Entry.name.focus();
document.getElementById(‘name’).style.color="red";
result = false;
}
if (document.Entry.age.value=="") {
msg+="You must enter your age \n";
document.Entry.age.focus();
document.getElementById(‘age’).style.color="red";
result = false;
}
if (document.Entry.number.value=="") {
msg+="You must enter your number \n";
document.Entry.number.focus();
document.getElementById(‘number’).style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Form</h1>
<form name="Entry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="age">Age</td>
<td><input type="text" name="age" /></td>
</tr>
<tr>
<td id=”number”>Number</td>
<td><input type="text" name="number"/></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return
validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
我已经查看了代码，确信它是正确的，那么为什么 HTML 不能按预期工作呢？
最佳答案
您的代码包含错误，包括:
- 错误的“'”字符
- “”字符错误
- 使用保留字“number”
以下是固定的工作代码(至少在 Firefox 中):
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<script type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.Entry.name.value=="") {
msg+="You must enter your name \n";
document.Entry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.Entry.age.value=="") {
msg+="You must enter your age \n";
document.Entry.age.focus();
document.getElementById('age').style.color="red";
result = false;
}
if (document.Entry.mumber.value=="") {
msg+="You must enter your number \n";
document.Entry.mumber.focus();
document.getElementById('number').style.color="red";
result = false;
}
if(msg == ""){
return result;
}
else
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Form</h1>
<form name="Entry" id="Entry" method="post" action="success.html" onsubmit="return validateForm()">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="age">Age</td>
<td><input type="text" name="age" /></td>
</tr>
<tr>
<td id="number">Number</td>
<td><input type="text" name="mumber"/></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
明智的做法是将“结果”变量初始化为“假”。这样您只需更新一次 - 当“msg”为空时。
看来你应该选择其他编辑器/IDE。另外，尝试调试您的 JS 脚本 - 您拥有适用于所有现代浏览器的调试器。我个人使用 Firefox 的 Firebug 插件。许多人使用 Chrome 开发者工具。
此外，您可能会发现这个简单的引用很方便: http://www.w3schools.com/js/js_form_validation.asp
关于javascript - 测试 HTML Web 表单时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27112561/