效果图展示一下::::
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"></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=" 请输入邮箱">
<span class="email">请输入正确的邮箱格式xxx@xx.xxx</span>
<p class="email-null">邮箱不能为空</p>
<input class="iconfont" name="password" type="password" placeholder=" 请输入密码">
<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;
})
我是前端小白,如有错误请指正,谢谢!