记录:原生js写登陆页面

最新推荐文章于 2024-05-13 16:21:10 发布

白白66

最新推荐文章于 2024-05-13 16:21:10 发布

阅读量188

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_60073892/article/details/128199587

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/login.css">
    <meta name="viewport"
        content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="./js/flexible.js"></script>
    <script src="./js/vue.min.js"></script>

</head>
<style></style>

<body>
    <div id="app">
        <div class="login">登录</div>
        <div class="accountPassword">
            <div class="account">
                <img src="./state/account.png" class="leftIcon" alt="">
                <input type="text" id="account" autofocus v-model="accountInput" @blur="keyInputFu1">
                <i><img src="./state/chadiao.png" class="chadiao" alt="" onclick="empty1()"></i>
                <span v-if="errorToast1" class="errorText1">请输入正确的手机号</span>

            </div>
            <div class="password">
                <img src="./state/password.png" class="leftIcon" alt="">
                <input type="password" id="password" v-model="pwdInput" @blur="keyInputFu2">
                <i>
                    <img src="./state/chadiao.png" class="chadiao" alt="" onclick="empty2()">
                    <img src="./state/biyan.png" alt="" class="yanjin" onclick="switchingMode()">
                </i>
                <span v-if="errorToast2" class="errorText1">请输入正确的密码</span>
            </div>
            <div class=" loginButton" onclick="login()">登录</div>
        </div>
    </div>
</body>

<script>
    function empty1() {
        document.querySelector('#account').value = ''
    }
    function empty2() {
        document.querySelector('#password').value = ''
    }
    function switchingMode() {
        var password = document.getElementById("password");
        var yanjin = document.querySelector('.yanjin')
        if (password.type != 'text') {
            password.type = 'text'
            yanjin.src = './state/zhengyan.png'
        } else {
            password.type = 'password'
            yanjin.src = './state/biyan.png'
        }
    }

    function login() {
        // var phoneRrg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;//手机号码
        // var pass = /^.{6,16}$/;//6-16位字符
        var a = document.querySelector('#account')
        var b = document.querySelector('#password')
        if (a != '' || b != '') {
            console.log('登陆了');
        } else {
            console.log(document.querySelector('#account').value);
            console.log('不能为空');
        }
    }
    //创建vue.js示例
    var app = new Vue({
        el: '#app',
        data: {
            accountInput: '',
            pwdInput: '',
            errorToast1: false,
            errorToast2: false,
        },
        watch: {
            // aa: {
            //     handler(newName) {
            //         // ...
            //         console.log(newName, '233333333334')
            //         // this.functList = newName;
            //     },
            //     // immediate: true
            // }
        },
        methods: {
            keyInputFu1(event) {
                let phoneRrg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;//手机号码
                if (!phoneRrg.test(this.accountInput)) {
                    this.errorToast1 = true
                } else {
                    this.errorToast1 = false
                }
            },
            keyInputFu2(event) {
                let phoneRrg = /^.{6,16}$/;//密码
                if (!phoneRrg.test(this.pwdInput)) {
                    this.errorToast2 = true
                } else {
                    this.errorToast2 = false
                }
            }

        },
        mounted: function () {

        },
        created: function () {

        },

    })

</script>

</html>

css

body {
    margin: 0;
    background: url('../state/bgg@2x.png') no-repeat;
    background-size: 100%;
}

#app {
    width: 100%;
    height: 100%
}

.login {
    width: 100%;
    text-align: center;
    font-size: .84rem;
    font-weight: 400;
    margin-top: 2.3333rem;
    margin-bottom: 1.56rem;
    color: rgba(255, 255, 255, 1);
}

.accountPassword {
    margin-left: 50%;
    transform: translateX(-50%);
    width: 9.1121rem;
    height: 7.7804rem;
    opacity: 1;
    border-radius: .4673rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 21.03px 0px rgba(10, 40, 102, 0.05);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    box-sizing: border-box;
}

.account,
.password {
    width: 7.7103rem;
    height: 1.4953rem;
    opacity: 1;
    border-radius: .7467rem;
    background: rgba(41, 121, 254, 0.1);
    position: relative;
}

.account .leftIcon {
    position: absolute;
    top: 50%;
    left: .7067rem;
    transform: translateY(-50%);
    width: .5508rem;
    height: .5841rem;
}

.account i {
    position: absolute;
    right: .7067rem;
    top: 50%;
    width: .3467rem;
    height: .3467rem;
    transform: translateY(-50%);
}

.password .leftIcon {
    position: absolute;
    top: 50%;
    left: .7067rem;
    transform: translateY(-50%);
    width: .5508rem;
    height: .5841rem;
}

.password i,
.account i {
    position: absolute;
    right: .7067rem;
    top: 50%;
    width: .3467rem;
    height: .3467rem;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.password i {
    right: 1.0667rem;
}

.password i .chadiao,
.account i .chadiao {
    width: .3467rem;
    height: .3467rem;
}


.errorText1 {
    position: absolute;
    left: .2667rem;
    bottom: -0.5rem;
    color: red;
}

.password .yanjin {
    /* position: absolute;
    left: none;
    right: .6667rem;
    top: 50%;
    transform: translateY(-50%); */
    width: .45rem;
    margin-left: .32rem;
}

#account,
#password {
    background: none;
    outline: none;
    border: none;
    background-color: #e9f1fe;
    color: #000;
    width: 100%;
    height: 100%;
    border-radius: .7476rem;
    /* background: rgba(41, 121, 254, 0.1); */
    text-indent: 1.5467rem;
}


.loginButton {
    width: 7.7067rem;
    height: 1.4933rem;
    border-radius: .7467rem;
    background: rgba(41, 121, 254, 1);
    font-size: .4267rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 1.4933rem;
    /* line-height: 64px; */
}

需要引入flexible.js,适配各种手机