MyWeb/reg.php at master · qiutianpili/MyWeb · GitHub

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员注册Beta</title>
    <style>
        .main{
            /* 设置边框和居中 */
            border: 1px solid #0000FF;
            margin: 0 auto;
            width: 80%;
            max-width:1000px;
            text-align: center;
            padding: 1.5rem 1rem;
            box-shadow: 0 6px 18px rgba(16,24,40,0.06);
            border-radius:8px;
        }
        .red{
            color: red;
        }
        .current{
            color:brown;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="main">
        <?php
        include 'nav.php';
        ?>
    <form action="postReg.php" method="post"> <!--onsubmit="return check()"-->
        <table border="1" align="center" style="width: 90%;border-collapse: collapse;max-width: 500px;" cellpadding="10">
            <tr>
                <td align="right">用户名</td>
                <td align="left">
                    <label>
                        <input style="padding: 5px" name="username" placeholder="请输入用户名"><span class="red">*</span>
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td align="left">
                    <label>
                        <input style="padding: 5px" type="password" name="pw" placeholder="请用数字和字母构成"><span class="red">*</span>
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right">再次输入密码</td>
                <td align="left">
                    <label>
                        <input style="padding: 5px" type="password" name="rpw" placeholder="再次确认您的密码"><span class="red">*</span>
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right">邮箱</td>
                <td align="left">
                    <label>
                        <input style="padding: 5px" name="email">
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right">性别</td>
                <td align="left">
                    <label>
                        <input style="padding: 5px" type="radio" name="sex" value="男">男
                    </label>
                    <label>
                        <input style="padding: 5px" type="radio" name="sex" value="女">女
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right">爱好</td>
                <td align="left">
                    <label>
                        <input style="padding: 5px" type="checkbox" name="fav[]" value="听音乐">听音乐
                    </label>
                    <label>
                        <input style="padding: 5px" type="checkbox" name="fav[]" value="打游戏">打游戏
                    </label>
                    <label>
                        <input style="padding: 5px" type="checkbox" name="fav[]" value="跑步">跑步
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <input style="padding: 5px" type="submit">
                </td>
                <td align="left">
                    <input style="padding: 5px" type="reset">
                </td>
            </tr>
        </table>
    </form>
</div>
<script>
    function check() {
        let username = document.getElementsByName('username')[0].value.trim();
        let usernameReg = /^[a-zA-Z0-9]{3,10}$/;
        if (!usernameReg.test(username)) {
            alert("用户名只能是由大小写字母、数字构成，且长度为3-10");
            return false;
        }
        let pw = document.getElementsByName('pw')[0].value.trim();
        let pwReg = /^[a-zA-Z0-9_\-*]{6,10}$/;
        if (!pwReg.test(pw)) {
            alert("密码只能是由大小写字母、数字、下划线、-和*构成，且长度为6-10");
            return false;
        }
        let rpw = document.getElementsByName('rpw')[0].value.trim()
        if(rpw !== pw){
            alert("密码必须和重复密码相同！")
            return false;
        }
        let email = document.getElementsByName('email')[0].value.trim();
        let emailReg = /^[a-zA-Z0-9_\-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
        if (email) {
            if (!emailReg.test(email)) {
                alert("邮箱格式不对！");
                return false;
            }
        }
    }
</script>
</body>
</html>