码迷,mamicode.com
首页 > 其他好文 > 详细

完成登录与注册页面的前端

时间:2017-10-31 22:21:45      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:href   turn   数字   css   cer   center   length   static   err   

完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>064</title>
 6 </head>
 7 <body>
 8 <h1 align="center">黄庚华</h1>
 9 <h1>064111</h1>
10 <div id="container" style="width: 400px">
11     <div id="header" style="background-color: darkgreen"><h2>登陆</h2></div>
12     <div id="content"></div>
13     <from>
14         用户名:<input type="text" name="usename" aria-placeholder="请输入用户名"><br>
15         密码: <input type="password">
16         <br>
17         <input type="radio" name="role" value="stu">student
18         <input type="radio" name="role" value="tea">teacher
19         <input type="checkbox" name="vehicle" value="Bike">I have a bike
20         <input type="button" value="Hello world!">
21 
22     </from>
23     <div id="footer" style="background-color: darkgreen"><h2>版权</h2></div>
24 </div>
25 <hr>
26 <a href="#">友情链接</a>
27 </body>
28 </html></html>
 1 function fnLogin() {
 2         var oUname=document.getElementById("uname");
 3         var oUpass=document.getElementById("upass");
 4         var oError=document.getElementById("error_box");
 5         if (oUname.value.length < 6 || oUname.value.length > 12) {
 6                    oError.innerHTML = "用户名要6-20位"
 7                }
 8               if (oUpass.value.length < 6 || oUpass.value.length > 12) {
 9                    oError.innerHTML = "密码要6-12位"
10               }
11   
12               if ((oUname.value.length < 6 || oUname.value.length > 20) && (oUpass.value.length < 6 || oUpass.value.length > 12)) {
13                   oError.innerHTML = "用户名和密码要6-20位"             }
14 }

 

注册页两次密码是否一致

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>注册</title>
 6     <link href="../static/css/register.css" rel="stylesheet" type="text/css">
 7     <script src="../static/js/register.js"></script>
 8 
 9 </head>
10 
11 <body>
12 <div><h1>打开代码的世界</h1></div>
13   <div class="aa"><script>document.write("loading....")</script>
14     </div>
15 <div class="flex-container">
16 
17     <div class="box">
18 <h2>welcome to register</h2>
19         <div class="input_box">
20             请输入名称 <input id="uname" type="text" placeholder="请输入你的名称">   </div><br>
21         <div class="input_box">
22             请输入密码 <input id="upass" type="password" placeholder="请输入登录密码"></div><br>
23          <div class="input_box">
24             确认密码 <input id="upass1" type="password" placeholder="请再次输入密码"></div><br>
25         <div id="error_box"><br></div>
26          <div class="input_box">
27             <button onclick="fnLogin()" >register</button></div>
28     </div>
29 </div>
30 </body>
31 </html>

 

 1 function fnEnroll() {
 2     var zcoUname = document.getElementById("zcuname")
 3     var zcoError = document.getElementById("zcerror_box")
 4     var zcoUword1 = document.getElementById("zcuword1")
 5     var zcoUword2 = document.getElementById("zcuword2")
 6  
 7     zcoError.innerHTML = "<br>"
 8     if (zcoUname.value.length < 6 || zcoUname.value.length > 12) {
 9         zcoError.innerHTML = "用户名为6到12位";
10         return
11     } else if( (zcoUname.value.charCodeAt(0) >= 48) && (zcoUname.value.charCodeAt(0) <= 57)){
12         zcoError.innerHTML = "用户名首位不能是数字";
13         return
14     } else for (var i = 0; i < zcoUname.value.length; i++) {
15         if ((zcoUname.value.charCodeAt(i) < 48) || (zcoUname.value.charCodeAt(i) > 57) && (zcoUname.value.charCodeAt(i) < 97) || (zcoUname.value.charCodeAt(i) > 122)) {
16             zcoError.innerHTML = "用户名只能是字母与数字";
17             return
18         }
19     }
20  
21     if ((zcoUword1.value.length < 6) || (zcoUword1.value.length > 20)) {
22         zcoError.innerHTML = "密码为6到20位";
23         return
24     }
25     if (zcoUword1.value()!=zcoUword2.value()){
26         zcoError.innerHTML="两次密码不一致"
27     }
28     window.alert("注册成功!!")
29 }

 

完成登录与注册页面的前端

标签:href   turn   数字   css   cer   center   length   static   err   

原文地址:http://www.cnblogs.com/-064/p/7763846.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!