web登录页面jquery校验的简单实现（一）

来源：互联网发布：电子白板课件制作软件编辑：程序博客网时间：2024/05/17 10:52

我们平时无论是做web开发还是移动端的app开发，都离不开登录页面。为了实现更好的用户体验，就需要添加用户名和用户密码的校验，甚至像记住密码等一些其它的功能。

**********************方式一：keyup监听键盘摁下事件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery.min.js"></script><title>Insert title here</title><style type="text/css">   .fm{margin:30px 30px}   .fz{font-size:12px;color:red;padding-left:10px}</style></head><body>   <form action="" method="" class="fm">       <p><input type="text" id="username" placeholder="请输入账号"/><span class="fz nouser">* 用户名不能为空</span></p>       <p><input type="password" id="password" placeholder="请输入密码"/><span class="fz nopwd">* 密码不能为空</span></p>       <input type="button" id="btn" value="登录"/>   </form>   <script type="text/javascript">       $("#username").keyup(function(){      if($("#username").val.length<1){      $(".nouser").show();       }else{      $(".nouser").hide();      }       });          $("#password").keyup(function(){       if($("#password").val.length<1){       $(".nopwd").show();       }else{       $(".nopwd").hide();        }       })   </script></body></html>

**********************方式二：propertychange监听对象属性值变化

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery.min.js"></script><title>input2</title><style type="text/css">   .fm{margin:30px 30px}   .fz{font-size:12px;color:red;padding-left:10px}</style></head><body>   <form action="" method="" class="fm">       <p><input type="text" id="username" placeholder="请输入账号"/><span class="fz nouser">* 用户名不能为空</span></p>       <p><input type="password" id="password" placeholder="请输入密码"/><span class="fz nopwd">* 密码不能为空</span></p>       <input type="button" id="btn" value="登录"/>   </form>   <script type="text/javascript">       $("#username").bind("input propertychange",function(){      if($("#username").val.length<1){      $(".nouser").show();       }else{      $(".nouser").hide();      }       });          $("#password").bind("input propertychange",function(){       if($("#password").val.length<1){       $(".nopwd").show();       }else{       $(".nopwd").hide();        }       })   </script></body></html>

**********************方式三：与服务器后台交互的校验

<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="js/jquery.min.js"></script><title>input3</title><style>   .info{      color:red;   }</style></head><body>    <form action="">       <label for="user">用户：</label>       <input type="text" id="username" placeholder="用户名"/>       //<label id="userInfo" class="info"></label><br><br>              <label for="password">密码：</label>       <input type="password" id="password" placeholder="密码"/>       //<label id="passwordInfo" class="info"></label><br><br>       <label id="infoLabel" class="info"></label>              <input type="button" value="登录" onclick="login()"/>    </form>            <script>var ctx;$(function(){hideAllInfo();ctx = getRootPath();//alert(path);});function getRootPath(){var strFullPath=window.document.location.href;var strPath=window.document.location.pathname;var pos=strFullPath.indexOf(strPath);var prePath=strFullPath.substring(0,pos);var postPath=strPath.substring(0,strPath.substr(1).indexOf('/')+1);return(prePath+postPath);}//表单验证function checkForm(userName, password){//验证邮箱是否为空if(userName==null || userName=="undefined" || typeof(userName)=="undefined" || userName.length==0){hideInfo("infoLabel");showInfo("infoLabel", "用户名不能为空");return false;}//验证邮箱格式var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;if(!reg.test(userName)){hideInfo("infoLabel");showInfo("infoLabel", "请输入正确邮箱格式");return false;}//验证密码是否为空if(password==null || password=="undefined" || typeof(password)=="undefined" || password.length==0){hideInfo("infoLabel");showInfo("infoLabel", "密码不能为空");return false;}return true;}//登录function login(){hideAllInfo();var userName = $("#username").val();var password = $("#password").val();if(checkForm(userName, password)){$.post(ctx+"************",*****************{"userName":userName, "password":password, "randMath":Math.random()*Math.random()},function(result){if(result.status == "0"){window.location.href = "**********************";}else{showInfo("infoLabel", result.msg);}},"json");}}//显示提示信息function showInfo(id, html){$("#"+id).html("*"+html);$("#"+id).css("display","block");}//隐藏提示信息function hideInfo(id){$("#"+id).html("");$("#"+id).css("display","none");}//隐藏所有提示信息function hideAllInfo(){hideInfo("infoLabel");hideInfo("emailInfoLabel");hideInfo("passwordInfoLabel");}</script></body></html>

0 0