如何使用html表单验证来显示图像

Question

我创建了一个HTML表单，其中有许多不同的文本框。我想要做的是创建一个javascript脚本，它将在没有文本的框旁边显示小图像。这是我想要做的一个例子：

目前我已经创建了以下脚本来验证我想要的表单，但是它只显示一个弹出框，因为我不知道如何显示图像/文本。这是我的代码：

    <script type="text/javascript">
    function validateForm()
    {
        var x=document.forms["email_form"]["name"].value;
        if (x==null || x=="")
        {
            alert("Please enter your name in the box provided.");
            return false;
        }

        var x=document.forms["email_form"]["email"].value;
        if (x==null || x=="")
        {
            alert("Please enter your e-mail address in the box provided.");
            return false;
        }

        var x=document.forms["message-title"]["name"].value;
        if (x==null || x=="")
        {
            alert("Please enter a message title in the box provided.");
            return false;
        }

        var x=document.forms["email_form"]["message"].value;
        if (x==null || x=="")
        {
            alert("Please enter your message in the box provided.");
            return false;
        }
    }
    </script>

请有人指出我正确的方向吗？

Answer 1

您可以在输入元素旁边放置错误图像元素，但将display属性隐藏在css中。您可以为链接到其输入元素的每个错误图像设置一个id。例如对于电子邮件输入，除了它之外还有img元素。有一个像这样的初始CSS - ＆gt;

#email_form img{
    display: none;
}

然后在你的javascript中，只显示隐藏的图片 -

    var x=document.forms["email_form"]["email"].value;
    if (x==null || x=="")
    {
        var error_image = document.getElementById('error_email');
        error_image.style.display = 'inline';
        alert("Please enter your e-mail address in the box provided.");
        return false;
    }

Answer 2

在你css中定义一个类

.validateimage
{
 display:none;
}

并将该类分配给所有图像标记，例如

<img class="validateimage" id="image1">
.
.
.

然后

 <script type="text/javascript">
        function validateForm()
        {
            var x=document.forms["email_form"]["name"].value;
            if (x==null || x=="")
            {
                document.getElementById('image1').style.display='block';
                return false;
            }

            var x=document.forms["email_form"]["email"].value;
            if (x==null || x=="")
            {
                document.getElementById('image2').style.display='block';

                return false;
            }

            var x=document.forms["message-title"]["name"].value;
            if (x==null || x=="")
            {
                document.getElementById('image3').style.display='block';
                return false;
            }

            var x=document.forms["email_form"]["message"].value;
            if (x==null || x=="")
            {
                document.getElementById('image4').style.display='block';
                return false;
            }
        }
        </script>