基于bootstrap表单登录（带验证码）
<%@ page contentType="text/html;charset=UTF-8" language="java" %> |
<!-- 跳转到登录页面之前的URL --> |
<% |
String redirectUrl = (String) request.getSession().getAttribute("redirectUrl"); |
String bikeNo = (String) request.getSession().getAttribute("bikeNo"); |
request.setAttribute("url", redirectUrl); |
request.setAttribute("bikeNo", bikeNo); |
%> |
<html> |
<head> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0"/> |
<title>登录</title> |
<!-- 引入 Bootstrap --> |
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet"> |
<!-- 引入自定义css --> |
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet"> |
<!-- jQuery --> |
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script> |
<!-- 包括所有已编译的插件 --> |
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script> |
</head> |
<body class="login"> |
<div class="container a "> |
<div class="row center-vertical"> |
<%--屏蔽框--%> |
<div class="hidebox" align="center"> |
<img src="${pageContext.request.contextPath}/images/Loading.gif" |
style="width: 69.6px;height: 44.8px;top:50%;left:50%;margin-top:322px;border-radius:6px;"/> |
</div> |
<div class="col-sm-4 col-sm-offset-4 "> |
<br><br><br> |
<form class="bs-example bs-example-form" role="form"> |
<div class="input-control" align="center" style="margin-bottom: 10px"> |
<img src="${pageContext.request.contextPath}/images/logo.jpg" style="width: 60px;height: 60px"/> |
<h1>租借单车</h1> |
</div> |
<div class="input-group input-group-lg"> |
<span class="input-group-addon"> |
<span class="glyphicon glyphicon-phone"></span> |
</span> |
<input type="text" class="form-control input-lg" id="userPhone" name="userPhone" |
placeholder="请输入手机号" maxlength="11"onkeyup="this.value=this.value.replace(/\D/g,'')" |
onafterpaste="this.value=this.value.replace(/\D/g,'')"> |
<span class="glyphicon form-control-feedback"></span> |
</div> |
<br> |
<div class="input-group input-group-lg"> |
<span class="input-group-addon"> |
<span class="glyphicon glyphicon-picture"></span> |
</span> |
<input type="text" name="kaptcha" class="form-control input-lg" id="kaptcha" placeholder="请输入验证码"> |
<span class="glyphicon form-control-feedback"></span> |
<span class="input-group-addon-kaptcha"> |
<img src="${pageContext.request.contextPath}/login/getkaptchaCode.do" id="kaptchaImage" |
style="cursor:pointer"> |
</span> |
</div> |
<br> |
<div class="form-group center"> |
<p align="center"> |
<button type="button" class="btn btn-lg btn-md btn-primary" id="submit">登录</button> |
</p> |
</div> |
<button type="button" id="showBox">显示</button> |
</form> |
</div> |
</div> |
</div> |
</body> |
<script> |
//更换验证码 |
$("#kaptchaImage").click(function () { |
$(this).attr('src', '${pageContext.request.contextPath}/login/getkaptchaCode.do?' + Math.floor(Math.random() * 100)); |
}); |
//校验手机号格式 |
function checkUserPhone() { |
var $userPhone = $("#userPhone"); |
var userPhone = $userPhone.val(); |
if (!userPhone) { |
addCheckError($userPhone); |
return false; |
} |
var reg = /^1[3|4|5|7|8][0-9]{9}$/; //手机号验证规则 |
if (!reg.test(userPhone)) { |
addCheckError($userPhone); |
return false; |
} |
addCheckOk($userPhone); |
return userPhone; |
} |
//校验验证码格式 |
function checkKaptcha() { |
var $kaptcha = $("#kaptcha"); |
var kaptcha = $kaptcha.val(); |
if (!kaptcha) { |
addCheckError($kaptcha); |
return false; |
} |
var regKaptcha = /^[0-9a-zA-Z]{4}$/;//验证码验证规则 |
if (!regKaptcha.test(kaptcha)) { |
addCheckError($kaptcha); |
return false; |
} |
//addCheckOk($kaptcha); |
return kaptcha; |
} |
//添加校验错误样式 |
function addCheckError($element) { |
$element.parent("div").addClass("has-error"); |
$element.next("span").addClass("glyphicon-remove-sign"); |
} |
//移除校验错误样式 |
function removeCheckError($element) { |
$element.parent("div").removeClass("has-error"); |
$element.next("span").removeClass("glyphicon-remove-sign"); |
} |
//添加校验成功样式 |
function addCheckOk($element) { |
$element.parent("div").addClass("has-success"); |
$element.next("span").addClass("glyphicon-ok-sign"); |
} |
//移除校验成功样式 |
function removeCheckOk($element) { |
$element.parent("div").removeClass("has-success"); |
$element.next("span").removeClass("glyphicon-ok-sign"); |
} |
//当输入框获得焦点时，移除成功或失败样式 |
$("#userPhone,#kaptcha").on("focus", function () { |
removeCheckError($(this)); |
removeCheckOk($(this)); |
}); |
//验证用书输入的验证码是否正确 |
/*$('#kaptcha').on("blur", function () { |
var kaptcha = checkKaptcha(); |
if (!kaptcha) { |
return false; |
} |
$.ajax({ |
type: "POST", |
url: "${pageContext.request.contextPath}/login/check.do", |
data: {"kaptcha": kaptcha}, |
dataType: "json", |
success: function (data) { |
alert(data.kaptchaFlag); |
} |
}); |
});*/ |
//登录 |
$("#submit").on("click", function () { |
showBox(); |
var userPhone = checkUserPhone(); |
if (!userPhone) { |
hideBox(); |
return false; |
} |
var kaptcha = checkKaptcha(); |
if (!kaptcha) { |
hideBox(); |
return false; |
} |
var url = "${url}"; |
if (!url) { |
window.location.href = "${pageContext.request.contextPath }/index.jsp"; |
return; |
} |
url = "${url}" + "?bikeNo=" + "${bikeNo}"; |
$.ajax({ |
type: "POST", |
url: "${pageContext.request.contextPath }/login/login.do", |
data: { |
userPhone: userPhone, |
kaptcha: kaptcha |
}, |
dataType: "json", |
success: function (data) { |
console.info("data:" + data); |
if (data.kaptchaFlag) { |
//alert("验证码正确"); |
addCheckOk($("#kaptcha")); |
if (data.userFlag) { |
window.location.href = url; |
} else { |
alert("用户不存在"); |
hideBox(); |
} |
} else { |
alert("验证码错误"); |
addCheckError($("#kaptcha")); |
hideBox(); |
} |
} |
}); |
}); |
$("#showBox").click(function () { |
showBox(); |
}); |
$("#hideBox").click(function () { |
hideBox(); |
}); |
//页面屏蔽不可点击 |
function showBox() { |
$(".hidebox").show().height($(window).height()); |
} |
//去除隐藏层和弹出层 |
function hideBox() { |
$(".hidebox").hide(); |
} |
</script> |
</html> |
浙公网安备 33010602011771号