您的位置: 首页  >  IT文章  >  jQuery兑现用户登录的异步刷新

jQuery兑现用户登录的异步刷新

分类: IT文章 • 2022-08-27 19:47:48
jQuery实现用户登录的异步刷新
没事用SSH搞个OA练练手  顺便搞了下异步刷新
index.jsp:
<!--author jeedroid-->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>WebOa办公自动化系统</title>
	<link rel="stylesheet" type="text/css" href="css/mycss.css">
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="js/index_deal.js"></script>
	<script type="text/javascript">
	//刷新页面 刷新页面后清空表单数据
	function fresh()
	{
		
		document.getElementById("password_id").value="";
		document.getElementById("verify_id").value="";
	}
	</script>
  </style>
  </head>
  
  <body onUnload="fresh()">
  <table width="80%" border="0" align="center">
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="right" valign="bottom" class="tdclass">
      <div id="apDiv1">
      用户名:<input type="text" name="username" id="username_id" class="input_class"/><div id="username_message"></div>
      <br/>
      密<font face="宋体">&nbsp;&nbsp;</font>码:<input type="password" name="password"  id="password_id" class="input_class"/><div id="password_message"></div>
      <br/>
      验证码:<input name="verify"  id="verify_id"  class="input_class" type="text" size="4" maxlength="4"/><div id="verify_message"></div>
      <br/>
      <input type="button" id="submit_id"  value="登录"/>
      <input type="reset"  id="reset_id" value="重置"/>
      </div></td>
    </tr>
  </table>
  </body>
</html>

fresh()函数用来当页面被刷新时使用 将密码和验证码清空
index_deal.js:
// JavaScript Document
$(function(){
$("#username_id").select();
$(this).removeClass("input_class");
$("#submit_id").click(function(){
var username=$("#username_id").val();
var password=$("#password_id").val();
var verify=$("#verify_id").val();
if(username=="")
	{
	//显示提示信息
	$("#username_message").html("<font color='red'>用户名不能为空</font>");
	return;
	}
	else if(password=="")
	{
	$("#password_message").html("<font color='red'>密码不能为空</font>");
	return;
	}
	else if(verify=="")
	{
	$("#verify_message").html("<font color='red'>请输入验证码</font>");
	return;
	}
});

$("#username_id,#password_id,#verify_id").keyup(function(){
var nodeval=$(this).val();
if(nodeval=="")
{
$(this).addClass("input_class");
}
else
{
$(this).removeClass("input_class");
//这是当表单值为空时点击登录的话会显示用户名不存在 当输入值之后这个提示信息会消失
if($(this).attr("id")=="username_id")
{
$("#username_message").html("");
}
else if($(this).attr("id")=="password_id")
{
$("#password_message").html("");
}
else if($(this).attr("id")==$("verify_id"))
{
	$("#verify_message").html("");
}

}
});

});

页面加载完成首先执行一下$(this).removeClass("input_class");是因为用户名填写好后刷新的话页面上依旧有红色提示框但是文本框中还有内容 别的就不上了 jQuery其实挺简单的 无意间看了一点儿就大概知道怎么玩儿了  所以就搞了一下  呵呵jQuery兑现用户登录的异步刷新

相关推荐