登录页面的制作

登录页面的制作

三月 28, 2021

简单的登录页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body {
            background: url('https://api.mz-moe.cn/img.php') no-repeat;
            background-size: 100% auto;
            /*设置背景图片*/
        }

        #loginbox {
            width: 30%;
            height: auto;
            margin: 0 auto;
            margin-top: 15%;
            text-align: center;
            background: #00000060;
            padding: 20px 50px;
        }

        #loginbox h2 {
            color: white;
        }

        #loginbox .form {
            margin-top: 50px;
        }

        #loginbox .form .item {
            margin-top: 15px;
        }

        #loginbox .form .item input {
            width: 180px;
            font-size: 18px;
            border: none;
            border-bottom: 2px solid white;
            padding: 5px 10px;
            background: #ffffff00;
            color: #ffffff;
            outline-width: 0px;
            /*去除输入框的外边框*/
        }

        #loginbox button {
            margin-top: 20px;
            width: 180px;
            height: 30px;
            font-size: 20px;
            border: 0;
            border-radius: 15px;
            background-color: #85FFBD;
            background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);



        }
    </style>
</head>
<div>
    <div id="loginbox">
        <h2>欢迎注册</h2>
        <form class="form" action="#" method="get">
            <div class="item">
                <input type="text" placeholder="姓名" id="fullname" maxlength="4" required>
            </div>
            <div class="item">
                <input type="text" placeholder="手机号" id="phonenumber" maxlength="11" required>
            </div>
            <div class="item">
                <input type="text" placeholder="邮箱" id="mailaddress" required>
            </div>
            <div>
                <button type="submit" id="btn" onclick="formData()">注册</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    "use strict"
    function formData() {
        //进行fullname的正则比较
        var tName = fullnameTest();
        //比较电话格式
        var rel = phonenumberTest();
        //比较电子邮件
        var email = mailaddressTest();
        if (tName == 1 && rel == 1 && email == 1) {
            alert("恭喜你注册成功");
            return true;

        } else {
            var btn = document.getElementsByName("btn");
            btn.setAttribute("type", "button");
            return false;
        }

    }
    function fullnameTest() {
        //获得真实姓名的标签
        var trueName = document.getElementById("fullname");
        //获得内容,与创建的正则表达式进行匹配
        var regExp = /^[\u4e00-\u9fa5]+$/;
        if (regExp.test(fullname.value)) {
            return 1;
        } else {
            alert("真实姓名输入不和法，姓名必须是汉字");
            return 0;
        }
    }
    function phonenumberTest() {
        var rel = document.getElementById("phonenumber");
        var regExp = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
        if (regExp.test(rel.value)) {
            return 1;
        } else {
            alert("电话格式输入错误");
            return 0;
        }
    }
    function mailaddressTest() {
        var email = document.getElementById("mailaddress");
        var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        if (reg.test(email.value)) {
            return 1;
        } else {
            alert("电子邮件格式错误");
            return 0;
        }
    }

</script>
</body>

</html>

效果图