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验证表单，似乎缺少一些代码或者可能有点理解

1 个答案: