目录
用户登录案例
需求：
1.点击登录时，判断用户名和密码的长度
用户名要求：最少8位，中英文和数字组成
密码：最少6位
2.提交数据和服务器通信
3.提示登录情况
主要功能一
判断用户名和密码长度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录案例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/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使用
作用：快速收集表单元素的值
语法如图
