登录表单验证前后端

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

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或者bucunzaiheader("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

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

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