jQuery登录验证
[#ftl]
[#include "/_inc/inc.ftl"]
<html>
<head>
[#include "/_inc/meta.ftl"]
[#include "/_inc/link.ftl"]
[#include "/_inc/css.ftl"]
<link rel="stylesheet" href="${ctxPath}/resources/assets/css/login.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style>
.login_panel_01{ background-color: #FFF; height: 316px;}
.panel_01{margin-bottom: 20px;background-color:#F2F2F4;border: 1px solid transparent;border-radius: 4px;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);}
</style>
<body>
<!--head start-->
<div class="container-fluid">
<div class="row" style="height:150px;">
</div>
<div class="row">
<div class="col-xs-1 col-xs-1" style="background-image: url(${ctxPath}/resources/assets/img/line.png); height: 394px;"></div>
<div class="col-xs-5 col-xs-5" style="background-image: url(${ctxPath}/resources/assets/img/login_big.png); height: 394px;">
<div id="carousel-banner" class="carousel slide" data-ride="carousel" style="height:394px;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-banner" data-slide-to="0" class=""></li>
<li class="active" data-target="#carousel-banner" data-slide-to="1"></li>
<li data-target="#carousel-banner" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item">
<img src="${ctxPath}/resources/assets/img/l_1.png" style="height:394px;">
</div>
<div class="item active">
<img src="${ctxPath}/resources/assets/img/l_2.png" style="height:394px;">
</div>
<div class="item">
<img src="${ctxPath}/resources/assets/img/l_3.png" style="height:394px;">
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row login_title" style="width:auto">
<img src="${ctxPath}/resources/assets/img/logo.png" style="float:left">
<span style="float:left; display:block; padding-top:30px" class="login_font">亚市互联网+汽车平台后台管理</span>
</div>
<!--head end-->
<form action="${ctxPath}/auth/login" method="post" onSubmit="return checkAll(this)">
<div class="row login_panel_01">
<div class="panel_01 panel-default">
<div class="panel-body">
<span id="warn1" class="" style="color:red;"></span>
<span id="warn1"class="" style="color:red;"></span>
<span id="msg">${msg ? default("")}</span>
[#if flag?? && flag=="0"]
<div class="alert alert-warning" role="alert">
<span class="glyphicon glyphicon-warning-sign" style="color:green;"></span>
<span >修改成功，请重新登录</span>
</div>
[/#if]
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input id="username" name="username" type="text" class="form-control" placeholder="用户名" onblur="javascript:checkName(this)" value="${username? default("")}">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" id="password" name="password" class="form-control" placeholder="密码" onblur="javascript:checkPassword(this)" >
</div>
<br>
<button type="submit" class="col-xs-12 btn btn-lg btn-success btn-block" onsubmit="javascript:return checkAll();">登 录</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-xs-2 col-xs-2" style="background-image: url(${ctxPath}/resources/assets/img/line.png); height: 394px;"></div>
</div>
<div class="row">
</div>
</div>
<script type="text/javascript">
$(function() {
var msgVal=$("#msg").text();
if(msgVal=!null&& msgVal!=""){
$("#warn").addClass("alert alert-warning");
$("#warn1").addClass("glyphicon glyphicon-warning-sign");
}
});
function checkName(obj){
var nameVal=$.trim($(obj).val());
if(nameVal==null || nameVal==""){
$("#msg").text("用户名不允许为空");
$("#warn").addClass("alert alert-warning");
$("#warn1").addClass("glyphicon glyphicon-warning-sign");
}else{
$("#msg").text("");
$("#warn").removeClass();
$("#warn1").removeClass();
}
}
function checkPassword(obj){
var passwordVal=$.trim($(obj).val());
if(passwordVal==null || passwordVal==""){
$("#msg").text("密码不允许为空");
$("#warn").addClass("alert alert-warning");
$("#warn1").addClass("glyphicon glyphicon-warning-sign");
}else{
$("#msg").text("");
$("#warn").removeClass();
$("#warn1").removeClass();
}
}
function checkAll(){
var result=true;
var username=$("#username").val();
username=username.trim();
var password=$("#password").val();
password=password.trim();
if(username==null || username==""){
$("#msg").text("用户名不允许为空");
$("#warn").addClass("alert alert-warning");
$("#warn1").addClass("glyphicon glyphicon-warning-sign");
result=false;
return result;
}
if(password==null || password==""){
$("#msg").text("密码不允许为空");
$("#warn").addClass("alert alert-warning");
$("#warn1").addClass("glyphicon glyphicon-warning-sign");
result=false;
return result;
}
$("#msg").text("");
$("#warn").removeClass();
$("#warn1").removeClass();
return result;
}
function trim(str){ //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年11月16日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读