<style>
form{
position: relative;
}
span{
position: absolute;
color:red;
display: none;
}
</style>
</head>
<body>
**<!--
登录中，一般都会涉及到form表单，
但是要注意的是，form表单会自带有提交事件
如果我们需要就可以把这个默认事件阻止，
在form标签里，button标签等价于<input type='submit'>
<form action="" method="post">
<input type="submit" value=""/>
</form> -->**
<form>
<span>用户名或者密码错误</span>
</br>
<laber>用户名：</laber><input type="text" class='username' />
</br>
<laber>密码：</laber><input type="text" class='password' />
</br>
<button>登录</button>
</form>
<!--
使用前后端分离的方式，使用ajax的方式发送请求，不是表单的自动提交
1 方式一：可以使用form表单的提交方式
方式二：可以使用button按钮的提交方式
2 获取input元素的信息
3 验证信息的格式，是否符合要求。表单验证
4 发送一个post的请求方式 暗文发送，相对于get安全
ajax发送到后端验证 4个步骤
5 根据后端返回的信息，给客户提醒，格式正确
正确就跳转页面 ，错误就从新填写
-->
<script type="text/javascript">
// 想要操作谁就要先获取这个元素
let nameIpt = document.querySelector('.username')
let passIpt = document.querySelector('.password')
let errorInfo=document.querySelector('span')
// 表单的提交事件
// 绑定一个事件用来获取用户输入的内容
// 1 表单的提交事件
var form = document.querySelector('form') //获取form的表单元素
form.onsubmit = function(e) { //form 表单的提交事件，当表单提交的时候就会触发
// ajax提交方式我们要考虑一下兼容问题
e = e || window.event
// 因为涉及到form表单的自动提交，所以我们要阻止默认行为
e.preventDefault()
// console.log('提交之前，先打印')
// 2 获取完元素后句可以得到里面的值信息
let uname = nameIpt.value
let upass = passIpt.value
// console.log(uname,upass)
// 3验证格式的信息是否符合要求
// 非空验证 和 格式验证（正则）
if (uname === '' || upass === '') {
prompt('用户名或密码为空，请填写完整信息')
return //直接阻止，不在运行后边的代码
}
// if(){在做一个正则的验证uname和upass的填写方式
// }
// 4 发送请求
let url = ''
var xhr = new XMLHttpRequest()
xhr.open('post', url) //post 请求要有请求头
xhr.onload = function() {
console.log(JSON.parse(xhr.responseText))
// 一般为了方便，后端也会也成JSON格式的信息，我们前端也用JSON，就可以解析后端的信息值了
var res = JSON.parse(xhr.response)
// 根据后端给的响应，在这里判断他们的信息值
if (res.code === 0) { //代表失败
// 登录失败就给提示
errorInfo.style.display='block'
} else {
// 成功就跳转页面
window.location.href = '跳转的地址'
}
}
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') //请求头
xhr.send(`username=${uname}&password=${upass}`) //发送请求到后端验证
}
</script>
<!--
<script type="text/javascript">
// button按钮的点击事件
var btn=document.querySelector('button')//获取form表单里的button按钮
btn.onclick=function(e){
// 兼容问题
e=e||window.event
// 阻止默认时间
e.preventDefault()
console.log('打印')
}
</script> -->
</body>
