登录 dl-zc{ mock{ data.js user.json } public{ img{ 1.jpg favicon.ico } js{ AA.js BB.js axios.js axios.map } demo.html index.html login.html } app.js package.json }
<h3> 管理平台登录 </h3> <div> <input type="text" placeholder="请输入手机号" class="username"> </div> <div class="a"> <input type="text" placeholder="请输入手机验证码" class="yzm"> <button class="yzm1"> 获取手机验证码 </button> </div> <div class="b"> <input type="text" placeholder="请输入随机验证码" class="yzm2"> <button class="yzm3"> </button> </div> <div class="c"> <button class="yes"> 登录 </button> </div> <div class="d"> <button class="no"> 立即注册 </button> </div>;
let username = document.querySelector(".username");
let yzm = document.querySelector(".yzm");
let yzm1 = document.querySelector(".yzm1");
let yzm2 = document.querySelector(".yzm2");
let yzm3 = document.querySelector(".yzm3");
let yes = document.querySelector(".yes");
let no = document.querySelector(".no");
let flag;
yzm3.innerHTML = Math.random().toString(16).substr(2, 6);
yzm1.addEventListener("click", () => {
if (username.value > 13000000000 && username.value < 19000000000) {
axios.post("/api/one", {
num: username.value,
}).then(result => {
if (result.data.val) {
alert(你的验证码是${result.data.val})
yzm.placeholder = 当前可输入${result.data.val}
flag = result.data.val;
}
})
} else {
alert("手机号不对!!!");
}
})
yes.addEventListener("click", () => {
if (username.value && yzm.value && yzm2.value) {
alert("正在进行账号密码验证。。。。。");
if (yzm.value === flag && yzm3.innerHTML === yzm2.value) {
axios.post("/api/two", {
username:username.value,
}).then(result=>{
if(result.data.val){
alert("登录成功");
}else{
alert("注册成功");
}
location.href = "login.html";
})
} else {
alert("请重试")
}
} else {
alert("不能为空");
}
})
</script>