动态html页面。用html实现注册和登录的一些问题。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动态html页面。用html实现注册和登录的一些问题。相关的知识，希望对你有一定的参考价值。

注册页面：用html写一个很简单的注册页面，例如只有：账户名，密码，确认密码三项内容。两个按钮：注册和验证。点击验证，弹出提示框，显示当前填写内容。点击注册，弹出注册成功，并且注册时填写的信息要在的登录页面使用。
登录页面：两个输入框帐户名，密码。两个按钮：登录，注册。点击注册跳转到注册页面。输入相应的内容后点击登陆弹出登陆成功。但是如果输入的内容不是刚才注册时注册成功的帐户名密码，则显示登录失败，请先注册。
求大神帮我写出这两个简单的页面。我是想学习其中的某些知识。写的简单点就好，不用添加css样式。重点是实现验证的功能，以及用刚才注册的账户密码才可以登录。
可用cookie技术

登录页面 login.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<script>

window.addEventListener('load',function()

var form = document.forms[0];

form.addEventListener('submit',function(e)

e.preventDefault();

var userName = form.userName.value;
var pwd = form.pwd.value;

var userInfo = JSON.parse(localStorage.getItem(userName));

if(userInfo && userInfo.pwd === pwd)
return alert('登录成功!');


alert('登录失败 请先注册!');

);

document.getElementsByTagName('button')[0].addEventListener('click',function(e)

e.preventDefault();

location.href = 'regist.html';

);
);

</script>
</head>
<body>
<form action="#">
<input name="userName" type="text" placeholder="账户名" required>
<input name="pwd" type="password" placeholder="密码" required>
<input type="submit" value="登录">
<button>注册</button>
</form>
</body>
</html>

注册页面 regist.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>regist</title>
<script>

window.addEventListener('load',function()

var form = document.forms[0];
var getUserInfo = function()

var value =;

for(var i=0,len=form.elements.length;i<len;i++)

 var el = form.elements[i];

if(/text|password/.test(el.type))
value[el.name] = el.value;




return value;
;
form.addEventListener('submit',function(e)

e.preventDefault();

var userInfo = getUserInfo();

localStorage.setItem(userInfo.userName,JSON.stringify(userInfo));

alert('注册成功!');

);

document.getElementsByTagName('button')[0].addEventListener('click',function(e)

e.preventDefault();

var value = getUserInfo();
var out = [];
for(var name in value)
out.push(name+'='+value[name]);
alert(out.join(','));

);
);

</script>
</head>
<body>
<form action="#">
<input name="userName" type="text" placeholder="账户名" required>
<input name="pwd" type="password" placeholder="密码" required>
<input name="confirmPwd" type="password" placeholder="确认密码" required>
<input type="submit" value="注册">
<button>验证</button>
</form>
</body>
</html>

 参考技术A 光用HTML实现不了。

你要注册，还要验证，你至少也要学一种后台语言吧。 参考技术B 纯前端达不到保存的要求，刷新一下就全部归零了追问

按你的想法，不管怎样，能实现就可以了，我不太懂

 参考技术C 纯前端吗？那注册的信息是要本地保存？追问

按你的想法，不管怎样，能实现就可以了，我不太懂

追答

好的，追问里面留个邮箱或者私信我QQ，或者我下午把代码贴上来。

追问

还没发？急用啊

php注册和登录界面的实现案例

下面小编就为大家带来一篇php注册和登录界面的实现案例(推荐)。挺不错的，现在就分享给大家，也给大家做个参考。

当初我觉得一个网站上注册和登录这两个功能很神奇，后来自己研究一下发现其实道理很简单，接下来看一下怎么实现的吧。。。。

我在我的电脑上建了几个文件：

login.html (登录页面)

register.html（注册页面）

success.html（登录成功跳转页面）

return.html（注册成功页面）

login.php

register.php

登录界面和注册界面以及success.html并没有

什么都是些html标记如下：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录界面</title>
</head>
 
<body>
<form method="post" action="login.php">
账号：
<input type="text" name="usernamel"><br/><br/>
密码：
<input type="password" name="passwordl">
<input type="submit" value="登录" name="subl">
<a href="http://127.0.0.1:8080/register.html">没有账号，注册</a>
</form>
</body>
</html>

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>会员注册</title>
</head>
 
