本地搭建服务器环境,对表单提交的用户名密码进行验证

工具:wampserver+Navicat Premium+Notepad++

(1)在wamp的www目录下新建文件夹,如下图:

(2)确保wampserver服务器开启,在桌面右下角图标为绿色,在Navicat Premium里写入了两条用户名+密码的数据

(3)在浏览器打开www目录下的文件,并且打开wampserver里的phpMyAdmin,可以查看mysql数据库表格的数据

(4)index.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!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文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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 "用户名与密码不能为空!";
    }
    */
?>

  

只有以数据库里的数据作为登录账号时才可以登录成功,否则会提示登录失败

同样,暂时没有对用户名进行正则处理,只是为了尝试一下本地对表单的验证,新手刚刚上路,有很多的问题,多多指教。

posted @   小菜菜爱吃菜  阅读(2573)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
阅读排行:
· 盘点!HelloGitHub 年度热门开源项目
· DeepSeek V3 两周使用总结
· 02现代计算机视觉入门之:什么是视频
· C#使用yield关键字提升迭代性能与效率
· 回顾我的软件开发经历(1)
点击右上角即可分享
微信分享提示