简易登录以及注册界面制作

以下为登录和注册页面的图片

先介绍登录页面

以下为登录的html

<input id="username" type="text" placeholder="请输入用户名">
<input id="password" type="password" placeholder="请输入密码">
<br/>
<br/>
<input id="login" type="button" value="登录">
<input id="setInput" type="button" value="注册">

以下为登录的js

//获取页面中的元素
var username=document.getElementById("username");
var password=document.getElementById("password");
var login=document.getElementById("login");
var setInput=document.getElementById("setInput");
//给localStorage加载初始数据
localStorage.username+= "chenzhuozhu:czz970312;";
localStorage.username+="sjaodoa:fajsdlfja;";
//设置个函数判断localStorage中是否有对应的账号密码
function tuust(value) {
    var dta=localStorage.username.split(";");
    for (let i=0;i<dta.length;i++){
        var arrPust=dta[i].split(":");
        if (arrPust[0]==value){
            if (arrPust[1]==password.value){
                return true;
            }
        }
    }
    return false;
}
//给登录按钮添加个判断，先判断用户名和密码框为不为空，并且数据库中有没有对应的数值。
login.addEventListener("click",function () {
    if (username.value==""||password.value==""){
        alert("用户名和密码不能为空");
    } else {
        if (tuust(username.value)){
            alert("登录成功");
            username.value="";
            password.value="";
        } else {
            alert("没有你的用户名或者密码错误，重新注册一个吧");
        }
    }
});
//跳转到注册界面
setInput.addEventListener("click",function () {
    location.href="login.html";
})

以下为注册页面的html

<input id="username" type="text" placeholder="请输入用户名">
<input id="password" type="password" placeholder="请输入密码">
<input id="passwordTwo" type="password" placeholder="请再次输入密码">
<br/><br/>
<input id="setInput" type="button" value="注册">

以下为注册页面的js

//获取页面中的元素
var username=document.getElementById("username");
var password=document.getElementById("password");
var passwordTwo=document.getElementById("passwordTwo");
var setInput=document.getElementById("setInput");
//给注册按钮增加个点击事件，判断用户名和密码是否为空，密码和重复密码是否一致，注册成功跳转
setInput.addEventListener("click",function () {
    if (username.value==""||password.value==""||passwordTwo.value==""){
        alert("用户名以及密码不能为空");
    }else if (password.value!=passwordTwo.value) {
        alert("密码和重复密码不一致");
    }else {
        if (!tuust(username.value)){
            localStorage.username+=username.value+":"+password.value+";";
            location.href="enter.html";
            alert("恭喜，注册成功");
        } else {
            alert("你输入的用户名已经被注册");
            username.value="";
        }
    }
});
//创建一个方法，判断注册的用户名是否被注册
function tuust(value) {
    var dta=localStorage.username.split(";");
    for (let i=0;i<dta.length;i++){
        var arrPust=dta[i].split(":");
        if (arrPust[0]==value){
            return true;
        }
    }
    return false;
}

简易登录以及注册界面制作

猜你喜欢