前端做一个简单的登录验证实现页面跳转

2017-12-11  本文已影响22人  丶灰太狼他叔

1、登录页面代码

<html> 
<head> 
    <meta charset="utf-8">
    <title>登录页面</title>    
</head> 

<body> 
    <form action="./wait.html"> 
        用户名:<input type="text" id="uname"/><br> 
        密码:<input type="password" id="pwd"/><br> 
        <input type="submit" value="登录" onclick="return checkuser()"/> 
    </form> 
</body> 
<script type="text/javascript"> 
    function getValue(id) { 
        return document.getElementById(id).value; 
    } 
    function checkuser() { 
        if(getValue('uname') == "magicliu" && getValue('pwd') == "123") { 
            return true; 
        }else { 
            alert("登录名或密码错误!")
            return false; 
        } 
    } 
</script> 
</html> 

form的action url
--为绝对路径时,指向其他站点。如:src="www.example.com/example.htm";
--相对路径时,指向站点内的文件。如:src="example.htm";
当submit点击事件的函数返回为true时,才会进行跳转

2、等待页面代码

<html> 
<head> 
  <meta charset="utf-8">
  <title>等待页面</title> 
</head> 

<body> 
  登录成功,<span id="myspan">5</span>秒后自动跳转到管理页面 
</body> 

  <script type="text/javascript"> 
    function getLabel(id) { 
      return document.getElementById(id); 
    } 
    function changeSec() { 
      //得到myspan值,每秒减一,会进行隐士转换
      getLabel('myspan').innerText=getLabel('myspan').innerText-1; 
    }
    var mytime = setInterval("changeSec()",1000); 
    //五秒后跳转
    function tiao() { 
      clearInterval(mytime); 
      //window.open("./welcome.html","_self"); 
      window.location.href = "./welcome.html";
    } 

    setTimeout("tiao()",5000); 
  </script> 
</html> 

window.open(url)和window.location.href = url两者的区别
----window.open("index.html")只是在新窗口打开index.html,不刷新index.html,浏览器为了阻止弹窗可能会屏蔽
----window.location.href = "./index.html";为在当前窗口打开,并刷新该页面。

3、简单的欢迎页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>登录成功,欢迎来到主页!</h1>
</body>
</html>

这样,就实现了一个简单的登录验证跳转。。

上一篇下一篇

猜你喜欢

热点阅读