<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form {
width: 400px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
padding: 30px;
}
label {
width: 120px;
display: inline-block;
text-align: right;
}
input {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>注册页面</h1>
<form id="form">
<label for="username">用户名:</label><input type="text" name="username" id="username">
<br>
<label for="mobile">手机号:</label><input type="text" name="mobile" id="mobile">
<br>
<label for="password">密码:</label><input type="text" name="password" id="password">
<br>
<label for="againPassword">再次输入密码:</label><input type="text" id="againPassword">
<br>
<button type="submit">注册账号</button>
</form>
<script src="./md5.js"></script>
<script>
var form = document.getElementById('form');
var username = document.getElementById('username');
var mobile = document.getElementById('mobile');
var password = document.getElementById('password');
var againPassword = document.getElementById('againPassword');
form.onsubmit = function (e) {
// 阻止表单提交的默认事件
// event.preventDefault();
e.preventDefault();
// 验证用户名
if (!username.value) return alert('请输入用户名!');
if (username.value.length > 10) return alert('用户名最多输入10个字符!')
// 验证手机号
var patt = /^1[3-9]\d{9}$/;
if (!patt.test(mobile.value)) return alert('请输入正确的手机号!');
// 验证密码
if (!(/\d/.test(password.value) && /[A-z]/.test(password.value) && password.value.length >= 5)) return alert('密码必须带有数字和字母,且不能小于5位');
// 验证再次输入密码
if (password.value !== againPassword.value) return alert('两次输入的密码不一致');
// 验证通过,发起注册请求
var formData = new FormData(form);
// 将密码加密
formData.set('password', hex_md5(password.value))
// var xhr = new XMLHttpRequest();
// xhr.open('post', 'http://39.103.177.112:3008/api/register');
// xhr.send(formData);
// xhr.onreadystatechange = function() {
// if (xhr.readyState === 4 && xhr.status === 200) {
// console.log(xhr.responseText);
// var res = JSON.parse(xhr.responseText);
// // 判断是否注册成功,如果成功跳转至登录页
// if (res.code === 1) {
// location.href = './login.html';
// } else {
// alert(res.message);
// }
// }
// }
fetch('http://39.103.177.112:3008/api/register', {
method: 'post',
body: formData
}).then(res => res.json()).then(res => {
console.log(res);
// 判断是否注册成功,如果成功跳转至登录页
if (res.code === 1) {
location.href = './login.html';
} else {
alert(res.message);
}
})
}
</script>
</body>
</html>