js實現登陸與註冊功能
阿新 • • 發佈：2021-09-23
本文例項為大家分享了實現登陸與註冊功能的具體程式碼，供大家參考，具體內容如下
1、首先在study檔案中尋找到一個檔名叫 “www” 的檔案 在裡面建立html，js，php檔案；
2、在Navicat 軟體中連線到phpstudy的；
3、在Navicat 軟體中尋找一個 並建立一個表格；
4、書寫html程式碼（如下圖1）編寫簡單的登錄檔單結構 並通過js 給表單驗證；點選註冊跳轉到php檔案中；
5、php程式碼（如下圖2） 首先獲取html程式碼中表單的值 然後查詢表單的資料 進行判斷 如果使用者存在就跳轉回到上個html頁面 使用者名稱設定成功後資料會自動儲存到Navicat 軟體中的先前建立的表格中，儲存之後跳轉到登陸頁面；
6、跳轉到登陸頁面 （如圖3）；進入登陸頁面後可以輸入之前註冊的使用者名稱和密碼進行驗證 驗證過程是首先驗證使用者名稱是否存在然後驗證密碼是否正確 ； 使用者名稱不存在跳轉回去重新輸入 密碼不正確提使用者 重新輸入密碼；都正確之後跳轉到登陸的php檔案中；
7、跳轉到登陸的php檔案中（如圖4）；獲取登陸名到資料庫中進行驗證 ；驗證哪裡出問題就進行彈窗提示；如果驗證成功就把使用者名稱儲存一份到瀏覽器中；
8、登陸成功後就可以跳轉到我們的首頁進行訪問
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
// 修訂編碼格式
header("content-type:text/html;charset=utf8");
// 提取username的值
$username = $_POST['username'];
// 提取password的值
$password = $_POST['password'];
// 提取tel的值
$tel = $_POST['tel'];
// 提取email的值
$email = $_POST['email'];
// 連線資料庫
$con = mysqli_connect("localhost","root","test");
// 查詢資料庫裡面的使用者名稱
$res = mysqli_query($con,"select * from register where username='$username'");
// 查詢一個數據庫的使用者名稱
$row = mysqli_fetch_assoc($res);
// 判斷使用者名稱是否存在
if($row){
echo ("<script>
alert('使用者名稱已被佔用');
location.href='register.html';</script>");
}else{
// 給資料庫新增資料
$res = mysqli_query($con,"insert register(username,password,tel,email) values('$username','$password',$tel,'$email')");
// 判斷
if($res){
KTiREzx echo ("<script>
客棧 alert('註冊成功');
location.href='land.html';</script>");
}else{
echo ("<script>
alert('註冊失敗請重新註冊');
location.href='register.html';</script>");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" cwww.cppcns.comontent="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="land.php" method="POST">
<table>
<caption>登陸</caption>
<tr>
<td>使用者名稱：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><input type="submit" value="登陸"></td>
</tr>
</table>
</form>
</body>
<script>
var form = document.querySelector('form');
var username = document.querySelector('[name="username"]');
var password = document.querySelector('[name="password"]');
var btn1 = document.querySelector('[type="submit"]');
form.onsubmit = function(){
var reg = /^\w{4,16}$/;
if(!reg.test(password.value.trim())){
alert('請正確輸入密碼');
return false;
}
}
</script>
</html>
<?php
header('content-type:text/html;charset=utf8');
$username = $_POST['username'];
$password = $_POST['password'];
$con = mysqli_connect("localhost","test");
$res = mysqli_query($con,"select * from register where username = '$username'");
$row = mysqli_fetch_assoc($res);
if($row){
if($row['password'] === $password){
setcookie('username',$username);
echo ("<script>
alert('登陸成功');
location.href='comment.html';</script>");
}else{
echo ("<script>
alert('密碼錯誤');
location.href='land.html';</script>");
}
}else{
echo ("<script>
alert('使用者名稱不存在');
location.href='land.html';</script>");
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。