Javascript - 尝试使用 innerHTML 但不会仅在瞬间更改文本

Question

我是 Javascript 的新手，只想对下面表单中的用户名文本框做一个简单的验证。

如果用户名文本框为空，我希望它在单击提交按钮时在文本框旁边的范围内打印出“空”。我可以使用下面的代码让它做到这一点，但文本只显示一瞬间然后消失。关于如何将文本保留在那里的任何想法？

<form>
    Username: <input type="text" id="username"><span id="val"></span>
    <input type="submit" onclick="check();">
</form>

<script type="text/javascript">

    function check() {
        var username = document.getElementById("username").value;

        if(username == ""){
            document.getElementById("val").innerHTML = "Empty";
        } else {
            document.getElementById("val").innerHTML = "Full";

        }
    }



</script>

Answer 1

文本没有保留在那里的原因是，一旦您单击按钮，它就会运行 onclick 方法，但仍会提交表单。这几乎重置了表格。如果您不希望提交和重置表单，那么您也必须停止提交表单。如果你添加一个“return false;”行到 javascript 方法，它应该停止提交表单并保留文本。

<form>
    Username: <input type="text" id="username"><span id="val"></span>
    <input type="submit" onclick="return check();">
</form>

<script type="text/javascript">

    function check() {
        var username = document.getElementById("username").value;

        if(username == ""){
            document.getElementById("val").innerHTML = "Empty";
        } else {
            document.getElementById("val").innerHTML = "Full";

        }
        return false;
    }
</script>