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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

 

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>064title>
 6 head>
 7 <body>
 8 <h1 align="center">黄庚华h1>
 9 <h1>064111h1>
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 registerh2>
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()" >registerbutton>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 = "
" 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 }

 

转载于:https://www.cnblogs.com/-064/p/7763846.html

你可能感兴趣的:(完成登录与注册页面的前端)