form实现登陆操作

简介: <p><span style="white-space:pre"></span>这几天想写个保存cookies的网页,先写了个登陆界面,奈何点击登陆后总是无法正常跳转。经查阅资料和询问高手,总算得以解决。</p> <p>原错误代码如下:</p> <pre name="code" class="javascript"><html><title>SaveCooki

这几天想写个保存cookies的网页,先写了个登陆界面,奈何点击登陆后总是无法正常跳转。经查阅资料和询问高手,总算得以解决。

原错误代码如下:

<html>
<title>SaveCookies</title>
<head>
<script>
	
function login(){
	var user=document.getElementById("user").value;
	var pwd=document.getElementById("pwd").value;
	if((user=="admin")&&(pwd=="123456")){
		window.location.href="http://blog.csdn.net/u010887744";
	}
	else{
		alert("账户名或密码错误!");
	}
}

</script>
</head>
<body><br><br>
<center>
	<form name="Loginform" onsubmit="return login()" >
	欢迎访问小繁的管理系统<br><br>
	账号:<input id="user" name="user" type="text"><br><br>
	密码:<input id="pwd" name="pwd" type="password"><br>
	记住密码:<input name="remember" type="checkbox"><br><br>
	<input name="Login" type="submit" value="登陆" />  
	<input name="reset" type="reset" value="重置" /><br><br>
	</form>
</center>
</body>
</html>
经查阅资料,form实现登陆操作,有其特有的格式, method="POST",登陆跳转链接得写在form标签里,跳转函数得有返回值

修正如下:

<html>
<title>SaveCookies</title>
<head>
<script>
	
function login(){
	var user=document.getElementById("user").value;
	var pwd=document.getElementById("pwd").value;
	if((user=="admin")&&(pwd=="123456")){
		return true;
	}
	else{
		alert("账户名或密码错误!");
		return false;
	}
}

</script>
</head>
<body><br><br>
<center>
	<form method="POST" name="Loginform" action="http://blog.csdn.net/u010887744" onsubmit="return login()" >
	欢迎访问小繁的管理系统<br><br>
	账号:<input id="user" name="user" type="text"><br><br>
	密码:<input id="pwd" name="pwd" type="password"><br>
	记住密码:<input name="remember" type="checkbox"><br><br>
	<input name="Login" type="submit" value="登陆" />  
	<input name="reset" type="reset" value="重置" /><br><br>
	</form>
</center>
</body>
</html>



不过,经我测试,不返回值也可以正常跳转,望大神不吝赐教
if((user=="admin")&&(pwd=="123456")){
		//return true;
	}
	else{
		alert("账户名或密码错误!");
		//return false;
	}
当然,个人觉得,form实现登陆跳转过于麻烦,此处只是研究学习。不用form登陆更方便。
需要用到 window.location.href="http://blog.csdn.net/u010887744";  以及  onclick="login()
方法如下:
<html>
<title>SaveCookies</title>
<head>
<script>
	
function login(){
	var user=document.getElementById("user").value;
	var pwd=document.getElementById("pwd").value;
	if((user=="admin")&&(pwd=="123456")){
		window.location.href="http://blog.csdn.net/u010887744";
	}
	else{
		alert("账户名或密码错误!");
	}
}

</script>
</head>
<body><br><br>
<center>
	欢迎访问小繁的管理系统<br><br>
	账号:<input id="user" name="user" type="text"><br><br>
	密码:<input id="pwd" name="pwd" type="password"><br>
	记住密码:<input name="remember" type="checkbox"><br><br>
	<input name="Login" type="submit" value="登陆" onclick="login()"/>  
	<input name="reset" type="reset" value="重置" /><br><br>
	
</center>
</body>
</html>






目录
相关文章
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
510 1
 H5微信外支付(移动端浏览器)
|
前端开发 开发者 Docker
深入探索Docker Compose:简化多容器应用的部署
深入探索Docker Compose:简化多容器应用的部署
316 0
|
9月前
|
JavaScript 前端开发 算法
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外,mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
安全 Java Linux
docker阿里云镜像加速
我们都知道因为某些原因我们访问外网都是比较慢的,比如我们使用maven下载依赖时是一个道理,同样的使用docker从docker.hub上下载镜像也是比较慢的。针对这种访问官网比较慢的情况有两种方案,第一种就是使用国内的仓库,第二种就是使用一个加速器。这里我们配置docker的镜像加速从来来实现提速。
14166 1
docker阿里云镜像加速
|
Java 应用服务中间件 Linux
Docker 部署 SpringBoot 的两种方法,后一种一键部署超好用!
FROM:表示基础镜像,即运行环境 VOLUME /tmp创建/tmp目录并持久化到Docker数据文件夹,因为Spring Boot使用的内嵌Tomcat容器默认使用/tmp作为工作目录 ADD:拷贝文件并且
Docker 部署 SpringBoot 的两种方法,后一种一键部署超好用!
【Latex】PPT画图,导出emf格式,word插入emf文件并导出pdf,pdf裁剪并导出eps文件,latex插入eps文件
【Latex】PPT画图,导出emf格式,word插入emf文件并导出pdf,pdf裁剪并导出eps文件,latex插入eps文件
1249 0
|
监控 数据可视化 Java
SpringCloud学习(十五):Hystrix图形化Dashboard搭建与实战
SpringCloud学习(十五):Hystrix图形化Dashboard搭建与实战
376 0
SpringCloud学习(十五):Hystrix图形化Dashboard搭建与实战
|
C++ Windows
Visual Studio老版本安装
Visual Studio老版本安装
Visual Studio老版本安装
|
网络虚拟化 数据安全/隐私保护
计算机网络实验(华为eNSP模拟器)——第十二章 VLAN集中管理协议(VCMP)
计算机网络实验(华为eNSP模拟器)——第十二章 VLAN集中管理协议(VCMP)
计算机网络实验(华为eNSP模拟器)——第十二章 VLAN集中管理协议(VCMP)
|
XML JavaScript 小程序
mybatisx 插件的踩坑使用
mybatisx 插件的踩坑使用
1072 0