html+js界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>登录名称：<input type="text" id="uname" onblur="check()"></p>
<p>登录密码：<input type="password" id="upwd"></p>
<p>確認密碼：<input type="password" id="upwd2" onblur="check2()"></p>
<p>用戶郵箱：<input type="email" id="uemail"></p>
<p>联系方式：<input type="text" id="utel"></p>
<p>用户姓名：<input type="text" id="truename"></p>
<p>用户性别：<select id="gender">
<option value="man">男</option>
<option value="women">女</option>
</select></p>
<p><input type="button" value="注册" onclick="reg()"></p>
<script>
//定义一个变量来控制函数是否执行
var checkreg=true;
//创建xhr对象
function CreateXhr(){
var xhr=window.XMLHttpRequest?new window.XMLHttpRequest():ActiveXObject("microsoftXMLHttp");
return xhr
}
//检查用户名在数据库中是否已经存在
function check() {
var xhr=CreateXhr();
var uname1=document.getElementById("uname").value
xhr.open("get",`php/check.php?uname=${uname1}`,true);
xhr.onreadystatechange=function () {
if(xhr.readyState==4&&xhr.status==200){
var res=xhr.responseText;
//根据check.php的返回值判断用户名是否可用
if(res=="0"){
checkreg=true;
console.log("用户名可用")
}else {
checkreg=false
console.log("用户名不可用")
}
}
}
xhr.send(null)
}
//检查两次密码是否一致
function check2() {
let upwd=document.getElementById("upwd").value;
let upwd2=document.getElementById("upwd2").value;
if(upwd!=upwd2){
checkreg=false;
alert("两次输入的密码不一样")
}else {
checkreg=true
}
}
//注册函数
function reg() {
if (checkreg == true) {
var xhr = CreateXhr();
xhr.open("post", "php/reg.php", true)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = xhr.responseText;
alert(res)
}
}
//post方法设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var uname = document.getElementById("uname").value;
var upwd = document.getElementById("upwd").value;
var uemail = document.getElementById("uemail").value;
var utel = document.getElementById("utel").value;
var truename = document.getElementById("truename").value;
var gender = document.getElementById("gender").value;
var msg = `uname=${uname}&upwd=${upwd}&uemail=${uemail}&utel=${utel}&truename=${truename}&gender=${gender}`;
xhr.send(msg);
}else {
alert("请修改用户名之后再注册")
}
}
</script>
</body>
</html>
检查用户名是否可用php
<?php
/**
* Created by PhpStorm.
* User: Bohn
* Date: 2018/8/25
* Time: 16:50
*/
require ("init.php");
$uname=$_REQUEST["uname"];
$sql="select * from emp where uname='$uname'";
$result=mysqli_query($conn,$sql);
$row=mysqli_fetch_row($result);
if($row==null){
echo "0";
}else{
echo "1";
}
?>注册交互php
<?php
/**
* Created by PhpStorm.
* User: Bohn
* Date: 2018/8/25
* Time: 16:15
*/
require ("init.php");
$uname=$_REQUEST["uname"];
$upwd=$_REQUEST["upwd"];
$uemail=$_REQUEST["uemail"];
$utel=$_REQUEST["utel"];
$truename=$_REQUEST["truename"];
$ugender=$_REQUEST["gender"];
$sql="insert into emp(uname,upwd,uemail,utel,truename,gender) values ('$uname','$upwd','$uemail','$utel','$truename','$ugender')";
$result=mysqli_query($conn,$sql);
if($result==true){
echo "注册成功";
}else{
echo "注册失败";
}
?>xuezi数据库(mysql)
drop database if exists xuezi;
create database xuezi;
use xuezi;
create table emp(
uname VARCHAR(64),
upwd VARCHAR(64),
uemail VARCHAR(64),
utel VARCHAR(64),
truename VARCHAR(64),
gender VARCHAR(64)
);
insert into emp values('xioaming','123','[email protected]','1234567','xiaomingming','man');
insert into emp values('xioaliu','123','[email protected]','1234567','xiaoliuliu','man');
