在javascript中几秒钟后向用户显示错误消息后如何隐藏/删除错误消息

Question

我正在编写一个脚本来验证用户名。 我可以检查用户名。 如果用户名不符合条件，则抛出错误。

<script>
    //<![CDATA[
    function visitPage() {

        if (validateUsername()) {
            var div = document.getElementById("totalpricecheck");
            var spans = div.getElementsByTagName("span");

            var totalprice = spans[3].innerHTML;
            var name = document.getElementById("name").value;
            alert(name);


        }


    }

    function validateUsername(fld) {
        var fld = document.getElementById("name").value;
        var error = "";
        var illegalChars = /\W/; // allow letters, numbers, and underscores

        if (fld.value == "") {
            //fld.style.background = 'Yellow';
            error = "You didn't enter a username.\n";
            document.getElementById("nmessage").innerHTML = "You didn't enter a username.\n";
            // $("#nmessage").fadeOut(3000);
            // alert(error);
            return false;

        } else if ((fld.length < 5) || (fld.length > 50)) {
            //fld.style.background = 'Yellow';
            error = "The username is the wrong length.\n";
            document.getElementById("nmessage").innerHTML = "OOps!! The username is too short \n";
            // alert(error);
            return false;

        } else if (illegalChars.test(fld.value)) {
            //fld.style.background = 'Yellow';
            document.getElementById("nmessage").innerHTML = "The username contains Unsupported characters.\n";
            error = "The username contains Unsupported characters.\n";
            // alert(error);
            return false;

        } else {
            // fld.style.background = 'White';
        }
        return true;
    }
    return false;


    }

    // ]]>
</script>

我试图使用淡入淡出效果隐藏此错误，如几秒钟后在“ 隐藏div”中给出的

setTimeout(function() {
    $('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds

但没有得到如何在JavaScript中使用jQuery方法删除错误消息。 有人建议我要达到预期效果，有什么可能的选择。

Answer 1

根据您的代码判断：

document.getElementById("nmessage").innerHTML ="The username contains Unsupported characters.\n";

您的setTimeout函数未调用正确的div隐藏。 它看起来应该像这样：

setTimeout(function() {
    $('#nmessage').fadeOut('fast');
}, 1000); // <-- time in milliseconds

我也完全没有在脚本中实现此功能，因此在更改innerHTML之后添加setTimeout函数调用。

Answer 2

1. 正如另一篇文章中提到的@iFTrue一样，必须提供正确的div ID。
2. 正如@chitrang在评论中提到的，如果尚未完成，则jQuery库必须包含在页面中。

要从CDN包含jQuery，请使用以下代码。 将其粘贴到head标签中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

您应该在visitPage（）中设置计时器

function visitPage() {
               if(validateUsername()) {
                      var div = document.getElementById("totalpricecheck");
                      var spans=div.getElementsByTagName("span");

                      var totalprice=spans[3].innerHTML;
                      var name = document.getElementById("name").value;
                      alert(name);      
               }
               else {
                    // show error message 
                    $('#nmessage').show();

                    // hide error message after 3 sec 
                    setTimeout(function() {
                       $('#nmessage').fadeOut('fast');
                    }, 3000); 
               }
            }

更新资料

我看到您仅使用jQuery来隐藏和显示div。 如果不需要fadOut动画效果，则可以删除jQuery库并使用以下代码。

function visitPage() {
               if(validateUsername()) {
                      var div = document.getElementById("totalpricecheck");
                      var spans=div.getElementsByTagName("span");

                      var totalprice=spans[3].innerHTML;
                      var name = document.getElementById("name").value;
                      alert(name);      
               }
               else {
                    // show error message 
                    document.getElementById("nmessage").style.display = 'block';
                    // hide error message after 3 sec 
                    setTimeout(function() {
                        document.getElementById("nmessage").style.display = 'none';
                    }, 3000); 
               }
            }