-2

我正在使用 HTML 和 JavaScript 开发一个网站。当我运行我的代码时，它确实会运行，但是无论输入什么，我的 if else 语句都不会遇到 else 情况。有人可以告诉我出了什么问题。我是 Forms 和 javaScript 的新手，但我认为 JavaScript 的大部分内容都与 Java 相同。无论如何，下面的代码。

    <form id="eForm">        
    <script>

    function CheckForm()
    {
    var first=document.getElementsByTagName("input")[0].value;
    var mid=document.getElementsByTagName("input")[1].value;
    var last=document.getElementsByTagName("input")[2].value;
    var email=document.getElementsByTagName("input")[3].value;
    var date=document.getElementsByTagName("input")[4].value;
    var time=document.getElementsByTagName("input")[5].value;


    if((document.getElementsByTagName("input")[0].value !=="first" || document.getElementsByTagName("input")[0].value !=="") && 

    (document.getElementsByTagName("input")[1].value !=="Initial" || document.getElementsByTagName("input")[1].value !=="") && 

    (document.getElementsByTagName("input")[2].value !=="last" || document.getElementsByTagName("input")[2].value !=="") && 

    (document.getElementsByTagName("input")[3].value !=="someone@example.com" || document.getElementsByTagName("input")[3].value !=="") && 

    (document.getElementsByTagName("input")[4].value !=="xx/xx/xxxx" || document.getElementsByTagName("input")[4].value !=="") && 

    (document.getElementsByTagName("input")[5].value !=="xx:xx" || document.getElementsByTagName("input")[5].value !==""))
    {
    document.getElementsByTagName("input")[0].value='fail';
    }
    else
    {
    alert("One or more fields were not filled in correctly. /n Please try again.");
    document.getElementsByTagName("input")[0].value='works';
    }

    first.value='works';
    }
    </script>

    First name: <input type="text" name="FirstName" id="FirstName" value="first"><br>
    Middle Initial: <input type="text" name="MidName" id="MidName" value="Initial"><br>
    Last name: <input type="text" name="LastName" id="LastName" value="last"><br>
    E-Mail: <input type="text" name="Email" id="Email" value="someone@example.com"><br>
    Date for request: <input type="date" name="Date" id="Date" value="xx/xx/xxxx"><br>
    Time for request: <input type="time" name="Time" id="Time" value="xx:xx"> 
    AM<input type="radio" name="AM/PM" id="AM" checked="true">
    PM<input type="radio" name="AM/PM" id="PM" checked="false"><br>

    <input onclick="CheckForm()" type="button" value="Submit">
    <input onclick="CheckForm()" type="submit" value="Submit">

    On Submit, if a feild is left not filled out, then do not go through and show a message saying that "One or more feilds are not filled out. You must fill them 

    out in order to submit this form."

    </form>

事后看来（仍然是 20/20），我应该意识到这个表达对我的 or 陈述总是正确的，所以感谢 v2b 指出这一点。

4

2 回答 2

3

我不会（也没有人，真的）会为你调试你的代码。但这里有一些要点可以帮助您：

  • 您的脚本在输入甚至加载之前运行。将<script>元素放在页面底部，就在收尾的下方</body>。

  • 您的输入有名称，请使用它们：

    var form = document.forms[0]; //Or getElementByID, whatever
console.log(form["FirstName"]); //The first name input.

  • 你的条件太长了。分别检查项目并每次返回适当的错误。您也会帮您的用户一个忙！

  • 您没有使用<label>s 来标记您的输入标签。去做。

  • 用于<input placeholder="placeholder">有占位符文本。（而不仅仅是给出一个初始值）。此外，由于您有标签，占位符文本是多余的。

于 2013-07-29T19:03:44.833 回答
3

(document.getElementsByTagName("input")[0].value !=="first" || document.getElementsByTagName("input")[0].value !=="")

将始终评估为真..记住这是一个 OR，即使一个为真，它也是一个真..
如果值为“first”，那么它将是（false || true），
如果它是“xyz”，那么它将是（真||真），
如果是“”，那么它就是（真||假）

同样的其他5行也是如此..

编辑：
以下将做你想做的事。另外，不要重复 document.getElementsByTagName 太多次。Dom 访问它很昂贵。在您的情况下，无需一次又一次地重复。你可以这样做，

var inputElement = document.getElementsByTagName("input");

if((inputElement[0].value !=="first" && inputElement[0].value !=="") && 
    (inputElement[1].value !=="Initial" && inputElement[1].value !=="") && 
    (inputElement[2].value !=="last" && inputElement[2].value !=="") && 
    (inputElement[3].value !=="someone@example.com" && inputElement[3].value !=="") && 
    (inputElement[4].value !=="xx/xx/xxxx" && inputElement[4].value !=="") && 
    (inputElement[5].value !=="xx:xx" && inputElement[5].value !==""))
{
    inputElement[0].value='fail';
}
else
{
    alert("One or more fields were not filled in correctly. /n Please try again.");
    inputElement[0].value='works';
}
于 2013-07-29T19:07:25.973 回答