js实现登录注册功能

一个大长腿

已于 2022-11-14 19:13:13 修改

阅读量1.2k

点赞数

文章标签： javascript java 前端

于 2022-11-14 19:09:47 首次发布

本文链接：https://blog.csdn.net/zybijiso666/article/details/127853208

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<label for="">账号:</label>
		<input type="text" id="account" placeholder="请输入账号">
		<label for="">密码:</label>
		<input type="password" id="password" placeholder="请输入密码">
		<button onclick="sun()">注册</button>
		<p>点击前往<a href="index1.html">登录页面</a></p>
		<script>
			function sun() {
				let zh = document.getElementById('account');
				let mm = document.getElementById('password');
				let arr = localStorage.getItem("data") == null ? [] : JSON.parse(localStorage.getItem("data"));
				if (zh.value == '' || mm.value == '') {
					alert("请输入账号和密码");
					return;
				}
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].zh == zh.value) {
						// 这是当账号重复时
						// alert('注册成功');！！！！这个错了
						alert('账号已存在！')
						zh.value = "";
						mm.value = "";
						return;
					}
				}
				let obje = {
					zh: zh.value,
					mm: mm.value
				}
				arr.push(obje);
				let str = JSON.stringify(arr);
				localStorage.setItem('data', str);
				let status = confirm('注册成功！')
				if(status){
					location.href = 'index1.html';
				}
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<label for="">账号:</label>
		<input type="text" id="account" placeholder="请输入账号">
		<label for="">密码:</label>
		<input type="password" id="password" placeholder="请输入密码">
		<button id="sun" onclick="sun()">登录</button>
		<p>点击前往<a href="index.html">注册页面</a></p>
		
		
		<script>
			function sun() {
				let arr = localStorage.getItem("data") == null ? [] : JSON.parse(localStorage.getItem("data"));
				let zh = document.getElementById('account');
				let mm = document.getElementById('password');
				let status = false;
				if (zh.value == '' || mm.valule == '') {
					alert('请输入账号和密码');
					return;
				}
				console.log(arr);
				for (let i = 0; i < arr.length; i++) {
					console.log(arr[i].zh);
					console.log(zh.value);
					console.log(arr[i].mm);
					console.log(mm.value);
					if (arr[i].zh == zh.value) {
						if (arr[i].mm == mm.value) {
							status = true;
						}
					}
				}
				if (status) {
					alert("登录成功");
				} else {
					alert("登录失败")
					zh.value = '';
					mm.value = '';
					return;
				}
			}
		</script>
	</body>
</html>