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

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

javascript validation

使用Javascript的验证表单似乎缺少一点代码，或者可能缺少一点理解,javascript,validation,Javascript,Validation,这就是我到目前为止所得到的。我希望我的代码呈现的是，如果三个用户输入中的任何一个无效，屏幕上应该显示相应的错误消息就目前而言，这并没有发生……而且我认为一个很好的做法是，一旦输入了正确的内容，它就会在输入字段后显示一个绿色的勾号，唉，我一直无法实现这一点 <!DOCTYPE html> <html> <head> <title>Validation</title> <scr

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

就目前而言，这并没有发生……而且我认为一个很好的做法是，一旦输入了正确的内容，它就会在输入字段后显示一个绿色的勾号，唉，我一直无法实现这一点

<!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>


验证
John Doe（2015年1月2日）
4位PIN码：

姓：
电邮：

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代码没有任何效果，因为语法不是write

您可以通过检查了解有关按名称和ID获取元素的更多信息

2）对于您的

onSubmit

函数，您不需要添加


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

这是工作代码。我对您的代码做了一些更改，并对它们进行了注释，以供参考
代码在JSFIDLE上不起作用，我不知道为什么。不过我已经在Chrome和firefox上测试过了，效果很好。希望这能解决您的问题。：）

验证
函数validate_form（）{
var valid=true；//定义有效
var myform=document.getElementById（“myFormID”）；//只定义一次myform变量，并将ID添加到HTML表单中
if（myform.elements.namedItem（“pin”）.value==“”| | myform.elements.namedItem（“pin”）.value！=“1234”）{
提醒（“请在方框中填写您的“4位PIN”）；
有效=错误；
}
if（myform.elements.namedItem（“姓氏”）.value==“”| | myform.elements.namedItem（“姓氏”）.value！=“Doe”）{
警告（“请输入正确的姓氏”）；
有效=错误；
}
var x=document.forms[“myForm”][“email”].value；
var atpos=x.indexOf（“@”）；
var dotpos=x.lastIndexOf（“.”）；
如果（atpos<1 | | dotpos=x.length）{
警报（“不是有效的电子邮件地址”）；
valid=false；//此处不要返回false
}
//警报（有效）；
return valid；//在初始化为true的末尾返回valid。
}
John Doe（2015年1月2日）
4位PIN码：

姓：

电邮：



@Teemu：实际上，这些语句在语法上是合法的，不会产生任何错误。（虽然它们毫无意义，也没有任何效果）@SLaks你是对的，它们是带有以下表达式的标签。我已经删除了我的评论。你混淆了Javascript和CSS。您需要学习如何操作DOM和处理键盘事件。我知道语法或多或少是正确的，但目前如果电子邮件地址正确，而其他两个字段不正确……不管如何，表单都将验证！谢谢你的帮助，但这仍然不能解决我的问题…我已经放弃了绿色记号的想法，因为它超出了需求。我的主要要求是，如果任何输入字段不是100%正确，那么表单就不应该验证…因为代码是，如果我在所有3个字段中都输入123，那么表单仍将验证为真实。当您在文本字段中输入内容时，表单将被验证。检查文本字段是否为空，文本字段是否有正确的文本。但您没有任何检查错误输入的功能。不要添加任何内容，点击提交按钮。您的验证函数应该可以工作您的建议使我的代码看起来更干净，也许我想要做的实际上是不可能的。1.我希望文本框只接受我指定的内容2。如果3项中的任何一项不正确，则应设置一个警告框，说明so 3。如果且仅当所有3项都正确时，该表单才应生效。这是我根据你的建议修改的代码，谢谢你的时间和帮助，我很感激。太棒了！！！我一定会研究这一点，理解我的缺点，从你的帮助中学习。
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;
            }

 <!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>