基于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 帮我们处理的,那么我们如何实现自定义表单登录呢, ...
随机推荐
- dumpe2fs 命令的使用，转储 ext2/ext3/ext4 文件系统信息
使用man 命令可以查看 dumpe2fs 命令具体的使用的方法: NAME dumpe2fs - dump ext2/ext3/ext4 filesystem information SYNOPSI ...
- 【PAT】B1003 我要通过！
我觉得这是PAT中最坑的一道题,表述令人很不适应 分析过程: 条件1.只有P,A,T三种字符 条件2.xPATx正确,x可以是空串,或者由A组成的字符串 条件3.如果aPbTc是正确的,aPbATca ...
- 【PAT】B1036 跟奥巴马一起编程(15)（15 分
#include<stdio.h> int main() { int row,col; char c; scanf("%d %c",&col,&c); ...
- 推荐5款简洁美观的Hexo主题
2018-11-17 17:15:46 原文地址:http://www.izhongxia.com 以下是 <hexo 主题列表> 中挑选出来一些比较简洁美观的主题(存在个人主观意识,请勿 ...
- pandas的to_csv()使用方法
1.首先查询当前的工作路径: import osos.getcwd() #获取当前工作路径2.to_csv()是DataFrame类的方法,read_csv()是pandas的方法dt.to_csv( ...
- 关于Hamilton问题的研究
关于Hamilton问题的研究 首先介绍一下Hamilton问题:哈密顿问题寻找一条从给定的起点到给定的终点沿途恰好经过所有其他结点一次的路径.(摘自百度百科) 从刚开始学OI买了信息学一本通,这个问 ...
- 转://oracle字符集
一.oracle字符集基础知识oracle数据库有国家字符集(national character set)与数据库字符集(database character set)之分.两者都是在创建数据库时需 ...
- 基于canvas图像处理的图片 灰色图像
图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...
- 转载 .Net多线程编程—并发集合 https://www.cnblogs.com/hdwgxz/p/6258014.html
集合 1 为什么使用并发集合? 原因主要有以下几点: System.Collections和System.Collections.Generic名称空间中所提供的经典列表.集合和数组都不是线程安全的, ...
- go标准库的学习-mime/multipart
参考:https://studygolang.com/pkgdoc 导入方式: import "mime/multipart" multipart实现了MIME的multipart ...