首页登陆添加拖动验证

hdw

2019-01-19 401f690e48292e4cb476a0b8d9790da2e1c71d33

首页登陆添加拖动验证

 gx_tieta/WebRoot/mobil/app/css/loginm.css

New file
@@ -0,0 +1,61 @@
@charset "UTF-8";

.hdw-dialog {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: none;

    z-index: 9999;

}



.hdw-dialog.hdw-dialog-hide {

    display: none;

}



.hdw-dialog .hdw-dialog-container {

    position: relative;

    width: 100%;

    height: 100%;

    background-color: none;

}



.hdw-dialog-bg {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #000000;

    opacity: .1;

    z-index: 0;

}

.hdw-dialog-content {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #FFFFFF;

    z-index: 1;

}

.hdw-dialog-content.hdw-dialog-width500-300 {

    width: 500px;

    height: 300px;

    left: 50%;

    margin-left: -250px;

    top: 50%;

    margin-top: -150px;

}

.hdw-dialog-content.hdw-dialog-width270-125 {

    width: 270px;

    height: 125px;

    left: 50%;

    margin-left: -135px;

    top: 50%;

    margin-top: -63px;

}



.hdw-dialog-content-container {

    position: relative;

}

 gx_tieta/WebRoot/mobil/images/verify.png

 gx_tieta/WebRoot/mobil/loginm.html

@@ -5,6 +5,8 @@
<title>蓄电池智能远程运维系统</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="mobilCss/jquery.mobile-1.4.5.min.css" />

<link rel="stylesheet" type="text/css" href="../js/verify/css/verify.css">

<link rel="stylesheet" type="text/css" href="app/css/loginm.css">

<script type="text/javascript" src="mobilJs/jquery-1.8.2.js"></script>

<script type="text/javascript" src="mobilJs/jquery.mobile-1.4.5.min.js"></script>

<style type="text/css">

@@ -60,12 +62,24 @@
                    </div>

                    <input  id="sub" type="button" data-role="button" value="登录" />

                </form>

                <!-- 验证码登陆面板 -->

                <div class="hdw-dialog hdw-dialog-hide" id="lVerify-dialog">

                    <div class="hdw-dialog-container">

                        <div class="hdw-dialog-bg"></div>

                        <div class="hdw-dialog-content hdw-dialog-width270-125">

                            <div class="hdw-dialog-content-container">

                                <div id="lVerify" ></div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

<script type="text/javascript" src="../js/base64.js"></script>

<script type="text/javascript" src="../js/MD5.js"></script>

<script type="text/javascript" src="../js/verify/js/verify.min.js"></script>

<script type="text/javascript">

    //按钮触发事件

    document.getElementById("sub").onclick = function() {

@@ -77,11 +91,20 @@
        } else if (password=null||password == "" || password.length < 1) {

            document.getElementById("msg").innerHTML = "请输入密码";

        } else {

            checkuser();

            $('#lVerify-dialog').removeClass('hdw-dialog-hide');    // 显示拖动验证数据

            initVerify();

            //checkuser();

        }

        

    };



	
    // 点击空白区域关闭验证

    $('#lVerify-dialog .hdw-dialog-bg').click(function() {

        $('#sub').children('.faa-spin').css('visibility', 'hidden');

        $('#sub').removeClass('page-loading');

        $('#lVerify-dialog').addClass('hdw-dialog-hide');

    });

	
    //校验用户名密码是否正确

    function checkuser() {

        var user = document.getElementById("user").value;

@@ -156,6 +179,41 @@
                + ";expires=Thu, 01-Jan-70 00:00:01 GMT";

        //console.info("删除成功");

    }

    // 初始化verify拖动验证

	
    function initVerify() {

        // 清空内容

        $('#lVerify').text('');

        // 配置拖动验证图像

        $('#lVerify').slideVerify({

            type : 2,   //类型

            vOffset : 5,  //误差量，根据需求自行调整

            vSpace : 5, //间隔

            imgName : ['verify.png'],

            imgSize : {

                width: '270px',

                height: '125px',

            },

            blockSize : {

                width: '40px',

                height: '40px',

            },

            barSize : {

                width : '270px',

                height : '40px',

            },

            ready : function() {

    				
            },

            success : function() {

                $('#lVerify-dialog').addClass('hdw-dialog-hide');    // 隐藏验证

                checkuser();    // 验证用户

            },

            error : function() {

                // alert('验证失败！');

            }

        });

     }

    

    //拦截安卓回退按钮

    history.pushState(null, null, location.href);