<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/reset.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/login.css">
<script src="${pageContext.request.contextPath}/js/lib/jquery-1.9.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/lib/AntMove.js"></script>
<script>
$(function(){
$("#btn").click(function(){
var $_login = $("#loginForm").get(0);
var $_tip = $("#tip").get(0);
/*
*/
var userName = $(".userName");
var password = $(".password");
var tip = "";
if( $.trim( userName.val() ) == "" ){
tip = "帐号不能为空";
userName.focus();
}else if( !/^\w{5,20}$/.test( userName.val() ) ){
tip = "帐号长度必须5-20之间";
userName.focus();
}else if($.trim( password.val() ) == ""){
tip = "密码不能为空";
password.focus();
}
if(tip != ""){ //如果tip有值提示错误信息
alert(tip);
}else{ //发送ajax请求
$.ajax({
url:"${pageContext.request.contextPath}/loginAjax.action",//ajax的请求地址
type:"post",//请求方式
dataType:"json",//返回数据为json
data:$("#form").serialize(), //$("#loginForm").serialize() 序列化
async:true, //是否异步 true为异步,false为同步
success:function(data){ //异步成功回调
console.log(data);
if(data.success == "1"){
alert(data.tip);
window.location = "${pageContext.request.contextPath}/index.action";
}else if(data.success == "0"){
antMove($_login,{top:60},1000,"elasticOut",function(){
$(".tip").css("display","block");
antMove($_tip,{top:0},1000,"elasticOut");});
}
},
error:function(msg){ //ajax失败回调
alert("ajax发送失败:"+msg);
}
});
}
});
});
</script>
</head>
<body>
<div id="login">
<!--
<div class="logo">
<a href=""><img src="${pageContext.request.contextPath}/images/logo.png"></a>
</div>
-->
<div class="tipParent">
<div id="tip" class="tip">
<strong>错误 : </strong>
<span>无效用户名。</span>
<a href="">忘记密码?</a>
</div>
</div>
<div class="formParent">
<div id="loginForm" class="loginForm">
<form id="form">
<div class="loginName">
<label>用户名</label>
<input type="text" value="admin" class="userName" name="userName">
</div>
<div class="loginPassword">
<label>密码</label>
<input type="text" class="password" name="password">
</div>
<div class="loginBtn">
<input type="checkbox">
<span>记住我的登录信息</span>
<input type="button" value="" class="btn" id="btn">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
时间： 2024-08-07 04:02:19