注冊頁面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="width: 85%">注冊</header>
<form class="layui-form">
<!--輸入用戶名-->
<div class="layui-input-inline">
<div class="layui-inline" style="width: 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="width: 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="width: 85%">
<button type="submit" lay-submit lay-filter="sub" class="layui-btn" lay->注冊</button>
</div>
<br/>
<p style="width: 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添加唯一約束, 前三個字段添加飛空約束.
實現效果:
