团队作业进度报告
今日任务：完成用户修改密码页面
主要代码：
resetpass.css
* {
margin: 0;
padding: 0
}
.from {
overflow: hidden;
position: relative;
}
.bgc {
width: 100%;
height: 100%;
}
.submit {
position: absolute;
z-index: 9;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
margin-top: 150px;
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: #fff;
display: flex;
flex-direction: column;
}
.form_title {
text-align: center;
margin-top: 40px;
font-size: 18px;
}
.form_input {
padding: 0 30px;
box-sizing: border-box;
display: flex;
margin-top: 20px;
}
.inputs {
height: 40px;
width: 300px;
border-radius: 5px;
border: none;
background-color: #eee;
color: #666;
padding-left: 20px;
}
.form_input span {
width: 85px;
align-self: center;
}
.btn_submit {
align-self: center;
}
.btn {
border: none;
width: 80px;
height: 40px;
color: #fff;
border-radius: 5px;
background: #999;
margin-top: 40px;
}
.btn:hover {
background: #666;
}
.back {
margin-left: 10px;
}
.home_href {
border: none;
width: 80px;
height: 40px;
color: #fff;
border-radius: 5px;
background: #FFD204;
}
resetpass.html(<script>部分的后台数据传递部分由队友完成）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>树懒电影---重置您的密码</title>
<link rel="stylesheet" href="../static/css/resetpass.css">
</head>
<body>
<form method="post" id="resetform">
<div class="from">
<img class="bgc" src="../static/img/9.jpg" alt="">
<div class="submit">
<span class="form_title">重置密码</span>
<div class="form_input">
<span>手机号码：</span>
<input class="inputs" type="text" id="userphone" value="" placeholder="输入您的手机号码">
</div>
<div class="form_input">
<span>新密码:</span>
<input class="inputs" type="password" id="resetpass1" value="" placeholder="输入您的新密码">
</div>
<div class="form_input">
<span>再次输入:</span>
<input class="inputs" type="password" id="resetpass2" value="" placeholder="再次输入您的新密码">
</div>
<div class="btn_submit">
<input type="reset" class="btn" value="清空">
<input type="button" class="home_href" id="resetbtn" onclick="resetpass()" value="提交">
</div>
</div>
</div>
</form>
</body>
</html>
<script src="../static/js/jquery.min.js"></script>
<script type="text/javascript">
function resetpass(){
var userphone=document.getElementById("userphone").value
var resetpass1=document.getElementById("resetpass1").value
var resetpass2=document.getElementById("resetpass2").value
var submit_flag=1
//判空
if((userphone.length==0)||(resetpass1.length==0)||(resetpass2.length==0)){
submit_flag=0
alert("请把信息填写完整！")
}
//判断密码一致性
if(resetpass2!=resetpass1){
submit_flag=0
alert("两次填写的密码不一致")
document.getElementById("resetpass1").focus();
}
//判断手机号
if(userphone.length!=11){
submit_flag=0
alert("手机号码应为11位！")
document.getElementById("userphone").focus();
}
var regu = /^1[3456789]\d{9}$/
if(!(regu.test(userphone)) ){
submit_flag=0
alert("手机号码格式有误！")
document.getElementById("userphone").focus();
}
//判断密码格式
if(!((resetpass1.length>=6)&&resetpass1.length<=18))
{
submit_flag=0
alert("密码长度应该为6-16位!")
document.getElementById("resetpass1").focus();
}
var regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{6,18}');
part_pass=resetpass1.split(" ")
if((!(regex.test(resetpass1))) || part_pass.length!=1)
{
submit_flag=0
alert("密码为数字+英文字母 且不可以包含空格！")
document.getElementById("resetpass1").focus();
}
//发起请求
if(submit_flag==1)
{
$.ajax({
url:"/resetpass",
data:{userphone:userphone,resetpass:resetpass2},
success: function (data) {
if (data.data==1)
{
alert("密码修改成功！")
window.open("/",'_self')
}
else
{
alert("修改密码失败！请重试")
}
},
error: function (xhr, type, errorThrown) {
// print("ajax请求失败！")
}
})
}
// alert(submit_flag)
}
</script>
效果截图：
