Collection
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册页面</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
background: #EEF2FB;
}
div{
box-sizing: border-box;
background: #EEDDC2;
border: 1px #cccccc solid;
padding: 20px;
display: flex;
flex-flow: wrap;
}
form{
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 500px;
padding: 20px;
}
input{
box-sizing: border-box;
padding-left: 5px;
display: flex;
width: 200px;
height: 32px;
}
.span-1 {
box-sizing: border-box;
margin-bottom: 5px;
display: flex;
align-items: center;
width: 100px;
height: 32px;
}
.button-1{
box-sizing: border-box;
padding: 5px 25px;
margin-top: 20px;
}
#namea1,#pwda1{
padding:0 5px;
display: flex;
align-items: center;
font-size: 12px;
color: red;
width: 100px;
height: 32px;
}
</style>
<body>
<div>
<form action="index.php" method="post" id="form1">
<span class="span-1">用户名</span><input id="name" name="name" type="text" value="" placeholder="请输入用户名" onblur="abc()">
<span id="namea1"></span>
<span class="span-1">密码</span><input id="pwd" name="pwd" type="password" value="" placeholder="请输入密码" onblur="abd()">
<span id="pwda1"></span>
<button class="button-1" type="button" onclick="denglu()">登录</button>
<button class="button-1" onclick="dianji()">注册</button>
</form>
</div>
<script>
function abd() {
var pwd = document.getElementById('pwd').value;
var pwda1 =document.getElementById('pwda1');
if (pwd == ''){
pwda1.innerHTML='请输入密码';
}else{
pwda1.innerHTML='';
}
}
function abc() {
var name = document.getElementById('name').value;
var namea1 =document.getElementById('namea1');
if (name == ''){
// alert('请输入用户名');
namea1.innerHTML='请输入用户名';
}else{
namea1.innerHTML= '';
}
}
function denglu() {
var name = document.getElementById('name').value;
var pwd = document.getElementById('pwd').value;
if (name == ''){
alert('请输入用户名');
return;
}
if (pwd == ''){
alert('请输入密码');
return;
}
document.getElementById('form1').submit();
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
php验证
<?php
class denglu{
public $pdo;
public function __construct()
{
// $this->connect();
$this->chaxun();
}
public function connect()
{
// 数据库连接参数
$db = [
'type' => 'mysql',
'host' => 'localhost',
'dbname' => 'cms',
'username' => 'root',
'password' => 'root',
];
// 配置数据源DSN信息
$dsn = "{$db['type']}:host={$db['host']};dbname={$db['dbname']}";
// 连接数据库
try {
$this->pdo = new PDO($dsn, $db['username'], $db['password']);
} catch (PDOException $e) {
die('Connection Failed: ' . $e->getMessage());
}
}
public function chaxun(){
$name= $_POST['name'];
$pwd = $_POST['pwd'];
$this->connect();
$sql = 'select * from `admin`';
$stmt = $this->pdo->prepare($sql);
$stmt->execute();
$abc = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($abc as $v){
$aa = $v['name'];
$ab = $v['pwd'];
}
if ($name !='' && $name === $aa){
if ($pwd !='' && $pwd=== $ab){
header("location:2.html");
echo '登录成功';
}else {
header("location:1.html");
echo '登录失败';
}
}
}
}
$obj = new denglu();点击 "运行实例" 按钮查看在线实例