day19 JavaScript 登录表单以及相应后台管理的基本功能实现

注册界面

html部分

  <h1>
        注册
    </h1>
    <form>
        <p>
            <input name="uname" placeholder="用户名">
        </p>
        <p>
            <input name="upwd" placeholder="密码">
        </p>
        <p>
            <input name="utel" placeholder="手机号">
        </p>
        <p>
            <button>注册</button> <button type="reset">重置</button>
        </p>
    </form>
    <div class="msg" id="msg"></div>

    <a href="./login.html">立即去登录</a>

CSS的部分

.msg {
            height: 45px;
            line-height: 45px;
            text-align: center;
            width: 500px;
            border-radius: 5px;
            background-color: khaki;
            color: red;
        }

JS的部分

 var oForm=document.forms[0];
        var oMsg=document.querySelector("#msg");

        //
        function validate(reg,val,msg){
            var oMsg=document.querySelector("#msg");
            var flag=reg.test(val);
            oMsg.innerHTML=flag?"":msg;
            return flag;
        }
        var userFlag=false,pwdFlag=false,telFlag=false;
        oForm.uname.oninput=function(){
            var msg="用户名只包含数字,字母,下划线, 且长度不小于6位";
            userFlag=validate(/^\w{6,}/,this.value.trim(),msg);//调用新函数
        }

        oForm.upwd.oninput=function(){
            var msg="密码长度在8到16位";
            pwdFlag=validate(/^.{8,16}$/,this.value.trim(),msg);
        }

        oForm.utel.oninput=function(){
            var msg="手机号要合法";
            telFlag=validate(/^[1][3-9]\d{9}$/,this.value.trim(),msg);
        }



        //表单提交事件
        oForm.onsubmit=function(){
            if(!(userFlag&&pwdFlag&&telFlag)){
                return false;
            }
            //1. 把当前的输入框的内容,做成一个对象
            var oUser={
                name:this.uname.value,
                pwd:this.upwd.value,
                tel:this.utel.value,
                time:Date.now(),
                status:1
            }
            //2.
            var oUserList=JSON.parse(localStorage.getItem("users")||"[]");
            //3.
            var isReg=oUserList.some(function(item){
                return item.name==oUser.name;
                //some遍历,任意条件满足返回true
            })
            if(isReg){
                oMsg.innerHTML="该用户已经注册!"
                userFlag=false;
                return false
            }
            oUserList.push(oUser);
            localStorage.setItem("users",JSON.stringify(oUserList));
            alert("注册成功!");
            oMsg.innerHTML="";
            return false;
        }

登录界面

html部分

css部分

 <h1>登录</h1>
    <form>
        <p>
            <input name="uname" placeholder="用户名">
        </p>
        <p>
            <input name="upwd" placeholder="密码">
        </p>
        <p>
            <button>登录</button>
            <button type="reset">重置</button>
        </p>
    </form>

JS部分

var oForm = document.querySelector("form");

        oForm.onsubmit = function () {
                var oUser = {
                            name: this.uname.value,
                            pwd: this.upwd.value
                }
            var oUserList = JSON.parse(localStorage.getItem("users") || "[]");

            var isLogin = oUserList.some(function (item) {
                return item.name === oUser.name && item.pwd === oUser.pwd && item.status == 1;
            })
            if (isLogin) {
                //把当前的用户名 存储到本地,一会在index.html 获取到当前登录人
                //并显示欢迎 xxx 回来 休闲快乐会所
                // sessionStorage 关闭页面就会销毁
                sessionStorage.setItem("currentUser", oUser.name);
                alert("登录成功!");
                location.replace("./index.html");
            }else{
                alert("用户名或者密码错误!")
            }
            return false;
        }

后台管理界面

HTML部分

 <div id="msg">
        欢迎尊敬: <span id="user"></span> VIP中P会员..回到休闲娱乐会所! ^_^;
        <a href="javascript:void(0)">下次再来消费</a>
    </div>

    <form>
        <input name="uname"> <button type="button" id="search">搜索</button>
    </form>
    <table>
        <thead>
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>手机号</th>
                <th>注册日期</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tab">

        </tbody>

    </table>

CSS部分

 <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <style>
        tr,
        td,
        th {
            border: 1px solid #000;
        }

        table {
            width: 600px;
            border: 1px solid #000;
            border-spacing: 0px;
            border-collapse: collapse;
            text-align: center;
        }
    </style>

JS部分

 //获得表格
        var oTab=document.querySelector("#tab");
        //获取本地数据
        var oUserData=JSON.parse(localStorage.getItem("users")||"[]");

        var strHtml="";
        oUserData.forEach(function(item){
            strHtml+=`
            <tr>
                <td>${item.name}</td>
                <td>${item.pwd}</td>
                <td>${item.tel}</td>
                <td>${moment(item.time).format("YYYY-MM-DD HH:mm:ss")}</td>
                <td>${item.status==1?"<font class='green'>可用</font>":"<font class='red'>不可用</font>"}</td>
                <td>
                    <a class="disb" href="javascript:void(0);" data-name=${item.name}>
                     ${item.status==1?"禁用":"启用"}
                    </a>
                </td>
            </tr>
            `
            oTab.innerHTML=strHtml;
        })

        //禁用操作
        oTab.addEventListener("click",function(evt){
            var e=evt||window.event;
            var ele=e.target||e.srcElement;
            if(!(ele.nodeName=="A"&&ele.className=="disb")){
                return;
            }
            var strName=ele.getAttribute("data-name");
            var status=0;

            //获取本地数据
            oUserData.forEach(function(item){
                if(item.name==strName){
                    item.status=!item.status;//自己的状态取反
                    status=item.status;
                }
            })
            //修改显示的文字
            ele.parentNode.parentNode.children[4].innerHTML=status==1?"<font color='green'>可用</font>":"<font color='red'>禁用</font>"
             //把内存的数据,覆盖本地存储的数据
             localStorage.setItem("users",JSON.stringify(oUserData))
        })

        //实现搜索
        var oBtn=document.querySelector("#search");
        oBtn.onclick=function(){
            var strName=document.querySelector("input[name='uname']").value;

            var newData=oUserData.filter(function(item){
                return item.name.indexOf(strName)!=-1;
                //模糊搜索,只要有满足条件的都返回
                //filter返回一个满足条件的新数组
            })

            //利用新数组进行覆盖操作显示,但不能写入localStorage的本的磁盘中去
            var strHtml=``;
            newData.forEach(function(item){
                strHtml+=`
                <tr>
                <td>${item.name}</td>
                <td>${item.pwd}</td>
                <td>${item.tel}</td>
                <td>${moment(item.time).format("YYYY-MM-DD HH:mm:ss")}</td>
                <td>${item.status==1?"<font class='green'>可用</font>":"<font class='red'>不可用</font>"}</td>
                <td>
                    <a class="disb" href="javascript:void(0);" data-name=${item.name}>
                     ${item.status==1?"禁用":"启用"}
                    </a>
                </td>
            </tr>
                `
                oTab.innerHTML=strHtml;
            })
        }
        //1.获取当前的登录信息,如果有登录信息,就显示所有的用户
        //如果没有,就自动跳转到登录页面
        if(sessionStorage.getItem("currentUser")==null){
            location.href="./login.html";//去登录

        }else{
            var user=document.querySelector("#user");
            user.innerHTML=localStorage.getItem("currentUser")
        }
        var oA=document.querySelector("a");
        oA.onclick=function(){
            sessionStorage.removeItem("currentUser");
            location="./login.html";
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容