JS-效能合集-登录及时格式验证
日期：2014-05-16 浏览次数：20308 次
??? 总结一个通用的登录验证,并且是及时的哟！之前在网上找的很多都不是及时的,那种方式的验证已经不能适用于现在的Web了~~~
-------------------------------Login验证------------------------------
验证：
????? 用户名 username
????? 密码?? upwd
-------------------------------login.jsp------------------------------
<script>
//及时验证-验证账号
function checkusername()
{
?? //得到表单中的用户名
?? var username = document.getElementById("username").value;
?? var reg=/^[a-zA-Z0-9_]+$/; //正则表达式,根据实际要求更改
?? //格式不符提示
?? if(username .length !=6||!reg.test(username)||username ==null||username.length==0)
?? {
?????? document.getElementById("username_info").innerHTML = "<font size=2 color=red>账号格式错误！
?????? 6位数字、字母组合</font>";
??? return false;
?? }
?? else{??
????? document.getElementById("username _info").innerHTML = "<font size=2 color=grey>（6位数字、字?
??????? 母组合）</font>";
??? ?return true;
??? }
}
//及时验证-验证密码
function checkupwd()
{
?? //得到表单中的密码
?? var upwd = document.getElementById("upwd").value;
?? //格式不符提示
?? if(upwd.length <6||upwd.length>8||upwd==null||upwd.length==0)
?? {
?????? document.getElementById("upwd_info").innerHTML = "<font size=2 color=red>密码格式错误！6~8??
???????? 位,数?字字母组合</font>";
??????? return false;
?? }
?? else{
?????? document.getElementById("upwd_info").innerHTML = "<font size=2 color=grey>（6~8位数字、字母
??????? 组合）</font>";
??????? return true;
???? }
??
}
//页面加载时输入框后的说明
function onload(){
?????????? document.getElementById("username _info").innerHTML = "<font size=2 color=grey>（6位数字、
??????????? 字母组合）</font>";
??????????? document.getElementById("upwd_info").innerHTML = "<font size=2 color=grey>（6~8位数字、
????????????字母组合）</font>";
}
</script>
<body id="login" onload="onload();">
?? <form action="jsp/login_ctrl.jsp" method="post" name="form_login" >
??????? <font color="white">账号:</font>
??????? <input? type="text" title="账号"name="username"onchange="checkusername();"?
???????????onblur="checkusername();"/>
??????? <!--onchange事件和onblur事件都需要
?????????? onchange--当目标内容发生改变时触发,也就是你填东西后将鼠标移开是触发
?????????? onblur---是当鼠标焦点移开是触发,也就是即使你什么都不填只是点了一下,然后移开鼠标就会触发事件，
????????????????????????? 因此它俩的结合体验才比较好 -->
??????? <span id="username_info"></span>
???????? <!--当有错误信息时,在此span中显示提示信息-->
??????? <font color="white">密码:</font>
??????? <input? type="password" title="密码" name="upwd" onchange="checkupwd();"
????????? ?onblur="checkupwd();" />?
?????????<span id="upwd_info"></span>?
?????????<!--当有错误信息时,在此span中显示提示信息-->
??? </form>
</body>
注：该验证在不触发事件时如果提交是会提交过去的,对于这个不足还希望哪位大神给指导指导啊~不盛感激！！！想达到提交就是有数据的效果,然后再用Ajax进行验证,那就完美不少了~~
?
