注册页面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. 采用Keepalived+Nginx解决方案实现高可用的API网关（下）

    1 Keepalived 3.1Keepalived介绍 Keepalived 是一种高性能的服务器高可用或热备解决方案,Keepalived 可以用来防止服务器单点故障的发生,通过配合 Nginx ...

  2. prototype入门----自定义创建元素

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

  3. Lamda表达式学习笔记二

    Lamda表达式学习笔记二 lamda表达式----方法引用 上一篇讲到Lamda体就是对函数式接口方法的实现 ,在方法体中我们可能会引用其他方法实现逻辑,所以在lamda体中我们可以直接引用器方法 ...

  4. 搭建 nginx + rtmp 媒体服务器笔记

    工作需要搭建一个流媒体服务器,用来接收前端推过来的视频流,达到实时保存的目的. 具体步骤网上已经比较详细了 可以参考下面这个文档参考文档 https://www.cnblogs.com/monjeo/ ...

  5. SSM(Spring-SpringMvc-Mybatis)练习

    1.总结 https://pan.baidu.com/s/1kXlCf4r  密码:hv6v 2.代码 https://pan.baidu.com/s/1pNgKph5  密码:6rcm 3.资料 h ...

  6. 简单易懂之python 中的map，filter，reduce用法

    map(function,sequence) 把sequence中的值当参数逐个传给function,返回一个包含函数执行结果的list. 重点是结果返回一个列表,这样对返回的列表就可以干很多的活了. ...

  7. Acwing897 最长公共子序列

    题目大意:求两个字符串的最长公共子序列的长度. 分析:这是一个典型的dp入门题,LCS. 代码: #include<bits/stdc++.h> using namespace std; ...

  8. three.js的一些介绍

    什么是 WebGL? WebGL(Web 图形库)是一种 JavaScript API,用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形,而无需使用插件.WebGL 通过引入一个与 ...

  9. 第2章 PLC1200 与HMI (TP900) 组合仿真连接 编写1200程序，编写HMI 仿真过程拍摄视频

    博途V13 与 WINCC PROFESSIONAL V13 创建一个PLC工程 和屏幕的 练习. 在做S1200与 HMI的仿真之前 需要设置控制面板 设置PG/PC口 巡视窗口用于看设备的一些属性 ...

  10. Android:用代码修改一行文字中某几个字的颜色

    TextView changeVideoQualityTxt = (TextView) rootView.findViewById(R.id.enter_wireless_display_txt); ...