JavaScript—简单实现登陆页面

开发工具与关键技术：DW/浏览器；简单使用javascript。
作者：刘佳明
撰写时间：2019年 2 月 3 日

本篇为大家呈现一个简单的页面登陆；

要实现一个登陆的页面主要的构造在这为大家简单阐述一下；
主要的css样式构造就不多说；现网络是的登陆页面也是五花八门；下面是我个人在之前所完成的一个登陆页面；
JavaScript—简单实现登陆页面

其中，要完成一个登陆页面的实现，是在将用户的信息填写是JavaScript中的点击登陆对信息的正确与否来进行判断；
当前登陆页面的判断会出现以下情况；

只输入用户名；
输入用户名错误时效果；

JavaScript—简单实现登陆页面
弹出一个提示框；
alert(“您填写的用户名或密码有误，请在输入一遍”)

当输入的用户名正确时的效果；
JavaScript—简单实现登陆页面
弹出一个提示框提示你用户输入正确，但密码未填写；
alert(“您的密码不能为空”);

2.只输入密码时；

输入密码错误时效果；
JavaScript—简单实现登陆页面
弹出一个提示框；
alert(“您填写的用户名或密码有误，请在输入一遍”)

当输入的密码正确时的效果；
JavaScript—简单实现登陆页面
弹出一个提示框提示你密码输入正确，但用户未填写；
alert(“您的用户不能为空”);

当输入者两者都未填写，直接点击登陆时；效果如下；
当登陆者用户名与密码都输入正确时；将会实现一个页面的跳转；效果如下

其中，跳转的这个页面是我个人闲时完成的；各位看官也可以自己创始；

以下为大家附属JavaScript处的代码

<script>
	function myFunction(){
		var x = document.getElementById("demo").value;
		var z=document.getElementById("name").value;
		var y = document.getElementById("damo");
		
		/*console.log(z);*/
			/*alert('恭喜发财')*/
		if(x==""&&z==""){
				alert("表格内不能为空");
					}
		else{
			if(x=="123456"&&z=="my"){
			
				y.href = "图片查看/project.html";
			
				}
				else if(x==""&&z=="my"){

					alert("您的密码不能为空");
				
				}
				else if(x=="123456"&&z==""){

					alert("您的用户名不能为空");
				
				}
			else{
				alert("您填写的用户名或密码有误，请在输入一遍")
			}
		}
		
	}
	</script>

JavaScript—简单实现登陆页面

相关推荐