使用 Javascript 的验证表单，似乎缺少一点代码或者可能缺少一点理解

Question

这就是我目前所拥有的。我希望我的代码呈现的是，如果三个用户输入中的任何一个无效，相应的错误消息应该显示在屏幕上。

就目前而言，这不会发生....此外，我认为一个很好的办法是，一旦输入了正确的输入，它就会在输入字段，唉，我一直无法实现这个。

<!DOCTYPE html>

    <html>

    <head>

        <title>Validation</title>

        <script type="text/javascript">
            <!--

            function validate_form() {
                valid = true;

                if (document.contact_form.pin.value == "") {
                    alert("Please fill in your '4 Digit PIN' in the box.");
                    valid = false;
                } else if (document.contact_form.pin.value == "1234") {
                    content: "✓";
                    color: green;
                }

                if (document.contact_form.surname.value == "") {
                    alert("Please complete your surname");
                    valid = false;
                } else if (document.contact_form.surname.value == "Doe") {
                    content: "✓";
                    color: green;
                }

                if (document.contact_form.email.value == "") {
                    alert("Icorrect email address for current user");
                    valid = false;
                } else if (document.contact_form.email.value == "doe09@gmail.com") {
                    content: "✓";
                    color: green;
                }




                return valid;
            }

            //-->
        </script>

    </head>

    <body bgcolor="#FFFFFF">

        <form name="contact_form" method="post" action="http://www.dcu.ie/" onSubmit="return validate_form ( );">

            <h1>John Doe (C1_A2_2015)</h1>
            <p>4 Digit PIN:
                <input type="text" name="pin">
            </p>
            <p>Surname:
                <input type="text" name="surname">
                <p>E-mail:
                    <input type="text" name="email">



                    <p>
                        <input type="submit" name="send" value="Validate Inputs">
                    </p>

        </form>

    </body>

    </html>

Answer 1

1) 你可以这样实现。

 var form = document.getElementById("myForm");
 if (form.elements.namedItem("pin").value === "") {
                alert("Please fill in your '4 Digit PIN' in the box.");
                valid = false;
            } else if (form.elements.namedItem("pin").value === "1234") {
                content: "✓";
                color: green;
            }

对其余条件执行相同的操作。正如评论中所建议的那样，您编写的 javascript 代码没有任何效果，因为语法没有写。

您可以查看 How to use document.getElementByName and getElementByTag? 以了解有关按名称和 ID 获取元素的更多信息。

2) 对于您的 onSubmit 函数，您不需要添加 ; .

<form name="contact_form" method="post" action="http://www.dcu.ie/" onSubmit="return validate_form()">

查看本教程了解更多详情。 http://www.formget.com/javascript-onsubmit/

3) 请注意，我使用了 === 而不是 ==。在您的情况下，它应该没有任何区别。然而，仅供参考，=== 匹配对象类型和值。 == 仅匹配值。因此，如果您想确保要匹配的两个对象具有相同的类型和值，请使用 ===，否则使用 ==。如果您使用 ==.

，某些 IDE 会发出警告

4) 当您在文本字段中输入内容时，您的表单正在接受验证。您检查文本字段是否为空以及文本字段是否包含正确的文本。但是您没有任何检查错误输入的东西。只是不要添加任何东西并点击提交按钮。您的验证功能应该有效

像这样修改你的代码

if (form.elements.namedItem("pin").value === "" || form.elements.namedItem("pin").value != "1234") {
                alert("Please fill in your '4 Digit PIN' in the box.");
                valid = false;
            }

这是工作代码。我对你的代码做了一些修改，并注释了它们供你参考。

代码在 JSFiddle 上不工作，我不知道为什么。但是我已经在 Chrome 和 firefox 中对其进行了测试并且工作正常。希望这能解决您的问题。 :)

 <!DOCTYPE html>

<title>Validation</title>

 <head>
 <script type="text/javascript">
 function validate_form() {
        var valid = true; //defined valid

        var myform = document.getElementById("myFormID");   //define myForm variable only once and added ID to your HTML form
        if (myform.elements.namedItem("pin").value === "" || myform.elements.namedItem("pin").value != "1234") {
            alert("Please fill in your '4 Digit PIN' in the box.");
            valid = false;
        }

        if (myform.elements.namedItem("surname").value === "" || myform.elements.namedItem("surname").value != "Doe") {
            alert("Please enter the correct Surname.");
            valid = false;
        }

        var x = document.forms["myForm"]["email"].value;
        var atpos = x.indexOf("@");
        var dotpos = x.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
            alert("Not a valid e-mail address");

            valid = false;    //do not return false here
        }

        //alert(valid);
        return valid; //return valid at the end which is intialised as true.
    }
 </script>
 </head>    
  <body bgcolor="#FFFFFF">
<form name="myForm" id="myFormID" action="http://www.dcu.ie/" onSubmit="return validate_form()" method="post">

    <h1> John Doe (C1_A2_2015) </h1>
    <p>4 Digit PIN:
        <input type="text" name="pin">
    </p>

    <p>Surname:
        <input type="text" name="surname">
    </p>
     <p>E-mail:
            <input type="text" name="email">
     </p>

      <p>
          <input type="submit" value="Validate Inputs">
      </p>
</form>
</body>
</html>

使用 Javascript 的验证表单，似乎缺少一点代码或者可能缺少一点理解

Validation form using Javascript, seem to be missing a little code or perhaps a little understanding

javascript

validation