工具：wampserver+Navicat Premium+Notepad++
（1）在wamp的www目錄下新建文件夾，如下圖：
（2）確保wampserver服務器開啟，在桌面右下角圖標為綠色，在Navicat Premium里寫入了兩條用戶名+密碼的數據
（3）在瀏覽器打開www目錄下的文件，並且打開wampserver里的phpMyAdmin，可以查看mysql數據庫表格的數據
（4）index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
*{margin:0;padding:0}
#login-container{position:relative}
.content img{width:100%}
.header-login{width:350px;height:420px;background:#fff;border-radius:4px;position:absolute;top:25%;right:15%}
.login-header-title{height:60px;text-align:center}
.login-header-title h4{padding-top:32px;font-size:18px;color:#333;font-weight:100}
.tang-pass-login{padding:0 20px 0 20px}
input[type='text'],input[type='password']{width:100%;height:40px;border:0;background:rgb(250, 255, 189);font-weight:100;padding-left:16px}
#form-name span,#form-pass span{position:absolute;top:10px;right:10px;font-weight:100;display:none;cursor:pointer}
#form-name{border:1px solid #eaeaea;border-radius:4px 4px 0 0;position:relative;overflow:hidden}
#form-pass{border:1px solid #eaeaea;border-radius:0 0 4px 4px;border-top:0;position:relative;overflow:hidden}
input{outline:none}
input[type='submit']{width:100%;height:40px;background:#3582f8;border:0;border-radius:4px;color:#fff;font-size:18px;font-weight:400}
input[type='checkbox']{vertical-align:middle}
#form-checkbox{height:38px;line-height:58px}
#form-checkbox span{font-size:14px;vertical-align:middle}
#form-submit{padding:20px 0}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
<!--
<form action="index.php" method="get">
用戶名<input type="text" name="name"/>
密碼 <input type="text" name="password"/>
<input type="submit" value="提交"/>
</form>
-->
<div id="login-container">
<div class="content"><img src='login.jpg'/></div>
<div class="header-login">
<div class="login-header-title">
<h4>賬號密碼登陸</h4>
</div>
<div class="tang-pass-login">
<form action="index.php" method="post">
<p id="form-name">
<input type="text" name="name" id="name" placeholder="用戶名" /><!-- oninput="format()" -->
<span>×</span>
</p>
<p id="form-pass">
<input type="password" name="password" placeholder="密碼"/>
<span>×</span>
</p>
<p id="form-checkbox">
<input type="checkbox" name="meberPass">
<span>下次自動登陸</span>
</p>
<p id="form-submit">
<input type="submit" onclick="find()" value="登陸"/>
</p>
</form>
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
$("#form-name input,#form-pass input").on('change',function(){
if($(this).val()!==''){
$(this).next().css('display','block');
}
})
$("#form-name span,#form-pass span").on('click',function(){
$(this).prev().val("");
$(this).css('display','none')
})
})
if(window.localStorage){ //檢測瀏覽器是否支持html5本地存儲
var storage=window.localStorage; //html5本地存儲
}
/*
提交時對數據存儲處理
*/
function find(){
var user_name=$("[type='text']").val();
var user_pass=$("[type='password']").val();
var data={}; //創建存儲用戶名密碼對象
data.user_name=user_name;
data.user_pass=user_pass;
console.log(data)
//console.log($("input[type='checkbox']").is(':checked'))
if($("input[type='checkbox']").is(':checked')&&user_name!==''&&user_pass!==''){
console.log('用戶名密碼不為空，並且記住了密碼')
var json=JSON.stringify(data)
storage.setItem('form',json);
}
//在未勾選記住密碼時清除本地存儲記錄數據
if(!$("input[type='checkbox']").is(':checked')){
localStorage.clear()
}
}
/*
頁面加載完判斷之前是否勾選記住密碼
*/
window.onload=function(){
var data=storage.getItem('form');
if(data==null){
$("#form-name input,#form-pass input").val("");
}else{
var data=JSON.parse(data);
console.log(data)
$("[type='text']").val(data.user_name);
$("[type='password']").val(data.user_pass);
$("[type='checkbox']").attr("checked",true)
}
}
/*
正則驗證用戶名密碼輸入是否正確
*/
</script>
（5）index.php文件
<?php
header("Content-type:text/html;charset=gb2312");
$username=$_POST['name'];
$password=$_POST['password'];
if(empty($username)||empty($password)){
echo "用戶名與密碼不能為空!";
}else{
//mysqli_connect("主機名或IP地址","用戶名","密碼","數據庫名")
$conn = mysqli_connect("localhost:3306","root","","test") or die("連接數據庫服務器失敗！");
if (mysqli_connect_errno($conn))
{
echo "連接 MySQL 失敗: " . mysqli_connect_error();
}
// 執行查詢
//$result=mysqli_query($conn,"SELECT * FROM user");
$query="select * from user where username ='".$username."' and password='".$password."'";
$result=mysqli_query($conn,$query);
$num = mysqli_num_rows($result); //取得結果集中行的數目
if($num){
echo '登錄成功';
die();
}else{
echo "登錄失敗";
}
}
/*
include("conn.php");
if(empty($username)||empty($password)){
echo "用戶名與密碼不能為空!";
}
*/
?>
只有以數據庫里的數據作為登錄賬號時才可以登錄成功，否則會提示登錄失敗
同樣，暫時沒有對用戶名進行正則處理，只是為了嘗試一下本地對表單的驗證，新手剛剛上路，有很多的問題，多多指教。