<body>
<form method="post" action="register.php">
账  户：
<input type="text" name="username"><br/><br/>
密  码：
<input type="password" name="password"><br/><br/>
密码确认：
<input type="password" name="password2">
<input type="submit" value="注册" name="sub">
</form>
</body>
</html>

return.html是注册成功之后呈现的页面，里面有一段js代码是用来定时返回登录界面的

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
 
<body>
注册成功！<br/>
5秒后返回登录界面<br/>
你也可以直接点击回到<a href="http://127.0.0.1:8080/login.html">登录页面</a>
<script type="text/javascript">
setTimeout("ren()",5000);
function ren()
{
  window.location="http://127.0.0.1:8080/login.html";
}
 
</script>
 
</body>
</html>

register.php这是与注册页面相对应后台页面

 
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
<?php
$link=mysql_connect("localhost","root","207207");//链接数据库
header("Content-type:text/html;charset=utf-8");
if($link)
  { 
    //echo"链接数据库成功";
    $select=mysql_select_db("login",$link);//选择数据库
    if($select)
    {
      //echo"选择数据库成功！";
      if(isset($_POST["sub"]))
      {
        $name=$_POST["username"];
        $password1=$_POST["password"];//获取表单数据
        $password2=$_POST["password2"];
        if($name==""||$password1=="")//判断是否填写
        {
          echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."请填写完成！"."\"".")".";"."</script>";
          echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."http://127.0.0.1:8080/register.html"."\""."</script>";   
          exit;
        }
        if($password1==$password2)//确认密码是否正确
        {
        $str="select count(*) from register where username="."‘"."$name"."‘";
        $result=mysql_query($str,$link);
        $pass=mysql_fetch_row($result);
        $pa=$pass[0];
        if($pa==1)//判断数据库表中是否已存在该用户名
        {
         
        echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."该用户名已被注册"."\"".")".";"."</script>";
        echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."http://127.0.0.1:8080/register.html"."\""."</script>";  
        exit;
        }
         
         
        $sql="insert into register values("."\""."$name"."\"".","."\""."$password1"."\"".")";//将注册信息插入数据库表中
        //echo"$sql";
        mysql_query($sql,$link);
        mysql_query(‘SET NAMES UTF8‘);
        $close=mysql_close($link);
        if($close)
        {
          //echo"数据库关闭";
          //echo"注册成功！";
          echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."http://127.0.0.1:8080/return.html"."\""."</script>";   
        }
        }
        else
        {
          echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."密码不一致！"."\"".")".";"."</script>";
          echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."http://127.0.0.1:8080/register.html"."\""."</script>";   
        }
      }
    }
  }
?>

login.php登录界面对应后台文件

 
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
<?php
　　header("Content-type:text/html;charset=utf-8");
$link=mysql_connect("localhost","root","207207");
if($link)
{
  $select=mysql_select_db("login",$link);
  if($select)
  {
    if(isset($_POST["subl"]))
    {
      $name=$_POST["usernamel"];
      $password=$_POST["passwordl"];
      if($name==""||$password=="")//判断是否为空
      {
        echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."请填写正确的信息！"."\"".")".";"."</script>";
        echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."http://127.0.0.1:8080/login.html"."\""."</script>";
        exit;
      }
      $str="select password from register where username="."‘"."$name"."‘";
      mysql_query(‘SET NAMES UTF8‘);20       $result=mysql_query($str,$link);
      $pass=mysql_fetch_row($result);
      $pa=$pass[0];
      if($pa==$password)//判断密码与注册时密码是否一致
      {
        echo"登录成功！";
        echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."http://127.0.0.1:8080/success.html"."\""."</script>";
      }
      { 
        echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."登录失败！"."\"".")".";"."</script>";
        echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."http://127.0.0.1:8080/login.html"."\""."</script>";
      }
    }
     
  }
}
?>

 

以上就是为大家带来的php注册和登录界面的实现案例(推荐)全部内容了。

以上是关于动态html页面。用html实现注册和登录的一些问题。的主要内容，如果未能解决你的问题，请参考以下文章

网页中的用户登录、注册，怎么制作

如何在注册页面实现动态检测用户名的功能?

html 返回登录前页面

想问一下用html静态页+ajax访问动态页返回数据+js将数据添加到html页面这种方法的可行性

HTML问题解决-退出登录后，页面只有部分刷新到登录界面

WEB程序设计（后台登陆页面和用户注册页面设计）