跳转主界面

最新推荐文章于 2022-04-01 19:21:38 发布

黄酱！

最新推荐文章于 2022-04-01 19:21:38 发布

阅读量66

点赞数

分类专栏： JS 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/tianranran/article/details/121915129

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

主界面html
<body>
    <header>
        <h2>后台管理系统 <span class="user-info">账号:admin</span></h2>
    </header>

    <div class="container">

    </div>
</body>


css
<style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            width: 100%;
            height: 100px;
            background-color: royalblue;
            line-height: 100px;
        }

        header .user-info {
            color: white;
        }

        .container {
            width: 100%;
            height: 800px;
            background-color: seagreen;
        }
    </style>


js
function getUserInfo() {
            let url = location.href
            let paramObj = splitStrToObject(url)
            console.log(paramObj);
            const userInfoEle = document.querySelector('.user-info')
            
            userInfoEle.innerHTML = paramObj.username 
        }

        //url = 'http://www.qianfeng.com?username=admin&password=123&age=22&score=98'
        function splitStrToObject(url) {
            var index = url.indexOf('?')
            url = url.substring(index + 1)
            console.log(url);  // username=admin&password=123&age=22

            //分割字符串得到属性值对象
            var arr = url.split('&')
            console.log(arr);

            var parameObj = {}
            for (var i = 0; i < arr.length; i++) {
                var item = arr[i] // username=admin
                var parameArr = item.split('=')
                var key = parameArr[0]  //username
                var value = parameArr[1] //admin
                parameObj[key] = value
            }

            console.log(parameObj);
            return parameObj

        }

        getUserInfo()

登录界面

<style>
        .form1 {
            width: 300px;
            margin: 100px auto;
            background-color: cadetblue;
            padding: 50px;
        }

        .item {
            margin-bottom: 20px;
        }

        p {
            color: #3520aa;
            font-size: 14px;
        }
    </style>


</head>
<body>
    <p>表单验证要求：</p>
    <p> 邮箱格式验证:
        邮箱只能是字母数字组合，包含@符号，以.com或.</p>
    <p> 密码强弱验证:
        以大写字母开头，必须是数字字母组合，至少8位</p>
    <p style="color: red;">失去焦点和表单提交时验证</p>
    <form class="form1" action="http://www.baidu.com">
        <div class="item">
            <label for="">用户名:</label>
            <input type="text" name="username">
            <p class="user"></p>
        </div>
        <div class="item">
            <label for="">密&nbsp;&nbsp;&nbsp;码:</label>
            <input type="text" name="password">
            <p class="psw"></p>
        </div>
        <div class="item">
            <label for="">邮&nbsp;&nbsp;&nbsp;箱:</label>
            <input type="text" name="email">
            <p class="email"></p>
        </div>
        <div>
            <input type="submit" value="登录">
        </div>
        
    </form>

    <script>
       

        var formEle = document.querySelector('.form1')
        var userNameInput = document.querySelector('input[name="username"]')
        var passwordInput = document.querySelector('input[name="password"]')
        var emailInput = document.querySelector('input[name="email"]')
        //提示信息节点
        var pEle = document.querySelector('.user')
        var pswEle = document.querySelector('.psw')
        var p3 = document.querySelector('.email')
        //给表单form绑定表单提交事件
        formEle.onsubmit = function (e) {
            e = e || window.event //事件对象
            e.preventDefault()  //阻止表单默认action动作

            var username = userNameInput.value
            var password = passwordInput.value
            var email    = emailInput.value

            //非空验证------------------------------------
            var isUserName = checkU()
            var isPassword = checkP()
            var isEmail = checkEmailNull()
            //非空验证------------------------------------

            //密码强度验证
            //非空验证通过之后
            if(isUserName && isPassword && isEmail){
                let isCheckPasssword = checkPassWord()
                let isCheckEmaill = checkEmail()
                if(isCheckPasssword && isCheckEmaill){
                    let username = userNameInput.value
                    let password = passwordInput.value

                    if(username =='admin' && password=='Thr353010899'){
                        location.href = `./day1/index.html?username=${username}&password=${password}`
                    }
                }
                
            }
        }
        
        //非空验证------------------------------------
        function checkU(){
            var username =userNameInput.value
            //非空验证
            if(username ==''){
                pEle.innerHTML = '用户名不能为空'
                return false
            }else{
                pEle.innerHTML = ''
                return true
            }
        }

        function checkP(){
            var password = passwordInput.value
            //非空验证
            if(password ==''){
                pswEle.innerHTML = '密码不能为空'
                return false
            }else{
                pswEle.innerHTML = ''
                return true
            }
        }

        function checkEmailNull(){
            var email = emailInput.value
            //非空验证
            if(email == ''){
                p3.innerHTML = '邮箱不能为空'
                return false
            }else{
                p3.innerHTML = ''
                return true
            }
        }
        //非空验证------------------------------------


        // 失去焦点验证 ------------------------
            userNameInput.onblur = function(){
                checkU()
            }

            passwordInput.onblur = function (){
                if(!checkP()){
                    return
                }
                checkPassWord()
            }

            emailInput.onblur = function (){
                if(!checkEmailNull()){
                    return
                }
                checkEmail()
            }
        // 失去焦点验证 ------------------------



        //密码强弱------------------------
            function checkPassWord(){
                let password = passwordInput.value
                let reg = /^[A-Z][0-9a-zA-Z]{7,}/
                if(!reg.test(password)){
                    pswEle.innerHTML = '密码是数字字母组合，至少8位,大写开头'
                    return false
                }else{
                    pswEle.innerHTML = ''
                    return true
                }
            }

        //密码强弱------------------------

        //邮箱格式验证----------------------
            function checkEmail(){
                let email = emailInput.value
                let reg = /[0-9a-zA-Z]+@[0-9a-zA-Z]+\.com|\.cn$/
                    if(!reg.test(email)){
                        p3.innerHTML = '邮件只能是字母数字组合，包含@符号，以.com结尾'
                        return false
                    }else{
                        p3.innerHTML = ''
                        return true
                    }
            }


        //邮箱格式验证----------------------
    </script>

黄酱！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跳转主界面

主界面html<body> <header> <h2>后台管理系统 <span class="user-info">账号:admin</span></h2> </header> <div class="container"> </div></body>css<style> * {
复制链接

扫一扫