<%@ 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表单登录（带验证码）的更多相关文章

  1. 基于Bootstrap表单验证

    基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...

  2. yii2.0表单自带验证码

    Yii2.0的自带的验证依赖于GD2或者ImageMagick扩展. 使用步骤如下: 第一步,控制器: 在任意controller里面重写方法

  3. SpringSecurity实战记录（一）开胃菜：基于内存的表单登录小Demo搭建

    Ps:本次搭建基于Maven管理工具的版本,Gradle版本可以通过gradle init --type pom命令在pom.xml路径下转化为Gradle版本(如下图) (1)构建工具IDEA In ...

  4. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  5. WEB安全讨论-表单登录是先验证验证码还是密码

    表单登录是先验证验证码还是密码? 肯定是验证码呀!!!这是毋庸置疑的.但是发现有人会验证密码,感觉先验证密码和先验证验证码是一个概念是一样的.但是其实是完全不一样的.下面我们来一起详细的剖析一下: 消 ...

  6. SpringSecurity 默认表单登录页展示流程源码

    SpringSecurity 默认表单登录页展示流程源码 本篇主要讲解 SpringSecurity提供的默认表单登录页 它是如何展示的的流程, 涉及 1.FilterSecurityIntercep ...

  7. 10款精美的HTML5表单登录联系和搜索表单

    1.HTML5/CSS3仿Facebook登录表单 这款纯CSS3发光登录表单更是绚丽多彩.今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Faceboo ...

  8. Spring Security 表单登录

    1. 简介 本文将重点介绍使用Spring Security登录. 本文将构建在之前简单的Spring MVC示例之上,因为这是设置Web应用程序和登录机制的必不可少的. 2. Maven 依赖 要将 ...

  9. SpringBoot集成Spring Security（4）——自定义表单登录

    通过前面三篇文章,你应该大致了解了 Spring Security 的流程.你应该发现了,真正的 login 请求是由 Spring Security 帮我们处理的,那么我们如何实现自定义表单登录呢, ...

随机推荐

  1. fedora 28 , firewalld 防火墙控制，firewall-cmd 管理防火墙规则

    今天,在使用fedora时,需要修改防火墙规则,一时间忘记了命令是什么,这里进行记录一下. 目前 fedora 28/ centos 7 使用 firewalld 作为防火墙软件:下面我就怎么简单管理 ...

  2. Django电商项目---完成登录验证和用户中心(个人信息)day3

    登录验证的实现 背景说明: 用户在商品界面选择商品后,在点击购物车或者结算订单之前 需要完成用户的登录验证,这里用装饰器来完成   创建装饰器类: df_user/user_decorator.py ...

  3. Linux之特殊的环境变量IFS以及如何删除带有空格的目录

    1.IFS是什么? Linux下有一个特殊的环境变量叫做IFS,叫做内部字段分隔符(internal field separator).IFS环境变量定义了bash shell用户字段分隔符的一系列字 ...

  4. c#中//注释和///注释的区别

    c#中//注释和///注释的区别 ///会被编译,//不会所以使用///会减慢编译的速度(但不会影响执行速度)///会在其它的人调用你的代码时提供智能感知 也是一种注释,但是这种注释主要有两种作用:1 ...

  5. Vue:渲染、指令、事件、组件、Props

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工 ...

  6. 1192：放苹果（dp + 搜索）

    这道题先用搜索写的,因为我需要先打表来寻找规律. 因为数据量小所以收搜也会过 #include<iostream> #include<cstdio> #include<c ...

  7. 2257: [Jsoi2009]瓶子和燃料

    题意:给你n个数字,然后让你选出k个,这k个数字进行任意组合,问得到的最小结果是多少? 数学知识: 分析:根据题意得出数学公式: 那么,如何在n个之中选出k个呢?其实不用选,因为直接计算各个因子,然后 ...

  8. 【转】Android 创建AVD各参数详解

    一.Eclipse中图形创建AVD: Device: 即设备,指具体的手机设备型号,可以在window->Android Virtual Device Manager->Device De ...

  9. php 抛出异常信息try catch

    <meta charset="utf-8"> <?php /** * 自定义方法输出异常信息 */ $i=11; try { if ($i==1) { echo ...

  10. QT 13 窗口屏幕设置大小与居中显示

    <pre name="code" class="cpp">#include "mainwindow.h" #include &l ...