这是LayUi登录注册界面，内容自己扩充修改

李浩东@

于 2023-09-22 11:18:42 发布

阅读量198

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_64180190/article/details/133162800

版权

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<title>Login and Register</title>
<style>
body {
background-color: #f2f2f2;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.login-box,
.register-box {
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
}

.login-box .toggle-login,
.register-box .toggle-register {
position: absolute;
top: 10px;
right: 10px;
color: #999;
cursor: pointer;
}

.container .register-box {
display: none;
}

.container .box-show {
display: block;
}

.layui-form-label {
width: 70px;
padding: 9px!important;
}

.toggle-register,
.toggle-login {
display: inline-block;
margin-top: 15px;
color: #999;
cursor: pointer;
}
</style>
</head>

// 切换登录和注册表单显示
document.querySelector('.toggle-login').addEventListener('click', function () {
document.querySelector('.login-box').classList.remove('box-show');
document.querySelector('.register-box').classList.add('box-show');
});

document.querySelector('.toggle-register').addEventListener('click', function () {
document.querySelector('.register-box').classList.remove('box-show');
document.querySelector('.login-box').classList.add('box-show');
});

// 监听登录表单提交
form.on('submit(login-button)', function (data) {
// 验证输入是否为空
if (!data.field.username || !data.field.password) {
layer.msg('请输入用户名和密码', { icon: 2 });
return false;
}

// TODO: 处理登录逻辑
// 示例：假设登录接口返回成功状态码为 0
var res = {
code: 0,
message: '登录成功'
};

if (res.code === 0) {
layer.msg(res.message, { icon: 1 });
// 登录成功后跳转页面
window.location.href = 'http://127.0.0.1:8848/%E9%87%91%E8%9E%8D%E5%85%AC%E5%8F%B8%E9%A1%B9%E7%9B%AE/%E9%87%91%E8%9E%8D%E5%85%AC%E5%8F%B8%E7%BD%91%E7%AB%99%E9%A6%96%E9%A1%B51.html';
} else {
layer.msg(res.message, { icon: 2 });
}

return false; // 阻止表单跳转
});

// 监听注册表单提交
form.on('submit(register-button)', function (data) {
// 验证输入是否为空
if (!data.field.username || !data.field.password || !data.field.confirmPassword) {
layer.msg('请输入用户名、密码和确认密码', { icon: 2 });
return false;
}

// 验证密码和确认密码是否一致
if (data.field.password !== data.field.confirmPassword) {
layer.msg('密码和确认密码不一致', { icon: 2 });
return false;
}

// TODO: 处理注册逻辑
// 示例：假设注册接口返回成功状态码为 0
var res = {
code: 0,
message: '注册成功'
};

if (res.code === 0) {
layer.msg(res.message, { icon: 1 });
// 注册成功后跳转页面
window.location.href = 'http://127.0.0.1:8848/%E9%87%91%E8%9E%8D%E5%85%AC%E5%8F%B8%E9%A1%B9%E7%9B%AE/%E9%87%91%E8%9E%8D%E5%85%AC%E5%8F%B8%E7%BD%91%E7%AB%99%E9%A6%96%E9%A1%B51.html';
} else {
layer.msg(res.message, { icon: 2 });
}

return false; // 阻止表单跳转
});
});
</script>
</body>

</html>

李浩东@

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
这是LayUi登录注册界面，内容自己扩充修改

input type="password" name="confirmPassword" lay-verify="required" autocomplete="off" placeholder="请确认密码" class="layui-input"><input type="password" name="password" lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input">
复制链接

扫一扫