jq登录异步阻止

2 篇文章 0 订阅
1 篇文章 0 订阅

效果图展示一下::::
在这里插入图片描述在这里插入图片描述在这里插入图片描述
css代码

	    #login-panel{ width: 358px;height:360px;padding:20px;position: fixed;z-index:100;left:0;right: 0;top:0;bottom: 0;margin:auto;background-color:#fff;display: none}
        #login-panel .loginTitle{ display: flex;justify-content: space-between;align-items: flex-end}
        #login-panel .loginTitle p{ font-size: 12px}
        #login-panel a{ color:#36a9df;font-size: 12px}
        #login-panel .loginForm{ position: relative;margin-top: 20px}
        #login-panel .loginForm input{ width: 100%;height: 36px;margin-bottom: 20px;border:1px solid #f1f1f1;box-sizing: border-box;font-size: 12px}
        #login-panel .loginForm input:nth-of-type(2){ text-indent: 15px}
        #login-panel .loginForm input:nth-of-type(3){ color:#fff;background-color: #eb2a58;border:none;line-height: 36px;margin-top: 15px;}
        #login-panel .closeLogin{ text-align: right}
        #login-panel .loginForm span{ width:100%;line-height:14px;font-size:12px;color:red;z-index:5;text-indent: 15px}
        #login-panel .loginForm .email,#login-panel .loginForm .email-null{ position: absolute;top:40px;display: none}
        #login-panel .loginForm .password,#login-panel .loginForm .password-null { position: absolute;top:96px;display: none}
        #login-panel .closeLogin{ cursor: pointer;}
        #login-panel .allNull{ position: absolute;top:85px;left:30%;z-index: 5;font-size: 12px;text-align: center;color:red;display: none}

        #login-panel .password-chose{ display: flex;justify-content: space-between;align-items: center;font-size: 12px}
        #login-panel .password-chose .box-out{margin:0 -20px 0;padding:0}
        #login-panel .password-chose .box-out .box-in{display: flex;align-items: center}
        #login-panel .password-chose .box-out .box-in .checkbox{ margin:0; }
        #login-panel .password-chose .box-out .box-in span{ color:#000;text-indent: 10px }

        #login-mask {background-color: #000;opacity: .3;z-index: 99;width: 100%;height: 100%;position: fixed;display: none}

html代码

<div id="login-panel">
    <div class="allNull"></div>
    <div class="closeLogin iconfont cursor-pointer login-panel-close">&#xe623;</div>
    <div class="loginTitle">
        <h4>账号登录</h4>
        <p>还没有账号,<a href="javascript:0;">立即注册</a></p>
    </div>
    <div class="loginForm">
        <form action="{:url('index/auth/check')}" method="post">
            <input class="iconfont" name="email" type="text" placeholder="&#xe631;  请输入邮箱">
            <span class="email">请输入正确的邮箱格式xxx@xx.xxx</span>
            <p class="email-null">邮箱不能为空</p>
            <input class="iconfont" name="password" type="password" placeholder="&#xe6a0;  请输入密码">
            <span class="password">请输入密码长度大于6的字符</span>
            <p class="password-null">密码不能为空</p>
            <div class="password-chose">
                <div class="checkbox box-out">
                    <label class="box-in">
                        <label class="checkbox">
                            <input type="checkbox" name="remember">
                            <span class="arrow"></span>
                        </label> <span>记住密码</span>
                    </label>
                </div>

                <a href="javascript:;">忘记密码?</a>
            </div>
            <input type="submit" value="登  录"/>
        </form>
    </div>
</div>

script代码

	$(document).on('click', '#login-panel .login-panel-close', function () {   //点击右上角删除号,隐藏登录框和遮罩层
            $('#login-panel').hide();
            $('#login-mask').hide();

            return false;
        })


	 //判断字符串是否为空
    function isEmptyOrBlank(str) {
        if (str == null || str.length == 0) {
            return true;
        } else {
            return false;
        }
    }
    //验证邮箱
    function mailbox() {
        var $mailbox = $("#login-panel .loginForm input:eq(0)").val();  //邮箱的input框
        if (!isEmptyOrBlank($mailbox)) {  //如果邮箱的input的值不为空
            var $mailRegular = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            if (!$mailRegular.test($mailbox)) {     //如果邮箱input框的值的格式不正确
                $("#login-panel .loginForm span:eq(0)").show();   //显示请输入正确的邮箱格式
                return false;
            } else {
                return true;
            }
        } else {
            return false;
        }
    }
    // 验证密码
    function password() {
        var $password = $("#login-panel .loginForm input:eq(1)").val();  //密码的input框
        if (!isEmptyOrBlank($password)) {  //如果密码框不为空
            var $passRegular = /^\w\w{5,}$/;
            if (!$passRegular.test($password)) {  //如果密码格式不正确
                $("#login-panel .loginForm span:eq(1)").show();  //显示密码格式不对
                return false;
            } else {
                return true;
            }
        } else {
            return false;
        }
    }
    $(function () {
        //邮箱确认
        $("#login-panel .loginForm input:eq(0)").focus(function () { //当邮箱框获得焦点时
            $("#login-panel .loginForm span:eq(0)").hide();  //显示的邮箱格式不对隐藏
            $("#login-panel .allNull").hide() //邮箱不能为空也隐藏
        });
        $("#login-panel .loginForm input:eq(0)").blur(function () {  //当邮箱失去焦点时
            mailbox();  //进行正则判断  验证邮箱格式
        });

        //密码框
        $("#login-panel .loginForm input:eq(1)").focus(function () {  //当密码框获得焦点时
            $("#login-panel .loginForm span:eq(1)").hide(); //显示的密码格式不对隐藏
            $("#login-panel .allNull").hide()  //密码不能为空也隐藏
        });
        $("#login-panel .loginForm input:eq(1)").blur(function () {  //当密码框失去焦点时
            password();  //进行正则判断,验证密码格式
        });
    })

    $(document).on('click',"#login-panel .loginForm input:last",function () { //点击登录按钮
        var $mailbox  = $("#login-panel .loginForm input:eq(0)").val(); //获取邮箱的值
        var $password = $("#login-panel .loginForm input:eq(1)").val(); //获取密码的值
        var $remember = $("#login-panel [name=remember]:checked").val(); //获取记住密码
        var $mailRegular = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        var $passRegular = /^\w\w{5,}$/;
        if($mailbox == "" || $mailbox == null){  //当邮箱的值为空或为null时
            $("#login-panel .allNull").show()  //显示邮箱不能为空
            $("#login-panel .allNull").html("对不起,邮箱不能为空。");  
            return false
        }else if( $password == "" ||  $password == null){
            $("#login-panel .allNull").show()
            $("#login-panel .allNull").html("对不起,密码不能为空。");
            return false
        }else if(!$mailRegular.test($mailbox) || !$passRegular.test($password)){  //当邮箱或密码格式不对时
            $("#login-panel .allNull").show() //显示
            $("#login-panel .allNull").html("邮箱或密码格式错误,请重新输入。");
            return false
        }

        $.ajax({   //登录异步阻止
            type:'POST',
            url:"{:url('index/auth/check')}",
            data:{email:$mailbox,password:$password,remember: $remember},
            error:function(){
                $("#login-panel .allNull").show()
                $("#login-panel .allNull").html("服务器错误");
            },
            success:function(res){
                layer.msg(res.msg)

                if (res.code == 1) {

                    window.location.href = res.url;
                }
            }
        });

        return false;
    })

我是前端小白,如有错误请指正,谢谢!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值