登录表单验证前后端

不多说，直接上图、代码、讲解。

1、效果图：

2、登录表单的结构：

3、登录表单结构样式是一部分，各种验证是主要。
这里是一个收藏各种正则的博客可以看看：http://www.cnblogs.com/zfc2201/archive/2012/12/18/2824107.html

4、讨论解决的问题
我这边重点讲 如何拿到表单输入的 用户名和密码 在后台进行数据库 所保存的数据对比 返回是否登录成功的提示消息。

过程：js拿输入数据（用户名 和 密码） ——> ajax异步上传 ——> php获取上传的数据 与 数据库中的信息 对比 ——> 返回结果

先上表单代码：

<form action="" method="post" id="login_form">
                    <ul>
                        <li>
                            <label for="userName"></label>
                            <input type="text" id="userName" name="userName" placeholder="user" autocomplete="off">
                            <img src="imgs/人.png" alt="用户名">
                            <b></b>
                            <i class="cleanBtn">×</i>
                            <span style="display: none;">&nbsp;请输入用户名！</span>
                        </li>
                        <li>
                            <label for="password"></label>
                            <input type="password" id="password" name="password" placeholder="password" autocomplete="off">
                            <img src="imgs/矢量智能对象.png" alt="密码">
                            <b></b>
                            <i class="cleanBtn">×</i>
                            <span style="display: none;">&nbsp;密码错误！</span>
                        </li>

                    </ul>
                </form>
                    <button class="btn loginBtn">登录</button>
                    <button class="btn PKIBtn">PKI登录</button>
                    <span class="WJMM">忘记密码?</span>

4.1、js拿数据
    这边提供两种：
    1、serialize()表单序列化

var formData = $('#login_form').serialize();
            console.log(formData);//userName=tom&password=123

ajax：

// 拿到数据 发起ajax请求
            $.ajax({
                type:'POST',
                url:'data/login.php',
                data:formData,//userName=tom&password=123
                success:function(data){
                    console.log(data);
                    if (data === 'cunzai') {
                        alert('登录成功，等待跳转');
                    } else {
                        alert('您输入的帐号或者密码不正确，请重新输入。');
                    }
                }
            });

4.2、数据生成对象形式

getFormJson:function(form) {
        var obj = {};
        var arr = $(form).serializeArray();
        console.log(arr);
        $.each(arr, function () {
            if (obj[this.name] !== undefined) {
                if (!obj[this.name].push) {
                    obj[this.name] = [obj[this.name]];
                }
            obj[this.name].push(this.value || '');
            } else {
                obj[this.name] = this.value || '';
            }
        });
        return obj;
    }

5、php进行验证

<?php
// 接收客户端输入的用户名和密码，验证是否正确，向客户端输出cunzai或者bucunzai
header("Content-Type:text/plain;charset=UTF-8");
// 接收数据 userName和password
$userName = $_REQUEST['userName'];
$password = $_REQUEST['password'];

// 连接数据库
$link = mysqli_connect('localhost','root','','login');

// 设置字符集
$sql = "SET NAMES UTF-8";
mysqli_query($link,$sql);

// 验证数据库中的信息
$sql = "SELECT * FROM loginer WHERE userName='$userName' AND password='$password'";
$result = mysqli_query($link,$sql);

if ($result === false) {
    echo 'SQLerr';
}

$row = mysqli_fetch_assoc($result);

if($row){
    echo 'cunzai';
}else{
    echo 'bucunzai';
}

6、数据库表结构

7、测试
当我输入：用户名 tom ， 密码 123

输入： 用户名 tom , 密码 12345

到此一个简单的登录表单就可以了。

希望对那么可爱，还来看我博客的你 有所些许的帮助！