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

最新推荐文章于 2022-11-14 23:31:23 发布

FerrymanJACK

最新推荐文章于 2022-11-14 23:31:23 发布

阅读量4.9k

点赞数 2

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_34209528/article/details/71082001

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们平时无论是做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="登录" οnclick="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>

FerrymanJACK

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web登录页面jquery校验的简单实现（一）

我们平时无论是做web开发还是移动端的app开发，都离不开登录页面。为了实现更好的用户体验，就需要添加用户名和用户密码的校验，甚至像记住密码等一些其它的功能。**********************方式一：keyup监听键盘摁下事件Insert title here .fm{margin:30px 30px} .fz{font-size:12px;
复制链接

扫一扫