注册页面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添加唯一约束, 前三个字段添加飞空约束.

实现效果:

　

layui-注册界面的更多相关文章

  1. HTML登录注册界面怎么制作？

    在没有学习CSS样式的前提下,是如何做一个简单的注册界面的. 一.表单标签(form) 首先我们先写一个<form></form>的标签,form标签属于表单标签,通常我们的登 ...

  2. iOS开发——UI进阶篇（八）pickerView简单使用,通过storyboard加载控制器，注册界面，通过xib创建控制器，控制器的view创建，导航控制器的基本使用

    一.pickerView简单使用 1.UIPickerViewDataSource 这两个方法必须实现 // 返回有多少列 - (NSInteger)numberOfComponentsInPicke ...

  3. HTML练习----注册界面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. tkinter 创建登陆注册界面

    import tkinter as tk from tkinter import messagebox #设置窗口居中 def window_info(): ws = window.winfo_scr ...

  5. 使用Boostrap框架写一个登录\注册界面

    Bootstrap是一个Web前端开发框架,使用它提供的css.js文件可以简单.方便地美化HTML控件.一般情况下,对控件的美化需要我们自己编写css代码,并通过标签选择器.类选择器.ID选择器为指 ...

  6. Web前端-网站首页和注册界面的实现

    首页用到的知识如下: 1.bootstrap框架 2.jQuerry实现页面定时弹出广告 注册界面用到的知识: 1.bootstrap框架 2.jQuerry实现省市联动操作 3.jQuerry实现表 ...

  7. 实践练习_使用HTML标签制作一个注册界面03

    使用HTML标签制作一个注册界面▲▲▲▲★1) 注册界面需要有用户名.密码.性别(单选).爱好(多选).专业(下拉列表)2) 注册界面需要有隐藏域和文件域3) 注册界面需要有提交和重置按钮4) 将上述 ...

  8. 初学html，任务2：写一个简单的登陆/注册界面

    先在body中把最基础的标签写出来 现在页面运行出来是这样的 就是一个没有任何样式的基础界面: 接下来我们为这些标签加上样式 首先还是让页面所有元素的padding和margin都设置为0, 清除浏览 ...

  9. H5 71-网易注册界面4

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

  10. JFinal Web开发学习(五)注册界面和后端验证

    效果: 直接点击注册后 : 后端验证是可靠地,前端js验证是不可靠的.只需要在浏览器删除js验证代码即可突破js验证. 1.注册界面 在WebRoot下新建regist.jsp <%@ page ...

随机推荐

  1. Linux--如何实现虚拟机与主机之间的文件传输无需第三方，即可轻松设置共享文件夹（适合所有人群）

    无需第三方插件,设置共享文件夹 第一步:虚拟机->设置 第二步:选项->共享文件夹->总是启用->添加 第三步:点击下一步 第四步:浏览(选择主机路径)->下一步 第五步 ...

  2. windows下hashcat利用GPU显卡性能破解密码

    由于一般密码破解工具的破解速度实在是太慢,而且支持的密码破解协议也不多,暴力破解的话,有的密码1年时间也破不出来,用字典跑的话必须要明文密码在字典里才行,而且密码字典太大的话,也很浪费时间,跑不出来也 ...

  3. 【快学springboot】13.操作redis之String数据结构

    前言 在之前的文章中,讲解了使用redis解决集群环境session共享的问题[快学springboot]11.整合redis实现session共享,这里已经引入了redis相关的依赖,并且通过spr ...

  4. win10安装Oracle11g

    第一步,下载 oracle 下载地址,官网(需要登录注册): http://download.oracle.com/otn/nt/oracle11g/112010/win64_11gR2_databa ...

  5. SparkSQL 疫情Demo练习

    在家闲着没事干, 写个简单的疫情数据处理Demo, 顺便回顾下SparkSQL. 模拟数据(以下数据皆为虚构, 如有雷同不胜荣幸) 市民信息(civic_info.csv) id_no,name,se ...

  6. nrm 源管理器

    什么是nrm nrm 是一个 npm 源管理器,允许你快速地在 npm 源间切换. 安装nrm 在命令行执行命令,npm install -g nrm,全局安装nrm. 使用 执行命令nrm ls查看 ...

  7. IDEA 服务器热部署详解（On Update action/On frame deactivation）

    https://blog.csdn.net/w15321271041/article/details/80597962 场景:一般服务器(比如tomcat,jboss等)启动以后,我们还需要进一步修改 ...

  8. android使用友盟实现第三方登录、分享以及微信回调无反应问题解决办法

    这里介绍微信和新浪登录.微信登录和新浪登录都需要申请第三方账号.可以参考官方文档http://dev.umeng.com/social/android/operation#2还是很清晰的. 新浪微博开 ...

  9. 使用Linux命令修改数据库密码

    通过登录mysql系统,# mysql -uroot -pEnter password: [输入原来的密码]mysql>use mysql;mysql> update user set p ...

  10. 「Luogu1901」发射站

    传送门 Luogu 解题思路 单调栈裸题,扫两遍处理出每个点左边第一个比他高的和右边第一个比他高的,然后模拟题意即可. 细节注意事项 咕咕咕. 参考代码 #include <algorithm& ...