PHP 會員管理系統 - 註冊表單判斷
| 1 min read
在開始新增或是測試帳號有沒有重複,要先記得把資料庫重複的資料清空,判斷才會正確喔! $_POST["Username"]
的值要跟資料庫的名稱相同。
用 JavaScript 監聽帳號有沒有跟資料庫的帳號重複
<script>
var flag_username = false;
var flag_password = false;
var flag_re_password = false;
var flag_email = false;
var flag_check_uni = false;
$(function(){
$("#btn_register").bind("click",reg);
//監聽帳號
$("#username").bind("input propertychange", function(){
if($(this).val().length < 6){
$("#err_username").text('帳號不得小於 6 個字');
$("#err_username").css("color","#ff0000");
flag_username = false;
}else{
$("#err_username").text('');
flag_username = true;
//到資料庫去判斷帳號是否有重複
$.ajax({
type: "POST",
url: "20200526-register-api-uni.php",
data: {Username: $("#username").val()}, //Username的值要跟資料庫的名稱一樣
success: function(data){
if(data){
$("#err_username").html("此帳號已存在!");
$("#err_username").css("color", "red");
flag_check_uni = false;
}else{
$("#err_username").html("此帳號可以使用");
$("#err_username").css("color", "#0BF844");
flag_check_uni = true;
}
},
error: function(){
alert("check uni api error");
}
});
}
});
$("#password").bind("input propertychange", function(){
if($(this).val().length < 8){
$("#err_password").text('密碼不得小於 8 個字');
$("#err_password").css("color","#ff0000");
flag_password = false;
}else{
$("#err_password").text('');
flag_password = true;
}
});
$("#re_password").bind("input propertychange", function(){
if($(this).val() != $("#password").val() ){
$("#err_re_password").text('確認密碼不相同');
$("#err_re_password").css("color","#ff0000");
flag_re_password = false;
}else{
$("#err_re_password").text('');
flag_re_password = true;
}
});
$("#email").bind("input propertychange", function(){
if($(this).val().length < 10){
$("#err_email").text('Email不得小於 10 個字');
$("#err_email").css("color","#ff0000");
flag_email = false;
}else{
$("#err_email").text('');
flag_email = true;
}
});
});
function reg(){
if(flag_username && flag_password && flag_re_password && flag_email && flag_check_uni){
//測試用
console.log($("#username").val());
console.log($("#password").val());
console.log($("#re_password").val());
console.log($("#email").val());
/*實際串接資料庫 20200519-php-Insert-data.php*/
$.ajax({
type: "POST",
url: "20200519-php-Insert-data.php",
data: {Username: $("#username").val(), Password: $("#password").val(), Email: $("#email").val()},
success: show,
error: function(){
alert('連接 20200519-php-Insert-data.php 有錯誤');
}
});
}else{
alert('欄位有錯誤!');
}
};
function show(data){
alert(data);
location.href="20200519-login.html";
};
</script>
php 後端
<?php
$p_username = $_POST["Username"];
$servername = "localhost";
$username = "member";
$password = "123456";
$dbname = "member";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if(!$conn){
die('連線失敗'.mysqli_connect_error($conn));
}
$sql = "SELECT * FROM usermember WHERE Username = '$p_username'";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) == 1){ //判斷重複
echo true;
}else{
echo false;
}
mysqli_close($conn);
?>