登录注册
登录注册流程：
- 前端表单验证---减轻服务器的负载
- 邮箱验证：绑定change事件---判断value是否符合邮箱正则
- 密码验证：密码要符合格式，两次密码要一致
- 昵称验证：昵称符合格式
- 图片验证：图片符合格式
- 点击提交前按钮时，获取用户交互信息
- 把数据POST发送给后端
- 等后端返回数据
- 如果返回的数据包的业务码是错误的，就操作页面弹出提示
- 如果返回的数据包的业务码是正确的，就跳转到登陆页面或者直接帮用户登录
HTML样式
<body>
<div class="main">
<h1>注册界面</h1>
<div class="content">
输入邮箱：<input type="text" id="email" placeholder="请输入邮箱.....">
<p id="emailtext"> </p>
设置密码：<input type="password" id="pwd" placeholder="8-18位字母、数字，区分大小写">
<p id="pwdtext"> </p>
再次输入：<input type="password" id="pwd2" placeholder="再次确认">
<p id="pwd2text"> </p>
设置昵称：<input type="text" id="screenname" placeholder="4-16位字母,数字,汉字,下划线">
<p id="nametext"> </p>
设置头像：
<input type="file" id="screenimg">
<div class="showimg"></div>
<p id="screenimgtext"> </p>
</div>
<div class="btn">
<button id="hand">要提交</button>
<button id="login">去登录</button>
</div>
</div>
js代码：
<script>
var email = document.querySelector("#email")
var pwd = document.querySelector("#pwd")
var pwd2 = document.querySelector("#pwd2")
var screenname = document.querySelector("#screenname")
var screenimg = document.querySelector("#screenimg")
var showimg = document.querySelector(".showimg")
var replace = document.querySelector("#replace")
var hand = document.querySelector("#hand")
var login = document.querySelector("#login")
var arr = new Array(4).fill(false);
//邮箱
email.addEventListener("change", function () {
//邮箱验证正则表达式
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
let emailres = reg.test(email.value)
//根据结果做出提示
if (emailres) {
email.style.borderColor = "3px green solid"
emailtext.innerHTML = "邮箱格式正确"
emailtext.style.color = "green"
arr[0] = true;
} else {
email.style.borderColor = "3px red solid"
emailtext.innerHTML = "邮箱格式错误"
emailtext.style.color = "red"
}
})
//密码
pwd.addEventListener("change", function () {
//密码正则表达式
var reg = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/
var pwdres = reg.test(pwd.value)
//根据结果做出提示
if (pwdres) {
pwd.style.borderColor = "3px green solid"
pwdtext.innerHTML = "密码格式正确"
pwdtext.style.color = "green"
arr[1] = true;
} else {
pwd.style.borderColor = "3px red solid"
pwdtext.innerHTML = "密码格式错误"
pwdtext.style.color = "red"
}
})
//二次密码
pwd2.addEventListener("change", function () {
//判断两次密码是否一致根据结果做出提示
if (pwd2.value == pwd.value) {
pwd2.style.borderColor = "3px green solid"
pwd2text.innerHTML = "密码正确"
pwd2text.style.color = "green"
arr[2] = true;
} else {
pwd2.style.borderColor = "3px red solid"
pwd2text.innerHTML = "两次密码不一致"
pwd2text.style.color = "red"
}
})
//昵称
screenname.addEventListener("change", () => {
//昵称正则表达式
var reg = /^([a-zA-Z0-9_\u4e00-\u9fa5]{4,16})$/
var screennameres = reg.test(screenname.value)
//根据结果做出提示
if (screennameres) {
screenname.style.border = "3px green solid"
nametext.innerHTML = "昵称格式正确"
nametext.style.color = "green"
arr[3] = true;
} else {
screenname.style.borderColor = "3px red solid"
nametext.innerHTML = "昵称格式错误"
nametext.style.color = "red"
}
})
//头像
screenimg.addEventListener("change", function () {
var arr = ["image/png", "image/jpg", "image/jpeg"]
var imgres = arr.includes(screenimg.files[0].type)
//根据结果做出提示
if (imgres) {
var url = window.URL.createObjectURL(screenimg.files[0])
showimg.style.backgroundImage = `url(${url})`
screenimgtext.innerHTML = "图片格式正确"
screenimgtext.style.color = "green"
} else {
screenimgtext.innerHTML = "图片格式错误"
screenimgtext.style.color = "red"
// arr[4]=true;
}
})
</script>
<--模态弹窗CSS样式-->
<style>
.screen {
width: 100%;
height: 900px;
background-color: rgba(219, 214, 214, 0.6);
z-index: 10000;
position: fixed;
top: 0px;
left: 0px;
}
.mainbox {
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #fff;
margin-top: 100px;
border-radius: 10px;
}
.text {
width: 300px;
height: 50px;
margin: 0 auto;
line-height: 50px;
text-align: center;
}
.sure {
margin-left: 220px;
margin-top: 10px;
}
.sure {
width: 39px;
height: 22px;
}
</style>
<script>
//给提交按钮绑定点击事件
hand.addEventListener("click", async () => {
console.log(arr)
//判断所有注册数据是否正确
if (arr.includes(false)) {
//模态弹窗
var screen = document.createElement("div")
screen.className = "screen"
document.body.appendChild(screen)
//在半透明的背景上添加展示框
var mainbox = document.createElement("div")
mainbox.className = "mainbox"
screen.appendChild(mainbox)
//在展示框中添加文字和确定按钮
var text = document.createElement("p")
text.className = "text"
var sure = document.createElement("button")
mainbox.appendChild(text)
text.innerHTML = "请填写规范信息"
text.style.color = "red"
mainbox.appendChild(sure)
sure.innerHTML = "确定"
sure.className = "sure"
mainbox.appendChild(sure)
//给确定按钮绑定点击事件，删除半透明模板
sure.onclick = function () {
// console.log(sure.parentElement.parentElement)
sure.parentElement.parentElement.remove()
}
} else {
//新建表单
var form = new FormData()
form.append("email", email.value)
form.append("pwd", pwd.value)
form.append("screenname", screenname.value)
form.append("screenimg", screenimg.files[0])
//发送POST请求，等待后端返回code码
var res = await axios.post("/register", form)
console.log(res)
//根据code码进行相应的操作
if (res.data.code == 400) {
//code码正确就跳转到登录界面
window.location.href = "/public/login.html"
} else if (res.data.code == 401) {
//code码不正确，弹窗弹出注册失败
alert(res.data.info)
}
}
})
</script>
<script>
login.addEventListener("click", function () {
window.open("/public/login.html")
})
</script>
</body>
router.js文件
//注册路由
router.post('/register',controller.home.register)
controller文件中的home.js
async register(){
var key=this.ctx.request.body
console.log(key,111111)
var img=this.ctx.request.files
if(img[0]){
//将图片存入public下面的user文件夹中
let oldpath=img[0].filepath
let imgname=path.basename(oldpath)
let newpath=__dirname+"/../public/user/"+imgname
fs.copyFileSync(oldpath,newpath)
key[img[0].field]="../public/user/"+path.basename(oldpath)
}
console.log(key,222222)
this.ctx.body="6666"
//查询邮箱是否被注册
let sql1=`SELECT * FROM user WHERE email="${key.email}"`
let res1=await this.app.mysql.query(sql1)
if(res1[0]){
this.ctx.body={info:"邮箱已被注册！",code:401}
}else{
//插入数据
let creattime=new Date().toLocaleDateString()
let sql2=`INSERT INTO user (screenname,email,pwd,screenimg,creattime)VALUES("${key.screenname}","${key.email}","${key.pwd}","${key.screenimg}","${creattime}")`
let res2=await this.app.mysql.query(sql2)
this.ctx.body={info:"注册成功",code:400}
}
数据库：
登录前端思路：
扫一扫
1535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
