ajax注册
ajax注册
1.html端
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
form {
width: 600px;
height: 200px;
border: 2px solid #ccc;
margin: 100px auto;
}
.item {
display: flex;
height: 50px;
align-items: center;
}
.item label {
flex: 2;
text-align: right;
padding-right: 20px;
box-sizing: border-box;
}
.item input {
flex: 5;
}
.item span {
flex: 1;
text-align: center;
font-weight: bold;
}
.submit {
text-align: center;
}
.submit button {
width: 150px;
height: 30px;
background-color: pink;
border-color: pink;
color: white;
}
.loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
display: none;
}
style>
head>
<body>
<form>
<div class="item">
<label>用户名label>
<input id="username" name="username">
<span id="usernameTips">span>
div>
<div class="item">
<label>密码label>
<input id="password" name="password">
<span id="passwordTips">span>
div>
<div class="item">
<label>确认密码label>
<input id='password1' disabled='true'>
<span id="password1Tips">span>
div>
<div class="submit">
<button type="button" id="submitBtn">注册button>
div>
form>
<div id="loading" class="loading"><img src="./images/timg.gif" alt="">div>
<script src="QF.js">script>
<script>
// 获取元素
var username = document.getElementById("username");
var password = document.getElementById("password");
var password1 = document.getElementById("password1");
var loading = document.querySelector('#loading');
var usernameTips = document.getElementById("usernameTips");
var passwordTips = document.getElementById("passwordTips");
var password1Tips = document.getElementById("password1Tips");
var submitBtn = document.getElementById("submitBtn");
// 定义两个锁
var username_lock = false;
var password_lock = false;
username.onblur = function() {
//获取当前username输入框中的值
var usernameValue = this.value;
//正则表达式
var reg = /^[^\d]\w{6,13}$/;
//测试正则表达式
var result = reg.test(usernameValue);
if (result) {
usernameTips.innerHTML = "√";
usernameTips.style.color = "green";
console.log('格式正确');
} else {
usernameTips.innerHTML = "×";
usernameTips.style.color = "red";
console.log('格式错误');
}
//假设表单上的验证不通过 剩下的代码就不执行了
if (!result) {
return;
}
//发送ajax请求 验证这个用户名有没有存在
QF.get('http://localhost/day2(http)/checkname.php', {
username: usernameValue
}, function(data) {
if (!data.error) {
//验证成功之后将锁打开
username_lock = true;
usernameTips.innerHTML = data.msg;
usernameTips.style.color = "green";
} else {
username_lock = false;
usernameTips.innerHTML = data.msg;
usernameTips.style.color = "red";
}
})
};
//验证密码
password.onblur = function() {
var value = this.value;
var reg = /^\w{8,16}/;
var result = reg.test(value);
if (result) {
passwordTips.innerHTML = '√';
passwordTips.style.color = 'green';
console.log('密码格式正确');
} else {
password_lock = false;
passwordTips.innerHTML = '×';
passwordTips.style.color = 'red';
console.log('密码格式错误');
}
//将验证密码的框打开 让用户可以输入
if (password.value != '') {
password1.disabled = false;
} else {
password1.disabled = true;
}
}
//验证重复密码是不是跟密码相同
password1.onblur = function() {
var value = this.value;
var value1 = password.value;
if (value === value1) {
password1Tips.innerHTML = '√';
password1Tips.style.color = 'green';
console.log('重复密码格式正确');
} else {
password1Tips.innerHTML = '×';
password1Tips.style.color = 'red';
console.log('重复密码格式错误');
}
//相同的话就把两个锁打开
password_lock = value === value1;
}
submitBtn.onclick = function() {
//判断两个输入框有没有输入正确的信息
if (!(username_lock && password_lock)) {
alert('请重新检查');
return;
}
var user = username.value;
var pass = password.value;
loading.style.display = 'block';
//发送ajax请求
QF.post("http://localhost/day2(http)/regist.php", {
username: user,
password: pass
}, function(data) {
if (!data.error) {
setTimeout(function() {
//成功的话就跳转页面
location.href = "http://localhost/day2(http)/index.html";
}, 1000)
} else {
alert(data.msg)
}
})
}
// 演示 超时
// var xhr = new XMLHttpRequest();
// xhr.onreadystatechange = function() {
// }
// // 设置超时时间
// xhr.timeout = 6000;
// // 设置超时事件
// xhr.ontimeout = function() {
// console.log("超时了")
// }
// xhr.open("post", "timeout.php", true);
// xhr.send()
// setInterval(function() {
// console.log(1);
// }, 1000);
script>
body>
html>
2.验证账号的后台代码
$username=$_GET["username"];
//连接数据库
mysql_connect("localhost","root","root");
//选择数据库
mysql_select_db("gz2006");
//sql语句
$sql="SELECT * FROM user WHERE username='$username'";
//执行sql语句
$result= mysql_query($sql);
//将得到的结果放到一个变量里面
$row=mysql_fetch_array($result);
//如果row不为空的话
if($row){
echo json_encode(array("error"=>1,"msg"=>"用户存在"));
}else{
echo json_encode(array("error"=>0,"msg"=>"可以使用"));
}
?>
3.注册代码
$username=$_POST['username'];
$password=$_POST['password'];
//连接数据库
mysql_connect('localhost','root','root');
//选择数据库
mysql_select_db('gz2006');
//sql语句
$sql="INSERT INTO user VALUES ('$username','$password')";
//执行sql语句
$result=mysql_query($sql);
if($result){
echo json_encode(array('error'=>0,"msg"=>"注册成功"));
}else{
echo json_encode(array('error'=>1,"msg"=>"注册失败"));
}
?>