注册页面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. OC中四种遍历方式

    标准的C语言for循环.Objective-C 1.0出现的NSEnumerator.Objective-C 1.0出现的for in快速遍历.块遍历. 遍历的话,一般是NSArray.NSDicti ...

  2. windows下安装redis并部署服务

    下载地址: windows版本: https://github.com/MSOpenTech/redis/releases Linux版本: 官网下载: http://www.redis.cn/ gi ...

  3. Netty实现原理和使用

    参考: https://www.jdon.com/concurrent/netty.html Java NIO原理和使用 参考:https://www.jdon.com/concurrent/nio% ...

  4. jdk环境

    安装方式一  jdk环境 干净的环境 将tar包解压到 /usr/local下 版本为jdk-8u211-linux-x64.tar.gz  路径为/usr/local/jdk1.8.0_211 /u ...

  5. 三 Road

    3—5年程序员的发展和出路在哪里? 是继续做技术人,还是向管理者发力?是继续留在大公司,还是转投潜力小公司?如果没有核心竞争力,入行一两年的新程序员朋友是可以替代你大部分工作的,而且薪资还低,要怎么办 ...

  6. 十五 JSP开发模式&MVC设计模式

    JSP开发模式: JavaBean + JSP  : 缺点:页面代码过多,不利于维护,JSP页面代码变得臃肿 Servlet + JavaBean + JSP :MVC设计模式 M:model   模 ...

  7. springboot常见注解 2020-01-19

    1,@SpringBootApplication 是springboot的核心注解,用在启动类上,是由 @Configuration 加载spring,配置spring并启动spring容器; 启动容 ...

  8. zabbix监控memcached服务

    zabbix监控memcached服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装并配置memcached服务 1>.使用yum方式安装memcached [ro ...

  9. 使用nginx做反向代理来访问tomcat服务器

    本次记录的是使用nginx来做一个反向代理来访问tomcat服务器.简单的来说就是使用nginx做为一个中间件,来分发客户端的请求,将这些请求分发到对应的合适的服务器上来完成请求及响应. 第一步:安装 ...

  10. python 文本文件操作

    文件操作三步走:打开.读写.关闭. open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, close ...