尝试创建一个简单的表单，如果未填写任何内容将显示错误
Posted
技术标签:
【中文标题】尝试创建一个简单的表单，如果未填写任何内容将显示错误【英文标题】：Trying to create a simple form that will display an error if nothing is filled in 【发布时间】：2015-03-22 02:06:54 【问题描述】：我最近刚开始学习 javascript 并且正在学习一些课程，对于我的一个课程，我必须创建一个简单的表单。
如果在按下提交按钮时未填写表单，则应该有 javascript 会显示错误消息。
按下按钮时没有任何反应，我什至不确定该功能是否正在运行。
我没有放入任何“document.write”，我一步一步按照说明进行操作，但仍然无法使其正常工作。
如果能得到任何帮助，我将不胜感激，非常感谢。
<html>
<head>
<title>My Form</title>
</head>
<body>
<script type="text/javascript">
function register()
var x = new Array();
x[0] = document.getElementById('name').value;
x[1] = document.getElementById('lname').value;
x[2] = document.getElementById('email').value;
x[3] = document.getElementById('pw').value;
x[4] = document.getElementById('pwc').value;
var h = new Array();
h[0] = <span style="color:'red'>Please type first name!</span>";
h[1] = <span style="color:'red'>Please type last name!</span>";
h[2] = <span style="color:'red'>Please type email!</span>";
h[3] = <span style="color:'red'>Please type a password!</span>";
h[4] = <span style="color:'red'>Please confirm password!</span>";
var divs = new Array("mname", "mlname", "memail", "mpw", "mpwc");
for(i in x)
var error = h[i];
var div = divs[i];
if(x[i])=="")
document.getElementById(div).innerHTML = error;
else
document.getElementById(div).innerHTML = "OK!";
;
;
;
</script>
<form>
<table border="1">
<tr><td>First Name:</td><td><input type="text" name="name" id="name" /></td><td><div id ="mname"></div></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lname" id="lname"/></td><td><div id ="mlname"></div></td></tr>
<tr><td>Email:</td><td><input type="text" name="email" id="email"/></td><td><div id ="memail"></div></td></tr>
<tr><td>Password:</td><td><input type="text" name="pw" id="pw"/></td><td><div id ="mpw"></div></td></tr>
<tr><td>Confirm Password:</td><td><input type="text" name="pwc" id="pwc"/></td><td><div id ="mpwc"></div></td></tr>
</table>
<br />
<input type="button" name="submit" value="submit" onclick="register();" />
</form>
</body>
</html>【问题讨论】：
【参考方案1】：你犯了一些错误，一个在 span 字符串中，另一个在 if 语句中。休息一切看起来都很好！
检查这个小提琴：
http://jsfiddle.net/zog1h7f6/
function register()
var x = new Array();
x[0] = document.getElementById('name').value;
x[1] = document.getElementById('lname').value;
x[2] = document.getElementById('email').value;
x[3] = document.getElementById('pw').value;
x[4] = document.getElementById('pwc').value;
var h = new Array();
h[0] = "<span style=color:red>Please type first name!</span>";
h[1] = "<span style=color:red>Please type last name!</span>";
h[2] = "<span style=color:red>Please type email!</span>";
h[3] = "<span style=color:red>Please type a password!</span>";
h[4] = "<span style=color:red>Please confirm password!</span>";
var divs = new Array("mname", "mlname", "memail", "mpw", "mpwc");
for(i in x)
var error = h[i];
var div = divs[i];
if(x[i]==='')
document.getElementById(div).innerHTML = error;
else
document.getElementById(div).innerHTML = "OK!";
;
;
;
【讨论】：
太棒了！非常感谢……这种语法似乎让我很受用。感谢您的帮助【参考方案2】：我的建议是分小步进行；
-
检查是否首先调用
register() 函数。
在register 函数中，首先尝试获取一个元素值，例如id="name"，通过执行document.getElementById('name') 并测试当您使用为名称字段指定的值提交时是否获得值。
尝试为 div 设置一些值。我建议在 chrome 检查器控制台或 Firefox 检查器控制台中进行测试。例如document.getElementById('mname').innerHtml = '<span>Testing this</span>'
一旦您习惯了使用各个部分，您应该能够将它们全部串在一起。
【讨论】：
感谢您的帮助。不过我确实有一个问题。是否有任何软件上的调试功能？因为我觉得这很有用，有点像 Visual Studio 对 C++ 所做的。我一直在使用notepad++、括号，有时还使用dreamweaver CS6 和CC。再次感谢您的帮助 Intellij webstorm、eclipse、net beans 都可以。但是您可以简单地使用 sublime text 或 notepad++ 并使用浏览器进行调试。了解一下 chrome 检查器【参考方案3】：试试这个脚本，我觉得它更干净一点
<script type="text/javascript">
function register()
var name = document.getElementById('name').value,
lName = document.getElementById('lname').value,
email = document.getElementById('email').value,
pw = document.getElementById('pw').value,
pwc = document.getElementById('pwc').value;
if(name !== '' && lName !== ''&& email !== '' && pw !== '' && pwc !== '')
alert("succes");
else
alert("sorry fill all inputs");
;
</script>
【讨论】：
绝对干净多了哈哈。我只是按照我的导师做的方式。感谢您的帮助！【参考方案4】：您在定义错误消息时遇到语法错误：
var h = new Array();
h[0] = <span style="color:'red'>Please type first name!</span>";
h[1] = <span style="color:'red'>Please type last name!</span>";
h[2] = <span style="color:'red'>Please type email!</span>";
h[3] = <span style="color:'red'>Please type a password!</span>";
h[4] = <span style="color:'red'>Please confirm password!</span>";
您应该在引号之间交替使用（即将整个字符串包装在 ' 中并在内部使用 "，反之亦然），或者像这样转义字符串中的双引号。
var h = new Array();
h[0] = "<span style=\"color:red\">Please type first name!</span>";
h[1] = "<span style=\"color:red\">Please type last name!</span>";
h[2] = "<span style=\"color:red\">Please type email!</span>";
h[3] = "<span style=\"color:red\">Please type a password!</span>";
h[4] = "<span style=\"color:red\">Please confirm password!</span>";
【讨论】：
我认为color: 'red'的'是不必要的。
投票...首先不是一个合适的解决方案。您还忘记在 if 语句中包含错误！以上是关于尝试创建一个简单的表单，如果未填写任何内容将显示错误的主要内容，如果未能解决你的问题，请参考以下文章