注册页面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. vue动画钩子

    <template> <div class="hello"> <div class="toggle" @click="f ...

  2. 爬虫实战_爬取豆瓣图书利用csv库存储

    读取csv文件 通过csv.reader()和DictReader()两个函数 reader()函数返回一个迭代器 会包含表头 通过next函数可以跳过,但是它只能通过下标访问数据: DictRead ...

  3. nginx_2_nginx进程模型

    1.nginx进程模型概述 在上一节我们已经已经成功在linux服务器上安装了nginx,启动nginx后,查看进程:ps -ef | grep nginx 能看到启动nginx进程后,有一个mast ...

  4. BUU re xor

    从13行和18行的0x21(c规定十六进制必须用0x**表示)可以知道这个字符串就是33个字符 shift+e来提取出数组中的字符: 设这个数组是global数组 global[] = { 102, ...

  5. ROS学习笔记5-理解节点（Node）

    本文内容来源于:http://wiki.ros.org/ROS/Tutorials/UnderstandingNodes 图(Graph)概念概览 节点(Nodes):一个节点是ROS下面一个可执行程 ...

  6. ROS-5 : 自定义消息

    自定义消息一般存储在功能包的msg文件夹下的.msg文件中,这些定义可告诉ROS这些数据的类型和名称,以便于在ROS 节点中使用.添加完这些自定义消息后,ROS会将其转为等效的C++节点,从而可在其他 ...

  7. 一 Mybatis概述&与Hibernate的区别&CRUD

    Mybatis是类似Hibernate的ORM持久层框架 为什么学习Mybatis? 是目前国内主流的持久层框架,面向sql(相较于Hibernate,Mybatis一定要用sql) Hibernat ...

  8. Struts2出现的问题：

    HTTP 500: 在用通配符配置Method时候,action的形式固定,比如customer_*,那么只用一个Action类比如CustomerAction即可. 在配置的时候,不同的方法在同一个 ...

  9. SciPy 常量

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  10. SpringData JPA使用JPQL的方式查询和使用SQL语句查询

    使用Spring Data JPA提供的查询方法已经可以解决大部分的应用场景,但是对于某些业务来说,我们还需要灵活的构造查询条件, 这时就可以使用@Query注解,结合JPQL的语句方式完成查询 持久 ...