完成前端用户注册

This commit is contained in:
云泽网
2025-05-26 23:54:51 +08:00
parent e7d5aa1971
commit ab4a36a7cd
8 changed files with 261 additions and 191 deletions
+15 -2
View File
@@ -173,11 +173,15 @@
placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
<div class="layui-form-item" style="display: flex;flex-direction: column;align-items: center;">
<div class="layui-input-block" style="margin-left: 0;margin-bottom: 10px;">
<button class="layui-btn layui-btn-fluid" lay-submit
lay-filter="accountLogin">登录</button>
</div>
<div style="margin-bottom: 10px;color: #aaa;">or</div>
<div>
<a href="{:url('/index/user/register')}" class="">注册</a>
</div>
</div>
</form>
</div>
@@ -236,6 +240,15 @@
});
});
</script>
<style>
.layui-form-item a {
color: #409eff;
}
.layui-form-item a:hover {
color:rgb(58, 125, 196);
}
</style>
</body>
</html>
+60 -13
View File
@@ -124,13 +124,7 @@
<form action="#" method="post" class="layui-form register-form">
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
<input type="email" name="email" required lay-verify="required|email" placeholder="请输入邮箱"
<input type="account" name="account" required lay-verify="required|account" placeholder="请输入邮箱"
autocomplete="off" class="layui-input">
</div>
</div>
@@ -163,7 +157,7 @@
</div>
</div>
<div class="login-link">
已有账号?<a href="{:url('user/login')}">立即登录</a>
已有账号?<a href="{:url('/index/user/login')}">立即登录</a>
</div>
</form>
</div>
@@ -171,23 +165,76 @@
layui.use(['form', 'layer'], function () {
var form = layui.form;
var layer = layui.layer;
var $ = layui.$;
// 注册表单提交
form.on('submit(register)', function (data) {
console.log(data.field);
$.ajax({
url: '{:url("index/user/register")}',
type: 'POST',
data: data.field,
success: function (res) {
if (res.code === 0) {
layer.msg('注册成功', {
icon: 1,
time: 1000
}, function () {
window.location.href = '{:url("index/user/login")}';
});
} else {
layer.msg(res.msg);
}
},
error: function () {
layer.msg('网络错误,请稍后重试');
}
});
return false;
});
// 获取验证码按钮点击事件
document.getElementById('getCode').addEventListener('click', function () {
var email = document.querySelector('input[name="email"]').value;
if (!email) {
var account = document.querySelector('input[name="account"]').value;
if (!account) {
layer.msg('请先输入邮箱地址');
return;
}
// 发送邮箱验证码请求
console.log('发送邮箱验证码到:' + email);
$.ajax({
url: '{:url("index/user/sendEmailCode")}',
type: 'POST',
data: { account: account },
dataType: 'json', // 添加这行
success: function (res) {
if (res.code === 0) {
layer.msg('验证码已发送,请查收邮件');
// 禁用按钮60秒
var btn = document.getElementById('getCode');
var countdown = 60;
btn.disabled = true;
var timer = setInterval(function () {
if (countdown > 0) {
btn.innerHTML = countdown + '秒后重试';
countdown--;
} else {
btn.disabled = false;
btn.innerHTML = '获取验证码';
clearInterval(timer);
}
}, 1000);
} else {
layer.msg(res.msg);
}
},
error: function (xhr, status, error) {
console.log(xhr.responseText); // 添加调试信息
layer.msg('网络错误,请稍后重试');
}
});
});
});
</script>
</body>
</html>
</html>