html+css+js实现简单登陆注册页面

时间：2024-02-22 15:52:00

先看一下最终效果，登陆和注册

 

  

背景图片：

 

附源码：

login.html

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

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(Desert.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        
        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }
        
        #name_trip {
            margin-left: 50px;
            color: red;
        }
        
        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }
        
        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
        
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="loginDiv">
        <form action="" id="form">
            <h1 style="text-align: center;color: aliceblue;">LOGIN  IN</h1>
            <p>User Name:<input id="userNname" type="text"><label id="name_trip"></label></p>

            <p>Password:  <input id="password" type="password"><label id="password_trip"></label></p>

            <div style="text-align: center;margin-top: 30px;">
                <input type="submit" class="button" value="login up">
                <input type="reset" class="button" value="reset">
            </div>
        </form>
    </div>

</body>
</html>

 

register.html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>register</title>
  7     <style>
  8         * {
  9             margin: 0;
 10             padding: 0;
 11         }
 12         
 13         html {
 14             height: 100%;
 15             width: 100%;
 16             overflow: hidden;
 17             margin: 0;
 18             padding: 0;
 19             background: url(Desert.jpg) no-repeat 0px 0px;
 20             background-repeat: no-repeat;
 21             background-size: 100% 100%;
 22             -moz-background-size: 100% 100%;
 23         }
 24         
 25         body {
 26             display: flex;
 27             align-items: center;
 28             justify-content: center;
 29             height: 100%;
 30         }
 31         
 32         #loginDiv {
 33             width: 37%;
 34             display: flex;
 35             justify-content: center;
 36             align-items: center;
 37             height: 650px;
 38             background-color: rgba(75, 81, 95, 0.3);
 39             box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
 40             border-radius: 5px;
 41         }
 42         
 43         #name_trip {
 44             margin-left: 50px;
 45             color: red;
 46         }
 47         
 48         p,
 49         .sexDiv {
 50             margin-top: 10px;
 51             margin-left: 20px;
 52             color: azure;
 53         }
 54         
 55         .sexDiv>input,
 56         .hobby>input {
 57             width: 30px;
 58             height: 17px;
 59         }
 60         
 61         input,
 62         select {
 63             margin-left: 15px;
 64             border-radius: 5px;
 65             border-style: hidden;
 66             height: 30px;
 67             width: 140px;
 68             background-color: rgba(216, 191, 216, 0.5);
 69             outline: none;
 70             color: #f0edf3;
 71             padding-left: 10px;
 72         }
 73         
 74         .button {
 75             border-color: cornsilk;
 76             background-color: rgba(100, 149, 237, .7);
 77             color: aliceblue;
 78             border-style: hidden;
 79             border-radius: 5px;
 80             width: 100px;
 81             height: 31px;
 82             font-size: 16px;
 83         }
 84         
 85         .introduce {
 86             margin-left: 110px;
 87         }
 88         
 89         .introduce>textarea {
 90             background-color: rgba(216, 191, 216, 0.5);
 91             border-style: hidden;
 92             outline: none;
 93             border-radius: 5px;
 94         }
 95         
 96         h1 {
 97             text-align: center;
 98             margin-bottom: 20px;
 99             margin-top: 20px;
100             color: #f0edf3;
101         }
102         
103         b {
104             margin-left: 50px;
105             color: #FFEB3B;
106             font-size: 10px;
107             font-weight: initial;
108         }
109     </style>
110 </head>
111 
112 <body>
113     <div id="loginDiv">
114         <form action="">
115             <h1>REGESTER</h1>
116             <p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>
117 
118             <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p>
119 
120             <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>
121 
122             <p>
123                 用户类型:
124                 <select name="type" id="userType">
125                     <option value="0">请选择</option>
126                     <option value="1">普通类型</option>
127                     <option value="2">VIP类型</option>
128                 </select>
129                 <label id="type_trip"></label>
130             </p>
131 
132             <div class="sexDiv">
133                 用户性别:
134                 <input class="userSex" name="sex" value="boy" type="radio">男
135                 <input class="userSex" name="sex" value="girl" type="radio">女
136                 <label id="sex_trip"></label>
137             </div>
138 
139             <p>
140                 出生日期:
141                 <input id="birthday" type="date">
142                 <label id="birthday_trip"></label>
143             </p>
144 
145             <p class="hobby">
146                 兴趣爱好:
147                 <input type="checkbox" name="hobby" value="read">阅读
148                 <input type="checkbox" name="hobby" value="music">音乐
149                 <input type="checkbox" name="hobby" value="sport">运动
150                 <label id="hobby_trip"></label>
151             </p>
152 
153             <p>
154                 电子邮件:
155                 <input id="email" type="email" required>
156                 <label id="emil_trip"></label>
157             </p>
158 
159 
160             <p> 自我介绍:</p>
161             <div class="introduce">
162                 <textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
163                 <label id="introduce_trip"></label>
164             </div>
165 
166             <p style="text-align: center;">
167                 <input type="submit" class="button" onblur="checkForm()" onclick="return submitT()" value="提交">
168                 <input type="reset" class="button" value="重置">
169             </p>
170         </form>
171     </div>
172 
173 </body>
174 <script type="text/javascript">
175     function trip(obj, trip) {
176         document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
177     }
178 
179     function checkSex() {
180         var sexNum = document.getElementsByName("sex");
181         var sex = "";
182         for (let i = 0; i < sexNum.length; ++i) {
183             if (sexNum[i].checked) {
184                 sex = sexNum[i];
185              }
186 
187          }
188          if (sex == "") {
189              trip("sex_trip", "ERROR!!");
190              return false;
191          } else {
192              trip("sex_trip", "OK!!");
193          }
194     }
195 
196     function checkHobby() {
197         var hobbyNum = document.getElementsByName("hobby");
198         var hobby = "";
199         for (let i = 0; i < hobbyNum.length; ++i) {
200             if (hobbyNum[i].checked) {
201                 hobby = hobbyNum[i];
202             }
203         }
204         if (hobby == "") {
205             trip("hobby_trip", "ERROR!!");
206             return false;
207         } else {
208             trip("hobby_trip", "OK!!");
209 
210         }
211     }
212 
213     function checkSelect() {
214         var myselect = document.getElementById("userType");
215         var index = myselect.selectedIndex;
216         var checkValue = myselect.options[index].value;
217         if (checkValue == 0) {
218             trip("type_trip", "请选择!!");
219             return false;
220         } else {
221             trip("type_trip", "OK!!");
222         }
223     }
224 
225     function checkForm() {
226         checkSelect();
227         checkHobby();
228         checkSex();
229 
230         var trip = document.getElementsByName("em");
231         var tripV = trip.innerHTML();
232         //获取用户名输入项
233         var userNname = document.getElementById("userNname");
234         var uName = userNname.value;
235         if (uName.length < 1 || uName.length > 10) {
236             trip("name_trip", "账号长度为1-10位!!");
237             return false;
238         } else {
239             trip("name_trip", "OK!!");
240 
241         }
242 
243         //密码长度大于6 和确认必须一致 
244         var password = document.getElementById("password");
245         var userPass = password.value;
246         if (userPass.length < 6) {
247             trip("password_trip", "密码要>6位!!");
248             return false;
249         } else {
250             trip("password_trip", "OK!!");
251         }
252 
253         //获取确认密码框的值 var
254         var surePassword = document.getElementById("surePassword");
255         var surePass = surePassword.value;
256         if (userPass != surePass) {
257             trip("surePassword_trip", "两次密码不一致!!");
258             return false;
259         }
260 
261         //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
262         var inputEmail = document.getElementById("email");
263         var uEmail = inputEmail.value;
264         if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
265             trip("emil_trip", "邮箱不合法!!");
266             return false;
267         } else {
268             trip("emil_trip", "OK!!");
269         }
270 
271         // 校验自我介绍
272         var introduceText = document.getElementById("introduceText");
273         var introduce = introduceText.value;
274         if (introduce.length < 3 || uName.length > 60) {
275             trip("introduce_trip", "长度为3-50字!!");
276             return false;
277         } else {
278             trip("introduce_trip", "OK!!");
279         }
280 
281         return true;
282     }
283 
284     function submitT() {
285         if (checkForm()) {
286             return true;
287         } else {
288             return false;
289         }
290     }
291 </script>
293 </html>

相关文章