在实验JavaScript对输入内容进行验证的过程中,若输入有不满足条件的地方,则对应的在输入框后面显示提示信息,提示信息控件使用Label。html代码如下
<form id="form1" runat="server"> <div> <table> <tr> <td>用户名:</td> <td> <input id="cName" type="text" /> </td> <td> <label id="eName"></label> </td> </tr> <tr> <td>密码:</td> <td> <input id="cPassword" type="password" /> </td> <td> <label id="ePassword"></label> </td> </tr> <tr> <td>Email:</td> <td> <input id="cEmail" type="text" /> </td> <td> <label id="eEmail"></label> </td> </tr> <tr> <td> <input type="submit" id="btn_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; }
此时,所有提示信息会同时显示,在当前某个输入已经符合要求后,该提示不再显示。
至此,当前的闪现问题算是解决。