基于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> |
基于bootstrap表单登录（带验证码）的更多相关文章
- 基于Bootstrap表单验证
基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...
- yii2.0表单自带验证码
Yii2.0的自带的验证依赖于GD2或者ImageMagick扩展. 使用步骤如下: 第一步,控制器: 在任意controller里面重写方法
- SpringSecurity实战记录（一）开胃菜：基于内存的表单登录小Demo搭建
Ps:本次搭建基于Maven管理工具的版本,Gradle版本可以通过gradle init --type pom命令在pom.xml路径下转化为Gradle版本(如下图) (1)构建工具IDEA In ...
- bootstrap表单带验证
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- WEB安全讨论-表单登录是先验证验证码还是密码
表单登录是先验证验证码还是密码? 肯定是验证码呀!!!这是毋庸置疑的.但是发现有人会验证密码,感觉先验证密码和先验证验证码是一个概念是一样的.但是其实是完全不一样的.下面我们来一起详细的剖析一下: 消 ...
- SpringSecurity 默认表单登录页展示流程源码
SpringSecurity 默认表单登录页展示流程源码 本篇主要讲解 SpringSecurity提供的默认表单登录页 它是如何展示的的流程, 涉及 1.FilterSecurityIntercep ...
- 10款精美的HTML5表单登录联系和搜索表单
1.HTML5/CSS3仿Facebook登录表单 这款纯CSS3发光登录表单更是绚丽多彩.今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Faceboo ...
- Spring Security 表单登录
1. 简介 本文将重点介绍使用Spring Security登录. 本文将构建在之前简单的Spring MVC示例之上,因为这是设置Web应用程序和登录机制的必不可少的. 2. Maven 依赖 要将 ...
- SpringBoot集成Spring Security（4）——自定义表单登录
通过前面三篇文章,你应该大致了解了 Spring Security 的流程.你应该发现了,真正的 login 请求是由 Spring Security 帮我们处理的,那么我们如何实现自定义表单登录呢, ...
随机推荐
- [cb]Unity 关卡编辑器 开发
关卡编辑器 关卡编辑器插件开发日记 1. Apply to Prefab [替换Prefab] if (GUILayout.Button("Apply Collider To Prefab& ...
- 【PAT】B1036 跟奥巴马一起编程(15)（15 分
#include<stdio.h> int main() { int row,col; char c; scanf("%d %c",&col,&c); ...
- 使用sstream来进行类型转换
在某种情况下,我们不得不进行整型等数据类型与字符串类型的转换,比如,将“1234”转换为整数,常规的我们可以使用atoi函数来进行转换,或者是写一个循环来做转换,我们在这里也可以使用sstream类来 ...
- ABAP CDS 替换对象（Replacement Objects）引起的数据错误
最近遇到了一个诡异的问题:从CDS视图中取得的数据,和从透明表中取得的数据,会有不同的值.在这里记录下问题的表现和解决方案,以供参考. 系统版本:S/4HANA OP1610 涉及表:MCHB 本文链 ...
- 命令行方式安装Pycharm
sudo apt install snapd snapd-xdg-open snap refresh sudo snap install pycharm-professional --classic
- golang的reflection（转）
作者:BGbiao 链接:https://www.jianshu.com/p/42c19f88df6c 來源:简书 反射reflection 可以大大提高程序的灵活性,使得interface{}有更大 ...
- 【Ansible 文档】提示、推荐、注意事项
1. 查看 详细 信息 如果你想要查看成功模块和不成功的详细输出,使用 --verbose 标识 2. 检查 playbook 的语法 使用 ansible-playbook 的 --syntax-c ...
- Django之form表单认证
Model常用操作: - 参数:filter 三种传参方式 - all(得到的是列表),values(字典),values_list(元祖) [obj(id,name,pwd,email),obj(i ...
- EXCEL 偶数、奇数行分开求和公式
例举 : A1行是 123 A2行是 321 A3行是 456 A4行是 789我是加的是A1+A3得出的和还有加的是A2+A4得出的和因为要A1+A3一直加到A601,我用很笨的方式像这样子一个个加 ...
- 图像跟踪(1) CSK
依赖OPENCV 1功能 鼠标选取目标 S按键取消重新选择 共享内存目标框 中心 X Y 边框W H //////////////////////////////////////////////// ...