基于bootstrap表单登录（带验证码）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%

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>

<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">

<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>

</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>

巴特西

基于bootstrap表单登录（带验证码）

最新文章

热门文章