前端 js 实现简单表单提交

最新推荐文章于 2024-04-05 19:11:50 发布

weixin_34216107

最新推荐文章于 2024-04-05 19:11:50 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/vali/p/6096883.html

本文介绍了一个简单的HTML登录页面实现方式，并演示了如何在登录成功后进行自动跳转。通过JavaScript验证用户名和密码，登录成功后等待5秒自动跳转到管理页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 登录页验证用户身份，登录成功之后等待一定秒数，跳转到操作页面

<html> 
  <head> 
    <title>Login.html</title> 
     
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
    <script type="text/javascript"> 
      function checkuser() { 
         if($('uname' == "lala") && $('pwd') == "123") { 
           return true; 
         }else { 
            return false; 
         } 
      } 
       
      function $(id) { 
        return document.getElementById(id).value; 
      } 
     </script> 
  </head> 
   
  <body> 
    <form action="ok.html"> 
      u:<input type="text" id="uname"/><br> 
      p:<input type="password" id="pwd"/><br> 
      <input type="submit" value="登录" onclick="return checkuser()"/> 
    </form> 
  </body> 
</html>

2. 登录成功页面中，等待5秒

<html> 
  <head> 
    <title>ok.html</title> 
     
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
    <script type="text/javascript"> 
        function tiao() { 
          clearInterval(mytime); 
          window.open("manage.html","_self"); 
        } 
         
        setTimeout("tiao()",5000); 
         
        function changeSec() { 
           //得到myspan值 
           $('myspan').innerText=$('myspan').innerText-1; 
        } 
         
         function $(id) { 
        return document.getElementById(id); 
      } 
        var mytime = setInterval("changeSec()",1000); 
    </script> 
  </head> 
   
  <body> 
    登录成功，<span id="myspan">5</span>秒后自动跳转到管理页面 
  </body> 
</html>