JavaScript—简单实现登陆页面

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

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

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

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

  1. 只输入用户名;
    输入用户名错误时效果;

在这里插入图片描述
弹出一个提示框;
alert(“您填写的用户名或密码有误,请在输入一遍”)

当输入的用户名正确时的效果;
在这里插入图片描述
弹出一个提示框 提示你用户输入正确,但密码未填写;
alert(“您的密码不能为空”);

2.只输入密码时;

输入密码错误时效果;
在这里插入图片描述
弹出一个提示框;
alert(“您填写的用户名或密码有误,请在输入一遍”)

当输入的密码正确时的效果;
在这里插入图片描述
弹出一个提示框 提示你密码输入正确,但用户未填写;
alert(“您的用户不能为空”);

  1. 当输入者两者都未填写,直接点击登陆时;效果如下;
    在这里插入图片描述
  2. 当登陆者用户名与密码都输入正确时;将会实现一个页面的跳转;效果如下
    在这里插入图片描述
    其中,跳转的这个页面是我个人闲时完成的;各位看官也可以自己创始;

以下为大家附属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>
  • 31
    点赞
  • 240
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
### 回答1: 可以使用微信的第三方登录功能来实现微信登录。首先,需要在微信公众平台上注册网站应用,然后在应用中配置网站的域名。 接下来,在你的网站上添加一个 "微信登录" 按钮。点击按钮时,会跳转到微信的登录界面,用户在微信上登录后,会跳转回你的网站。 在用户跳转回网站时,可以通过 URL 中的参数(例如,code 参数)来获取用户的信息,并使用这些信息来完成登录。下面是一个简单的示例: ``` // 在网站的 JavaScript 中 const loginButton = document.getElementById('login-button'); loginButton.addEventListener('click', () => { // 跳转到微信的登录界面 window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=YOUR_APP_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code'; }); // 在网站的服务器端(例如,Node.js) app.get('/callback', (req, res) => { // 使用 code 参数获取用户信息 const code = req.query.code; const url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=YOUR_APP_ID&secret=YOUR_APP_SECRET&code=${code}&grant_type=authorization_code`; request(url, (error, response, body) => { if (!error && response.statusCode === 200) { const data = JSON.parse(body); // 使用 access_token 和 openid 获取用户信息 const userUrl = `https://api.weixin.qq.com/sns/userinfo?access ### 回答2: JavaScript可以通过使用微信的开放接口实现微信登录功能。下面是一个简单的步骤: 1. 获取授权码:用户在微信登录页中授权登录后,微信会返回一个授权码。 2. 通过授权码获取访问令牌:使用授权码向微信服务器发送请求,获取访问令牌。访问令牌是访问微信开放接口的必要凭证。 3. 使用访问令牌获取用户信息:使用访问令牌向微信服务器发送请求,获取用户的微信ID和其他相关信息。 4. 验证用户信息:根据获取到的用户ID和其他信息,可以进行进一步的用户验证和处理,例如绑定用户账号或保存用户信息。 具体实现方式: - 在网页中引入微信提供的JavaScript SDK (例如微信公众平台提供的JSSDK) - 调用微信SDK提供的接口进行授权登录,获取授权码。 - 使用授权码向指定接口发送请求,获取访问令牌。 - 使用访问令牌向指定接口发送请求,获取用户信息。 - 根据获取到的用户信息,进行相应的处理和验证。 需要注意的是,微信登录功能需要在微信网页内生效,即只能在微信内部打开实现。为了提供良好的用户体验,还可以实现自动登录功能,使用户再次访问时无需重复登录。 总结,通过JavaScript结合微信开放接口,可以实现微信登录功能,使用户能够用微信账号快速登录网页,并获取用户的微信ID及其他相关信息,以便后续的用户处理。 ### 回答3: JavaScript可以通过微信开放的API来实现微信登录功能。具体步骤如下: 1. 首先,在微信开放平台注册一个开发者账号,并创建一个应用。 2. 在应用设置中获取到开放平台分配给应用的AppID。 3. 在页面中引入微信开放平台提供的JavaScript SDK,可以通过在页面头部添加如下代码来引入: ``` <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> ``` 4. 在登录页面中创建一个DOM元素,用于渲染微信登录按钮。例如: ``` <div id="wx-login-btn"></div> ``` 5. 在页面加载完成后,调用微信登录API,传入AppID和回调函数等参数来创建一个微信登录实例,例如: ``` var obj = new WxLogin({ id: "wx-login-btn", appid: "YOUR_APPID", redirect_uri: "YOUR_REDIRECT_URI", scope: "snsapi_login" }); ``` 其中,`id`为指定的DOM元素id,`appid`为应用的AppID,`redirect_uri`为回调地址,`scope`为授权作用域。 6. 用户点击微信登录按钮后,弹出微信登录窗口,用户在弹出的窗口中输入微信账号密码进行登录。 7. 用户登录成功后,微信开放平台会将回调地址重定向到之前指定的回调地址,并携带一个临时授权票据code。 8. 在回调的页面中,通过获取URL参数或其他方式获取到微信传递的临时授权票据code。 9. 调用后端接口,将临时授权票据code等参数传递给后端,后端通过调用微信开放平台提供的API来获取用户的唯一标识openid等信息。 10. 前端可以根据后端返回的用户信息进行相应的处理,例如显示用户头像、昵称等。 以此完成微信登录功能的实现
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值