注册页面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. Mini_Linux需要搭的环境

    1.bash:ifconfig:command not found sudo yum install -y net-tools 2.如果Linux系统是通过复制得到  需要更改hostname vi ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：表格单元格使用了 "bg-danger" 类

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. PaperReading20200223

    CanChen ggchen@mail.ustc.edu.cn   AdaBatch Motivation: Current stochastic gradient descend methods u ...

  4. 2_04_MSSQL课程_查询_类型转换、表联合、日期函数、字符串函数

    类型转换 Convert(目标类型,转换的表达式,格式规范) Cast(表达式 as 类型) select Convert(nvarchar(32)),CustomerId))+Title from ...

  5. helm基本用法

    一.helm命令 helm search #关键字搜索charts helm pull #压缩下载chart到本地,可以使用--untar下载解压) helm install #部署chart到kub ...

  6. c++ （翁恺浙大公开课）前言、目录

    c++语言比较复杂,学习起来相对难一些,加之特性繁多,很难全部掌握:特别是工作几年之后,每次温故都有很大的收获,之前不懂的地方随着工作的积累和重新的学习,都会慢慢的解开,当然我现在还是很菜... 之所 ...

  7. ROS学习笔记10-写一个简单的订阅者和发布者（C++版本）

    本文档来源于:http://wiki.ros.org/ROS/Tutorials/WritingPublisherSubscriber%28c%2B%2B%29 写发布者节点如前所述,节点是连接到RO ...

  8. 从0开始完成SpringBoot+Mybatis实现增删改查

    1.准备知识: 1)需要掌握的知识: Java基础,JavaWeb开发基础,Spring基础(没有Spring的基础也可以,接触过Spring最好),ajax,Jquery,Mybatis. 2)项目 ...

  9. body滚动时左侧菜单固定

    var top = $(".nav-frame").offset().top $(document).scroll(function(){ if($(this).scrollTop ...

  10. Maven 使用Nexus搭建Maven私服

    Maven学习 (四) 使用Nexus搭建Maven私服 为什么要搭建nexus私服,原因很简单,有些公司都不提供外网给项目组人员,因此就不能使用maven访问远程的仓库地址,所以很有必要在局域网里找 ...