JS--功能合集--登录及时格式验证

最新推荐文章于 2024-07-12 16:27:40 发布

yuanzhipeng100511302

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量87

点赞数

分类专栏： JavaScript 文章标签： javascript 功能合集 ViewUI

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

    总结一个通用的登录验证,并且是及时的哟！之前在网上找的很多都不是及时的,那种方式的验证已经不能适用于现在的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" οnlοad="onload();">
   <form action="jsp/login_ctrl.jsp" method="post" name="form_login" >

        <font color="white">账号:</font>
        <input type="text" title="账号"name="username"οnchange="checkusername();"

οnblur="checkusername();"/>
        <!--onchange事件和onblur事件都需要
           onchange--当目标内容发生改变时触发,也就是你填东西后将鼠标移开是触发
           onblur---是当鼠标焦点移开是触发,也就是即使你什么都不填只是点了一下,然后移开鼠标就会触发事件，

因此它俩的结合体验才比较好 -->

        <span id="username_info"></span>
         

        <font color="white">密码:</font>
        <input type="password" title="密码" name="upwd" οnchange="checkupwd();"

οnblur="checkupwd();" />
         <span id="upwd_info"></span>
         
    </form>
</body>

注：该验证在不触发事件时如果提交是会提交过去的,对于这个不足还希望哪位大神给指导指导啊~不盛感激！！！想达到提交就是有数据的效果,然后再用Ajax进行验证,那就完美不少了~~

yuanzhipeng100511302

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS--功能合集--登录及时格式验证

总结一个通用的登录验证,并且是及时的哟！之前在网上找的很多都不是及时的,那种方式的验证已经不能适用于现在的Web了~~~ -------------------------------Login验证------------------------------ 验证：用户名 username 密码 upwd ---------------------------...
复制链接

扫一扫