如何隐藏/删除错误信息后显示它给用户后几秒钟在javascript

How to hide/remove a error message after showing it to user after few second in javascript

本文关键字：给用户 javascript 几秒 信息 隐藏 何隐藏 删除 错误 显示      更新时间：2023-09-26

我正在编写一个脚本，将验证用户名。我可以在用户名上打勾。如果用户名不符合标准，那么我抛出错误。

<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方法来删除错误消息。有人建议我有什么可能的选择，我必须得到想要的效果

  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。如果你不需要淡出动画效果，你可以删除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); 
               }
            }

根据这里的代码判断:

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

你的setTimeout函数没有调用正确的div来隐藏。它应该看起来像这样:

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

我也没有看到这在你的脚本中实现，所以添加setTimeout函数调用后，你改变innerHTML。

相关文章：