layui-注册界面

注册页面register.html源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>注册页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="login-main">
    <header class="layui-elip" style="width: 85%">注册</header>
    <form class="layui-form">
        <!--输入用户名-->
        <div class="layui-input-inline">
            <div class="layui-inline" style="width: 85%">
                <input type="text" name="uname" id="uname" required  lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
            </div>
            <!--判断用户名是否可用的图标 -->
            <div class="layui-inline">
                <i class="layui-icon" hidden id="ri" style="color: green; font-weight: bold"></i>
                <i class="layui-icon" hidden id="le" style="color: red; font-weight: bold">ဆ</i>
            </div>
        </div>
        <!--输入密码-->
        <div class="layui-input-inline">
            <div class="layui-inline" style="width: 85%">
                <input type="password" name="uname" id="pwd" required  lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
            </div>

        </div>
        <div class="layui-input-inline login-btn" style="width: 85%">
            <button type="submit" lay-submit lay-filter="sub" class="layui-btn" lay->注册</button>
        </div>
        <br/>
        <p style="width: 85%">
            <a href="pages/login.html" class="fl">已有账号？立即登录</a>
            <a href="javascript:;" class="fr">忘记密码？</a>
        </p>
    </form>
</div>


<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer','jquery'], function () {
        var form  = layui.form;
        var $  = layui.jquery;
        //为表单添加blur事件
        $('#uname').blur(function () {
            var  uname = $('#uname').val();
            //ajax异步刷新
            $.ajax({
                url:'pages/checkUser.php',
                type:'post',
                dataType:'text',
                data:{uname:uname},

                //验证用户名是否可用
                success:function (data) {
                    if(data=='1'){
                        //layer.msg('可以注册')
                        $('#ri').removeAttr('hidden');
                        $('#le').attr('hidden','hidden');

                    }else{
                        //layer.msg('用户名已被占用')
                        $('#ri').attr('hidden','hidden');
                        $('#le').removeAttr('hidden');
                    }
                }
            })
        });
        //添加表单监听事件
        form.on('submit(sub)',function () {
            $.ajax({
                url:'pages/regist.php',
                type:'post',
                data:{uname:$('#uname').val(),
                    pwd:$('#pwd').val()},
                dataType:'text',
                //判断注册状态
                success:function (data) {
                    if (data==1){
                        layer.msg('注册成功')
                    }else{
                        layer.msg('注册失败')
                    }
                }
            })
            //防止页面跳转
            return false;
        });

    });
</script>
</body>
</html>

用户名检测页面checkUser.php源代码:

<?php

//接收表单数据
$uname = $_POST['uname'];
//判断用户名是否为空
if($uname == null){
    echo '0';
};

//数据库连接语句, 参数包含:服务器地址,用户名,登录密码,数据库名称,默认端口)
$db = new mysqli('localhost','root','','0104test','3306');
//判断是否成功连接数据库
if (mysqli_connect_error()) {
    echo '0';
    exit();
}
//设置编码格式 (相当重要) 如果不设置从数据库查出来的数据就是乱码
$db->query("SET NAMES UTF8");
//查询语句   拼接字符串是个技术活
$sql = "select * from t_user WHERE uname ="."'"."$uname"."'";
//echo $sql;

//执行查询语句
$result = $db->query($sql);

//执行 fetch_assoc()函数
$na = $result->fetch_assoc();
//判断用户名是否存在
if ($na == null){
    echo'1';
}else{
    echo '0';
}

?>

执行注册页面regist.php源代码:

<?php

//获取用户名
$uname = $_POST['uname'];
//获取密码
$pwd = $_POST['pwd'];

//连接数据库
$db = new mysqli('localhost','root','','0104test');
//设置编码格式,防止从数据库查询到数据转为乱码
$db->query("SET NAMES UTF8");
//sql语句   字符串拼接的形式
$sql = "insert into t_user VALUES (null,'"."{$uname}'".",'"."{$pwd}'".",'php小白')";
//执行数据库语句
$result = $db->query($sql);
//var_dump($result);
//判断数据库添加信息是否成功
if($result){
    echo '1';
}else{
    echo '0';
}

?>

数据库表格式:

　　其中 id为主键且自增 ,uname添加唯一约束, 前三个字段添加飞空约束.

实现效果:

 

　

 

posted @ 2018-03-31 14:31  Davis16  阅读(8954)  评论(0)    收藏  举报