Javascript 表单验证为空或空格不起作用
我正在尝试制作一个表单，到目前为止都很好，只是当我故意让它空白或留出一个空格时，验证没有亮起。我将“required”放在HTML中，它完成了我希望它完成的部分工作。 下面是javascript函数：Javascript 表单验证为空或空格不起作用,javascript,html,Javascript,Html,我正在尝试制作一个表单，到目前为止都很好，只是当我故意让它空白或留出一个空格时，验证没有亮起。我将“required”放在HTML中，它完成了我希望它完成的部分工作。 下面是javascript函数： function validateForm() { var x = document.forms["form"]["fname"].value; var a = document.forms["form"]["lname"].value; var b = document.forms["f
function validateForm() {
var x = document.forms["form"]["fname"].value;
var a = document.forms["form"]["lname"].value;
var b = document.forms["form"]["abbr"].value;
var c = document.forms["form"]["city"].value;
var d = document.forms["form"]["prov"].value;
var e = document.forms["form"]["postal"].value;
var f = document.forms["form"]["phoneNum"].value;
var g = document.forms["form"]["cellphone"].value;
var h = document.forms["form"]["email"].value;
var i = document.forms["form"]["dob"].value;
if (x == null || x == " ") {
document.getElementById("hidestar").hidden=false;
if (a == null || a == "") {
document.getElementById("hidelast").hidden=false;
if (b == null || b == "") {
document.getElementById("hideaddr").hidden=false;
if (c == null || c == "") {
document.getElementById("hidecity").hidden=false;
if (c == null || c == "") {
document.getElementById("hidecity").hidden=false;
if (d == null || d == "") {
document.getElementById("hideprov").hidden=false;
if (e == null || e == "") {
document.getElementById("hidepost").hidden=false;
if (f == null || f == "") {
document.getElementById("hidephone").hidden=false;
if (g == null || g == "") {
document.getElementById("hidecell").hidden=false;
if (h == null || h == "") {
document.getElementById("hideemail").hidden=false;
if (i == null || i == "") {
document.getElementById("hidedob").hidden=false;
}
}
}
}
}
}
}
}
}
return false;
}
<form name="form" action="form.php" method="POST" onsubmit="return validateForm()">
<font color="red" id="hidestar" hidden=true>*</font>Name: <input type="text" name="fname" required>
<font color="red" id="hidelast" hidden=true>*</font>Last Name: <input type="text" name="lname" required><br><br>
<font color="red" id="hideaddr" hidden=true>*</font>Address: <input type="text" name="addr" required><br><br>
<font color="red" id="hidescity" hidden=true>*</font>City: <input type="text" name="city" required>
<font color="red" id="hideprov" hidden=true>*</font>Prov: <input type="text" name="prov" required><br><br>
<font color="red" id="hidepost" hidden=true>*</font>Postal Code: <input type="text" name="postal" required><br><br>
<font color="red" id="hidephone" hidden=true>*</font>Phone Number: <input type="text" name="phoneNum" required>
<font color="red" id="hidecell" hidden=true>*</font>Cell Number: <input type="text" name="Cellphone" required><br><br>
<font color="red" id="hideemail" hidden=true>*</font>Email: <input type="text" name="email" required><br><br>
<font color="red" id="hidedob" hidden=true>*</font>DoB: <input type="text" id="newsl" name="dob" required><br/><br/>
<font color="red" id="hidenews" hidden=true>*</font>Newsletter: yes: <input type="radio" id="newsl" name="newsletter" value="1">
no: <input type="radio" id="newsl" name="newsletter" value="0"><br><br>
<font color="red" id="hidevol" hidden=true>*</font>Volunteer:yes: <input type="radio" id="voll" name="volunteer" value="1">
no: <input type="radio" id="voll" name="volunteer" value="0"><br><br>
<font color="red" id="hidecrim" hidden=true>*</font>Criminal Record: yes: <input type="radio" id="criml" name="criminalrecord" value="1">
no: <input type="radio" id="criml" name="criminalrecord" value="0"><br><br>
<input type="submit" name="submit">
*姓名：
*姓氏：
*地址：
*城市：
*证明：
*邮政编码：
*电话号码：
*单元格编号：
*电子邮件：
*出生日期：
*通讯：是的：
否：
*志愿者：是的：
否：
*犯罪记录：是：
否：
我快速举例说明了代码的外观 它可以改进和扩展，jQuery还将为您提供一些似乎可以简化某些任务的方法
但第一印象是，我决定继续使用一些简单的代码行（纯html、js和css） 您的代码不包含一些真正的验证；所以我也没有实现一个。
在google或StackOverflow上搜索一些使您的工作变得简单的库。使用您获得的代码，您应该取消所有if语句的嵌套，以便它们都得到执行 然后，您应该跟踪总体结果-您可能会弄乱
和和或的内容，但最简单的方法是使用一个布尔值，它会随着您的操作而修改，例如
var isValid = true;
if (x == null || x == " ") {
document.getElementById("hidestar").hidden=false;
isValid = false;
}
if (a == null || a == "") {
document.getElementById("hidelast").hidden=false;
isValid = false;
}
if (b == null || b == "") {
document.getElementById("hideaddr").hidden=false;
isValid = false;
}
...
以此类推，直到最后返回isValid
Wow。。无限if语句有什么用？也。。
元素已被弃用多年。我只是不知道如何确定第一个if语句是真还是假，转到下一个。。。。。。请稍等。不确定您想用hidden=false
做什么。这不是有效的HTML。它不是无效的，它以前工作过。基本上，每个字段旁边都有一个星号hidden=false
使语句为真时可见。我不明白为什么要坚持使用级联if或if/else语句。我看没有理由把它们串起来。谢谢你没有看不起我。。。。这个地方对需要帮助的新手来说真的很残酷：/无论如何，是的，我会看看你的例子，试着理解你做了什么。谢谢。@Thomas Formonsubmit
属性不正确。在调用验证函数之前，必须防止默认行为。所以onsubmit
属性必须是：event.preventDefault（）；validateForm（）@MehranTorki你说得对，忘了删除这个。正确的表单验证并不是一项简单的任务，我总是希望有一个比我所展示的更完整的实现。在许多情况下，这种精确的实现会复制或干扰验证库。这只是第一个（正如我所提到的）简单的例子，它向Dan提供了一个比他开始使用的代码更好的方向的提示。
var isValid = true;
if (x == null || x == " ") {
document.getElementById("hidestar").hidden=false;
isValid = false;
}
if (a == null || a == "") {
document.getElementById("hidelast").hidden=false;
isValid = false;
}
if (b == null || b == "") {
document.getElementById("hideaddr").hidden=false;
isValid = false;
}
...