<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
td:first-child{
text-align: right;
}
</style>
<body>
<form action="">
<table align="center">
<caption><h2>注册</h2></caption>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repass"></td>
</tr>
<tr>
<td>用户昵称:</td>
<td><input type="text" name="nickname"></td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
</body>
<script>
// 表单提交事件
/*
1.表单校验
2.发送请求
页面跳转还是不跳转
不跳转 - 将表单的默认提交行为阻止
通过ajax将数据发送给服务器
*/
// 获取元素
var form = document.querySelector('form');
var usernameInput = document.querySelector('[name="username"]');
var passwordInput = document.querySelector('[name="password"]');
var repassInput = document.querySelector('[name="repass"]');
var nicknameInput = document.querySelector('[name="nickname"]');
// 提交事件
form.addEventListener('submit', onsubmit)
// 定义提交事件函数
function onsubmit(){
// 事件对象阻止默认行为
window.event.returnValue = false
// 验证用户名
var usernameReg = /^[a-z0-9]\w{4,11}$/
// 验证
if(!usernameReg.test(usernameInput.value)){
alert('用户名不符合规则')
return false
}
// 验证密码
var passwordReg = /\w{6,12}/
// 验证
if(!passwordReg.test(passwordInput.value)){
alert('密码不符合规则')
return false
}
// 确认密码
if(repassInput.value != passwordInput.value){
alert('两次密码输入不一致')
return false
}
// 昵称验证
if(nicknameInput.value.trim() === ''){
alert('昵称不能为空')
return false
}
// console.log('验证通过');
// ajax请求
var xhr = new XMLHttpRequest;
xhr.open('post','http://localhost:8888/users/register');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send(`username=${usernameInput.value}&password=${passwordInput.value}&rpassword=${repassInput.value}&nickname=${nicknameInput.value}`)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status>=200 && xhr.status<300){
var res = xhr.responseText;
res = JSON.parse(res)
// console.log(res);
var {code, message} = res;
if(code === 1){
alert(message)
// 跳转到登录页面
location.href = "./-登录.html"
}else{
alert(message)
}
}
}
}
}
</script>
</html>