基于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 帮我们处理的,那么我们如何实现自定义表单登录呢, ...
随机推荐
- Nginx：413 Request Entity Too Large
现象:在 Post 文件的时候遇到413 错误 :Request Entity Too Large: 原因:Nginx 限制了上传文件的大小,需在Nginx中修改/增加允许的最大文件大小: 操作:编辑 ...
- Centos7下crontab+shell脚本定期自动删除文件
问题描述: 最近有个需求,就是rsync每次同步的数据量很多,但是需要保留的数据库bak文件 保留7天就够了,所以需要自动清理文件夹内的bak文件 解决方案: 利用shell脚本来定期删除文件夹内的任 ...
- linux之在当前目录下按照文件大小进行排序的三种方法
当前目录下按照文件大小排序 [root@test23 script]# ls -lSh 总用量 44K -rw-r--r-- 1 root root 2.4K 12月 8 17:24 test.con ...
- mysql中左连接后，最终的记录数大于左边表的记录分析
如果B表符合条件的记录数大于1条,就会出现1:n的情况,这样left join后的结果,记录数会多于A表的记录数. 例如:member与member_login_log表的结构如下,member记录会 ...
- 转://点评Oracle11g新特性之动态变量窥视
1. 11g之前的绑定变量窥视 我们都知道,为了可以让SQL语句共享运行计划,oracle始终都是强调在进行应用系统的设计时,必须使用绑定变量,也就是用一个变量来取代原来出如今SQL语句里的字面值.比 ...
- PHP开发小技巧②—实现二维数组根据key进行排序
在PHP中内置了很多对数组进行处理的函数,有很多时候我们直接使用其内置函数就能达到我们的需求,得到我们所想要的结果:但是,有的时候我们却不能通过使用内置函数实现我们的要求,这就需要我们自己去编写算法来 ...
- redis类与用法
<?phpnamespace app\common\model; class Cache { public $redis = null; public function __construct( ...
- usb-cam (2)摄像机标定
http://blog.csdn.net/heyijia0327/article/details/43538695 官方也给出了单目的标定教程和双目视觉的标定教程.本教程基于usb_cam pack ...
- Qt 编程指南 2 Hello Designer
2 Hello Designer ①编辑窗口部件:为窗口拖拽控件(即部件),编辑控件布局等. ②编辑信号/槽:用户在图形界面的一些动作会触发窗口或控件的信号,信号对应的处理函数就是槽函数,这种模式实 ...
- [转]QT4.8.5+qt-vs-addin-1.1.11+VS2010安装配置和QT工程的新建和加载
1.下载windows下的QT库 QT4.8.5 for vs2010: http://download.qt-project.org/official_releases/qt/4.8/4.8.5/q ...