用户登录案例和form-serialize

用户登录案例
form-serialize使用

用户登录案例

需求：

1.点击登录时，判断用户名和密码的长度

用户名要求：最少8位，中英文和数字组成

密码：最少6位

2.提交数据和服务器通信

3.提示登录情况

主要功能一

判断用户名和密码长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录案例</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@55.2.2/dist/css/bootstrap.min.css" />
	
	</head>
	<body>
		<div class="container">
			<h3>欢迎，登录</h3>
			<!-- 登录结果-提示框 -->
			<div class="alert alert-success" role="alert">
				提示消息
			</div>
			<!-- 表单 -->
			<div class="form_wrap">
				<form action="">
					<div class="mb-3">
						<label for="username" class="form-label">账号名</label>
						<input type="text" class="form-control username" />
					</div>
					<div class="mb-3">
						<label for="password" class="form-label">密码</label>
						<input type="password" class="form-control password"/>
					</div>
					<button type="button" class="btn btn-primary btn-login" style="margin-top: 5px;margin-left: 9px;">登录</button>
				</form>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
		<script>
			// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
			// 1.1 登录-点击事件
			document.querySelector('.btn-login').addEventListener('click',()=>{
				//1.2 获取用户名和密码
				const username= document.querySelector('.username').value
				const password = document.querySelector('.password').value
				// console.log(username,password)
				// 1.3 判断长度
				if (username.length < 8){
					console.log('用户名必须大于等于8位')
					return//阻止代码继续执行
				}else if(password.length < 6){
					console.log('密码必须大于等于6位')
					return//阻止代码继续执行
				}
				console.log('提交数据')
			})
 		</script>
	</body>
</html>

在这里使用了return来阻止代码继续执行。当用户名或密码长度不符合要求时，会执行相应的 console.log() 语句输出提示信息，并使用 return 阻止代码继续执行。

同时这里有一个div标签内有一个属性role，该属性指定这个div标签再用户界面中所扮演的角色。在这种情况下，role='alert'表示这个标签是一个警告通知。

基于axios提交用户名和密码并判断登录结果

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录案例</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@55.2.2/dist/css/bootstrap.min.css" />
	
	</head>
	<body>
		<div class="container">
			<h3>欢迎，登录</h3>
			<!-- 登录结果-提示框 -->
			<div class="alert alert-success" role="alert">
				提示消息
			</div>
			<!-- 表单 -->
			<div class="form_wrap">
				<form action="">
					<div class="mb-3">
						<label for="username" class="form-label">账号名</label>
						<input type="text" class="form-control username" />
					</div>
					<div class="mb-3">
						<label for="password" class="form-label">密码</label>
						<input type="password" class="form-control password"/>
					</div>
					<button type="button" class="btn btn-primary btn-login" style="margin-top: 5px;margin-left: 9px;">登录</button>
				</form>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
		<script>
			// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
			// 1.1 登录-点击事件
			document.querySelector('.btn-login').addEventListener('click',()=>{
				//1.2 获取用户名和密码
				const username= document.querySelector('.username').value
				const password = document.querySelector('.password').value
				// console.log(username,password)
				// 1.3 判断长度
				if (username.length < 8){
					console.log('用户名必须大于等于8位')
					return//阻止代码继续执行
				}else if(password.length < 6){
					console.log('密码必须大于等于6位')
					return//阻止代码继续执行
				}
				// 1.4 基于axios提交用户名和密码
				axios({
					url:'https://hmajax.itheima.net/api/login',
					method:'POST',
					data:{
						username:username,
						password:password,
					}
				}).then(result => {
					console.log(result)//这里打印输出服务器返回的数据
					console.log(result.data.message)//打印登录的结果
				}).catch(error=>{
					console.log(error)//打印登录失败的返回数据
					console.log(error.response.data.message)//打印登录的结果
				})
			})
 		</script>
	</body>
</html>

步骤总结

首先绑定一个按钮点击事件

再获取用户名和密码

再判断用户名和密码是否符合要求

最后再提交判断服务器内是否有这个用户名和密码

案例-用户登录提示框的样式

目标：使用提示框，反馈提示消息

1.显示提示框
2.不同的提示文字msg，有不同的样式isSuccess(true成功绿色，false失败红色)
3.过2秒后，让提示框自动消失

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录案例</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@55.2.2/dist/css/bootstrap.min.css" />
		<style>
			.show{
				display: none;
			}
			.red{
				background-color: orangered;
			}
			.green{
				background-color: lawngreen;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h3>欢迎，登录</h3>
			<!-- 登录结果-提示框 -->
			<div class="alert alert-success show" role="alert" style="border: 1px solid blue;text-align: center;opacity: 0.5;">
				提示消息
			</div>
			<!-- 表单 -->
			<div class="form_wrap">
				<form action="">
					<div class="mb-3">
						<label for="username" class="form-label">账号名</label>
						<input type="text" class="form-control username" />
					</div>
					<div class="mb-3">
						<label for="password" class="form-label">密码</label>
						<input type="password" class="form-control password"/>
					</div>
					<button type="button" class="btn btn-primary btn-login" style="margin-top: 5px;margin-left: 9px;">登录</button>
				</form>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
		<script>
			// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
			// 目标2： 使用提示框，反馈提示消息
			// 2.1 获取提示框
			const myAlert = document.querySelector('.alert')
			/**2.2 封装提示框函数，重复调用，满足提示需求
				功能：
				1.显示提示框
				2.不同的提示文字msg，有不同的样式isSuccess(true成功绿色，false失败红色)
				3.过2秒后，让提示框自动消失
			**/ 
			function alerFn(msg,isSuccess){
				// 1.显示提示框
				myAlert.classList.remove('show')
				
				// 2.实现提示消息
				myAlert.innerHTML = msg
				// 2.2 根据提示情况修改颜色
				const colo = isSuccess ? 'green' : 'red'
				myAlert.classList.add(colo)
				
				// 3.显示后过两秒自动隐藏
				setTimeout(()=>{
					myAlert.classList.add('show')
					myAlert.classList.remove('colo')//这里确保能被重置
				},2000)
			}
			
			
			// 1.1 登录-点击事件
			document.querySelector('.btn-login').addEventListener('click',()=>{
				//1.2 获取用户名和密码
				const username= document.querySelector('.username').value
				const password = document.querySelector('.password').value
				// console.log(username,password)
				// 1.3 判断长度
				if (username.length < 8){
					alerFn('用户名必须大于等于8位',false)
					console.log('用户名必须大于等于8位')
					return//阻止代码继续执行
				}else if(password.length < 6){
					alerFn('密码必须大于等于6位',false)
					console.log('密码必须大于等于6位')
					return//阻止代码继续执行
				}
				// 1.4 基于axios提交用户名和密码
				axios({
					url:'https://hmajax.itheima.net/api/login',
					method:'POST',
					data:{
						username:username,
						password:password,
					}
				}).then(result => {
					alerFn(result.data.message,true)
					console.log(result)//这里打印输出服务器返回的数据
					console.log(result.data.message)//打印登录的结果
				}).catch(error=>{
					console.log(error)//打印登录失败的返回数据
					console.log(error.response.data.message)//打印登录的结果
				})
			})
 		</script>
	</body>
</html>

主要添加的代码如下

form-serialize使用

作用：快速收集表单元素的值

语法如图

posted @ 2024-02-04 16:44 scxlzb 阅读(97) 评论(0) 收藏举报

刷新页面返回顶部

学习坟墓