HTML+CSS+JS实现简单的登录账号密码判断

李長庚

于 2023-01-12 15:47:06 发布

阅读量684

点赞数

本文链接：https://blog.csdn.net/xybhua/article/details/128661078

版权

js 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

不讲虚的，直接上干货

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div>
			<span>用户名:</span>
			<input type="text" placeholder="请输入用户名..." id="username">
			<span>密码:</span>
			<input type="password" placeholder="请输入用户名..." id="passwd">
			<input type="button" value="登录" onclick="login()">
			<input type="button" id="btnClear" value="清除" onclick="doClear()" />
		</div>
		<script type="text/javascript">
			let accountAll = [{ // 存储账户json数据的数组
					username: 123,
					passwd: 'qwe'
				},
				{
					username: 456,
					passwd: 'asd'
				},
				{
					username: 789,
					passwd: 'zxc'
				}
			]
			function login() { //登陆判断
				let username = document.getElementById('username').value;
				let passwd = document.getElementById('passwd').value;
				let account = accountAll.filter(function(e) {
					return e.username == username
				})[0]; // 筛选账号返回数组，不存在则返回空数组
				if (!account) {
					alert('账户不存在');
				} else {
					if (account.username == username && account.passwd == passwd) {
						alert('登陆成功');
					} else {
						alert('密码错误');
					}
				}
			}
			function doClear() { //获取页面所有的input框，是text和password框，内容=空串
				let inputs = document.getElementsByTagName("input");
				for (let i = 0; i < inputs.length; i++) {
					if (inputs[i].type == 'text' || inputs[i].type == 'password') {
						inputs[i].value = '';
					}
				}
			}
			//给清除按钮增加onclick事件
			let btnClear = document.getElementById('btnClear');
			btnClear.addEventListener('click', function() {
				doClear();
			});
		</script>
	</body>
</html>