基于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 帮我们处理的,那么我们如何实现自定义表单登录呢, ...
随机推荐
- Linux 设备树的解释 - DTB文件格式【转】
https://blog.csdn.net/cc289123557/article/details/51782449 1.dtb文件格式 dtb文件的格式如下图 : NOTE:不同部分顺序可能不一样 ...
- js判断元素是否是disable状态
js判断元素是否是disable状态 jquery判断元素状态用$(select).prop(属性值) == true js判断button是否可以点击: //判断button是否为不可点击状态 if ...
- Java客户端连接kafka集群报错
往kafka集群发送消息时,报错如下: page_visits-1: 30005 ms has passed since batch creation plus linger time 加入log4j ...
- IO_ObjectOutputStream(对象的序列化)
对象序列化就是将一些对象写入到硬盘中存储起来,以便下次复用 import java.io.FileInputStream; import java.io.FileOutputStream; impor ...
- Android UI开发神兵利器之Android Action Bar Style Generator
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/x359981514/article/details/26283129 ActionBar是3.0后的 ...
- windows下安装ElasticSearch的Head插件
es5以上版本安装head需要安装node和grunt(之前的直接用plugin命令即可安装) (一)从地址:https://nodejs.org/en/download/ 下载相应系统的msi,双击 ...
- redis 基本命令
set times 2017.12.12 设置键名键值 get times 获取键名 exists times 检测键名是否存在 type times 键名的类型 expire times 6 ...
- 离线安装Cloudera Manager 5和CDH5(最新版5.9.3) 完全教程（三）重新分配磁盘空间（可选）
一.查看文件系统 [root@master ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/mapper/vg_master-lv_ ...
- PySpider HTTP 599: SSL certificate problem错误的解决方法
在用 PySpider 爬取 https 开头的网站的时候遇到了 HTTP 599: SSL certificate problem: self signed certificate in certi ...
- ConcurrentHashMap中的putIfAbsent方法的使用以及返回值的含义
public V putIfAbsent(@NotNull K key, @NotNull V value) putIfAbsent方法主要是在向ConcurrentHashMap中添加键—值对的时候 ...