关于JavaScript设置Label值，提交后Label内容闪现问题

在实验JavaScript对输入内容进行验证的过程中，若输入有不满足条件的地方，则对应的在输入框后面显示提示信息，提示信息控件使用Label。html代码如下

 <form  runat="server">
    <div>
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input  type="text" />
                </td>
                <td>
                    <label ></label>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input  type="password" />
                </td>
                <td>
                    <label ></label>
                </td>
            </tr>
            <tr>
                <td>Email：</td>
                <td>
                    <input  type="text" />
                </td>
                <td>
                    <label ></label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit"  value="提交"/>
                </td>
            </tr>
        </table>
    </div>
    </form>

JavaScript代码如下：

<script type="text/javascript">
    window.onload = init;

    function init() {
        document.getElementById("btn_Submit").onclick = btnSubmit;
    }

    function btnSubmit() {
        var cname = document.getElementById("cName").value;
        var cpassword = document.getElementById("cPassword").value;
        var cemail = document.getElementById("cEmail").value;

        //用户名验证
        if (cname == "" || cname == null) {
            document.getElementById("eName").innerHTML = "用户名不能为空";
        }
        else {
            if (cname.length < 3) {
                document.getElementById("eName").innerHTML = "用户名长度至少为3";
            }
            else {
                document.getElementById("eName").style.visibility = "hidden";
            }
        }

        //密码验证
        if (cpassword == "" || cpassword == null) {
            document.getElementById("ePassword").innerHTML = "密码不能为空";
        }
        else {
            if (cpassword.length < 6) {document.getElementById("ePassword").innerHTML = "密码至少为6位";
            }
            else {document.getElementById("ePassword").style.visibility = "hidden";
            }
        }

        //邮箱验证
        if (cemail == "" || cemail == null) {
            document.getElementById("eEmail").innerHTML = "邮箱地址不能为空";
        }
        else {
            var atPos = cemail.indexOf("@", 1);
            if (atPos == -1) {
                document.getElementById("eEmail").innerHTML = "邮箱地址错误，请重新填写";
            }
            else {
                document.getElementById("eEmail").style.visibility = "hidden";
            }
        }
    }
</script>

此时，在未输入任何字符情况下，点击“提交”按钮后，提示信息全部显示出来，闪一下又消失不见。

出现这种情况的原因是：

在脚本验证不通过的情况下，应该阻止Form表单的提交，若没有阻止，则脚本执行完成，页面出现提示信息，然后页面被提交，提交后页面刷新，提示信息消失。

因此在表单验证通不过的地方添加“return false;”，则不会出现这种情况。

此时JavaScript代码如下：

<script type="text/javascript">
    window.onload = init;

    function init() {
        document.getElementById("btn_Submit").onclick = btnSubmit;
    }

    function btnSubmit() {
        var cname = document.getElementById("cName").value;
        var cpassword = document.getElementById("cPassword").value;
        var cemail = document.getElementById("cEmail").value;

        //用户名验证
        if (cname == "" || cname == null) {
            document.getElementById("eName").innerHTML = "用户名不能为空";
            return false;
        }
        else {
            if (cname.length < 3) {
                document.getElementById("eName").innerHTML = "用户名长度至少为3";
                return false;
            }
            else {
                document.getElementById("eName").style.visibility = "hidden";
            }
        }

        //密码验证
        if (cpassword == "" || cpassword == null) {
            document.getElementById("ePassword").innerHTML = "密码不能为空";
            return false;
        }
        else {
            if (cpassword.length < 6) {
                document.getElementById("ePassword").innerHTML = "密码至少为6位";
                return false;
            }
            else {
                document.getElementById("ePassword").style.visibility = "hidden";
            }
        }

        //邮箱验证
        if (cemail == "" || cemail == null) {
            document.getElementById("eEmail").innerHTML = "邮箱地址不能为空";
            return false;
        }
        else {
            var atPos = cemail.indexOf("@", 1);
            if (atPos == -1) {
                document.getElementById("eEmail").innerHTML = "邮箱地址错误，请重新填写";
                return false;
            }
            else {
                document.getElementById("eEmail").style.visibility = "hidden";
            }
        }
    }
</script>

此时，提示信息会按顺序显示，即，首先验证用户名，当前只会提示用户名的错误，其他错误提示则会在用户名输入符合要求之后。

接下来，看着代码太长了些，于是想着把各自的验证提取出来为独立函数，也方便验证的补充及修整。独立出来以后的代码如下：

<script type="text/javascript">
    window.onload = init;

    function init() {
        document.getElementById("btn_Submit").onclick = btnSubmit;
    }

    function btnSubmit() {
        var cname = document.getElementById("cName").value;
        var cpassword = document.getElementById("cPassword").value;
        var cemail = document.getElementById("cEmail").value;

        validName(cname);
        validPassword(cpassword);
        validEmail(cemail);
    }
    //用户名验证
    function validName(cname) {
        if (cname == "" || cname == null) {
            document.getElementById("eName").innerHTML = "用户名不能为空";
            return false;
        }
        else {
            if (cname.length < 3) {
                document.getElementById("eName").innerHTML = "用户名长度至少为3";
                return false;
            }
            else {
                document.getElementById("eName").style.visibility = "hidden";
            }
        }
    }
    //密码验证
    function validPassword(cpassword) {
        if (cpassword == "" || cpassword == null) {
            document.getElementById("ePassword").innerHTML = "密码不能为空";
            return false;
        }
        else {
            if (cpassword.length < 6) {
                document.getElementById("ePassword").innerHTML = "密码至少为6位";
                return false;
            }
            else {
                document.getElementById("ePassword").style.visibility = "hidden";
            }
        }
    }
    //邮箱验证
    function validEmail(cemail) {
        if (cemail == "" || cemail == null) {
            document.getElementById("eEmail").innerHTML = "邮箱地址不能为空";
            return false;
        }
        else {
            var atPos = cemail.indexOf("@", 1);
            if (atPos == -1) {
                document.getElementById("eEmail").innerHTML = "邮箱地址错误，请重新填写";
                return false;
            }
            else {
                document.getElementById("eEmail").style.visibility = "hidden";
            }
        }
    }
</script>

这时候发现，验证提示信息又开始闪现了，想着之前说的是因为没有阻止表单提交的原因，于是在调用验证函数的时候判断是否return false。如下：

 if (!validName(cname) && !validPassword(cpassword) && !validEmail(cemail)) {
            return false;
        }

此时，所有提示信息会同时显示，在当前某个输入已经符合要求后，该提示不再显示。

至此，当前的闪现问题算是解决。