注册页面register.html源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="login-main">
<header class="layui-elip" style=" 85%">注册</header>
<form class="layui-form">
<!--输入用户名-->
<div class="layui-input-inline">
<div class="layui-inline" style=" 85%">
<input type="text" name="uname" id="uname" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
</div>
<!--判断用户名是否可用的图标 -->
<div class="layui-inline">
<i class="layui-icon" hidden id="ri" style="color: green; font-weight: bold">�</i>
<i class="layui-icon" hidden id="le" style="color: red; font-weight: bold">ဆ</i>
</div>
</div>
<!--输入密码-->
<div class="layui-input-inline">
<div class="layui-inline" style=" 85%">
<input type="password" name="uname" id="pwd" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-input-inline login-btn" style=" 85%">
<button type="submit" lay-submit lay-filter="sub" class="layui-btn" lay->注册</button>
</div>
<br/>
<p style=" 85%">
<a href="pages/login.html" class="fl">已有账号？立即登录</a>
<a href="javascript:;" class="fr">忘记密码？</a>
</p>
</form>
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form', 'layer','jquery'], function () {
var form = layui.form;
var $ = layui.jquery;
//为表单添加blur事件
$('#uname').blur(function () {
var uname = $('#uname').val();
//ajax异步刷新
$.ajax({
url:'pages/checkUser.php',
type:'post',
dataType:'text',
data:{uname:uname},
//验证用户名是否可用
success:function (data) {
if(data=='1'){
//layer.msg('可以注册')
$('#ri').removeAttr('hidden');
$('#le').attr('hidden','hidden');
}else{
//layer.msg('用户名已被占用')
$('#ri').attr('hidden','hidden');
$('#le').removeAttr('hidden');
}
}
})
});
//添加表单监听事件
form.on('submit(sub)',function () {
$.ajax({
url:'pages/regist.php',
type:'post',
data:{uname:$('#uname').val(),
pwd:$('#pwd').val()},
dataType:'text',
//判断注册状态
success:function (data) {
if (data==1){
layer.msg('注册成功')
}else{
layer.msg('注册失败')
}
}
})
//防止页面跳转
return false;
});
});
</script>
</body>
</html>
用户名检测页面checkUser.php源代码:
<?php
//接收表单数据
$uname = $_POST['uname'];
//判断用户名是否为空
if($uname == null){
echo '0';
};
//数据库连接语句, 参数包含:服务器地址,用户名,登录密码,数据库名称,默认端口)
$db = new mysqli('localhost','root','','0104test','3306');
//判断是否成功连接数据库
if (mysqli_connect_error()) {
echo '0';
exit();
}
//设置编码格式 (相当重要) 如果不设置从数据库查出来的数据就是乱码
$db->query("SET NAMES UTF8");
//查询语句 拼接字符串是个技术活
$sql = "select * from t_user WHERE uname ="."'"."$uname"."'";
//echo $sql;
//执行查询语句
$result = $db->query($sql);
//执行 fetch_assoc()函数
$na = $result->fetch_assoc();
//判断用户名是否存在
if ($na == null){
echo'1';
}else{
echo '0';
}
?>
执行注册页面regist.php源代码:
<?php
//获取用户名
$uname = $_POST['uname'];
//获取密码
$pwd = $_POST['pwd'];
//连接数据库
$db = new mysqli('localhost','root','','0104test');
//设置编码格式,防止从数据库查询到数据转为乱码
$db->query("SET NAMES UTF8");
//sql语句 字符串拼接的形式
$sql = "insert into t_user VALUES (null,'"."{$uname}'".",'"."{$pwd}'".",'php小白')";
//执行数据库语句
$result = $db->query($sql);
//var_dump($result);
//判断数据库添加信息是否成功
if($result){
echo '1';
}else{
echo '0';
}
?>
数据库表格式:
其中 id为主键且自增 ,uname添加唯一约束, 前三个字段添加飞空约束.
实现效果:
