BBS注册功能

一、后端

1.组件校验数据

"""

@author RansySun

@create 2019-11-03-11:35

"""

from django import forms

from django.forms import widgets

from app import models

class MyRegForm(forms.Form):

    """创建注册标签"""

    username = forms.CharField(min_length=3, max_length=9, label='用户名',

                               error_messages={

                                   'min_length': '用户名不能少于六位',

                                   'max_length': '用户名不能大于九位',

                                   'required': '用户名不能为空'

                               }, widget=widgets.TextInput(attrs={'class': 'form-control'}))

    password = forms.CharField(min_length=3, max_length=8, label='密 码',

                               error_messages={

                                   'min_length': '密码不能少于六位',

                                   'max_length': '密码不能多于八位',

                                   'required': '密码不能为空'

                               }, widget=widgets.PasswordInput(attrs={'class': 'form-control'}))

    confirm_password = forms.CharField(min_length=3, max_length=8, label='确认密码',

                                       error_messages={

                                           'min_length': '确认密码不能少于六位',

                                           'max_length': '确认密码不能多于八位',

                                           'required': '确认密码不能为空'

                                       }, widget=widgets.PasswordInput(attrs={'class': 'form-control'}))

    email = forms.EmailField(label='邮箱',

                             error_messages={

                                 'required': '邮箱不能为空',

                                 'invalid': '邮箱格式不正确'

                             }, widget=widgets.EmailInput(attrs={'class': 'form-control'}))

    def clean_username(self):

        """局部钩子,判断用户是否已经存在"""

        username = self.cleaned_data.get('username')

        user_obj = models.UserInfo.objects.filter(username=username)

        if user_obj:

            self.add_error('username', "用户已经存在")

        return username

    def clean(self):

        """全局钩子, 判断用户名是否相同"""

        password = self.cleaned_data.get('password')

        confirm_password = self.cleaned_data.get('confirm_password')

        if not (password == confirm_password):

            self.add_error('confirm_password', '两次密码不一致')

        return self.cleaned_data

2.注册功能实现

# url.py

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^register/', views.register),  # 注册

]


# views.register

def register(request):

    """

    注册功能实现

    :param request:

    :return:

    """

    # 组件校验数据

    form_obj = MyRegForm()

    if request.method == 'POST':

        # 向前台返回结果信息

        back_dic = {'code': 1000, "msg": ''}

        form_obj = MyRegForm(request.POST)

        # print(request.POST)

        # print(request.FILES)

        # 校验数据

        if form_obj.is_valid():  # 验证所有表单是否全部通过

            # form_obj.cleaned_data  # {'username': 'randy', 'password': '123456', 'confirm_password': '123456', 'email': '2214644978@qq.com'}

            cleaned_data = form_obj.cleaned_data  # 所有验证通过的键值对

            # 移除确认密码

            cleaned_data.pop('confirm_password')

            file_obj = request.FILES.get('avatar')  # 获取用户头像, 如果没有上传, 则为空

            if file_obj:

                """

                获取用户上传头像之后,一定要判断用户是否上传了,

                如果没有上传,字典中就不会加avatar键值对

                """

                cleaned_data['avatar'] = file_obj

            # 通过 ** 打散字典的方式作为参数, key必须与数据库中字段中一模一样

            models.UserInfo.objects.create_user(**cleaned_data)

            back_dic['url'] = '/login/'

        else:

            # 向前台返回发生错误信息

            back_dic['code'] = 2000

            back_dic['msg'] = form_obj.errors

            print(back_dic)

        return JsonResponse(back_dic)

    return render(request, '01register.html', locals())

二、前端设计

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    {% load static %}

    <script src="{% static 'bootstrap/js/jquery.js' %}"></script>

    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>

    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-6 col-lg-offset-3">

            <h1 class="text-center">注册界面</h1>

            <form action="" class="form-horizontal" id="myform" novalidate>

                {% csrf_token %}

                {#                标签 #}

                {% for f_obj in form_obj %}

                    <div class="form-group">

                        <label for="{{ f_obj.auto_id }}">{{ f_obj.label }} </label>

                        {{ f_obj }}

                        <span style="color:red" class="pull-right"></span>

                    </div>

                {% endfor %}

                {#              头像通过点击图片上传头像,隐藏file标签#}

                <div class="form-group">

                    <label for="myfile">

                        头像<img src="{% static 'img/default1.png' %}" alt="" id="avatar" width="80px" height="80px"

                               style="margin: 10px 10px;border-radius: 50%">

                    </label>

                    <input type="file" id="myfile" name="avatar" style="display: none;">

                </div>

                {#              注册按钮，通过ajax检测登录信息, 报错提示#}

                <input type="button" class="btn btn-success pull-right" id='commit' value="注册">

            </form>

        </div>

    </div>

</div>

<script>

    // 文件阅读器,

    $('#myfile').change(function () {

        // 将图片改为用户上传的图片

        // 1.产生文件阅读器队形

        var fileReader = new FileReader();

        // 2.获取用户上传的文件

        var fileUp = $(this)[0].files[0];

        // 3.让文件阅读器读取该文件

        fileReader.readAsDataURL(fileUp);

        // 4.利用文件阅读器将文件展示出来

        fileReader.onload = function () {

            $('#avatar').attr('src', fileReader.result)

        }

    });

    $('#commit').on('click', function () {

        var formData = new FormData();

        // serializeArray() 获取form表单中的键值对, each循环获取数组中内容

        $.each($('#myform').serializeArray(), function (index, obj) {

            formData.append(obj.name, obj.value)

        });

        // 添加上传的图片

        formData.append('avatar', $('#myfile')[0].files[0]);

        $.ajax({

            url: '',

            type: 'post',

            data: formData,

            contentType:false,

            processData:false,

            success: function (data) {

                if (data.code == 1000) {

                    window.location.href = data.url

                }else {

                   $.each(data.msg, function (index, obj) {

                       // data.msg是字段，所以index是key, obj value值是一个报错的数组信息

                       // 通过index手动拼接input框字段

                       var tagId = '#id_'+index;

                       {#alert(tagId)#}

                       // 获取出错的标签下面的span标签添加报错的信息,给父标签添加一个红色错误边框

                       $(tagId).next().text(obj[0]).parent().addClass('has-error')

                   });

                }

            }

        });

        $('input').focus(function () {

           $(this).next().text('').parent().removeClass('has-error')

        });

    });

</script>

</body>

</html>

BBS注册功能的更多相关文章

  1. BBS(第一天)项目之 注册功能实现通过forms验证与 前端ajax请求触发查询数据库判断用户是否存在的功能实现

    1.BBS项目之注册功能通过forms验证 from django import forms from blog.models import User from django.contrib.auth ...

  2. BBS论坛 注册功能

    三.注册功能 # views.py文件 def register(request): back_dic = {'code': 100, 'msg': ''} form_obj = myforms.My ...

  3. BBS登录与注册功能

    登录功能 视图函数 def my_login(request): if request.method == 'GET': return render(request, 'login.html') el ...

  4. 1206 BBS注册

    目录 昨日内容 BBS项目 1.项目开发流程 2.表设计 用户表 个人站点表 文章标签表 文章分类表 文章表 文章的点赞点踩表 文章的评论表 项目 昨日内容 昨日内容 基于django中间件实现功能的 ...

  5. python实现软件的注册功能（机器码+注册码机制）

    http://www.cnblogs.com/cquptzzq/p/5940583.html 一.前言: 目的:完成已有python图像处理工具的注册功能 功能:用户运行程序后,通过文件自动检测认证状 ...

  6. Winform 注册机通用软件注册功能之建立有效的软件保护机制

    本文转载:http://www.cnblogs.com/umplatform/archive/2013/01/23/2873001.html 众所周知,一些共享软件往往提供给使用者的是一个功能不受限制 ...

  7. springMVC+Java验证码完善注册功能

    这篇文章简单的写了一个java验证码,为之前写过的springMVC注册功能加上验证码,验证码的作用就不多说了,防止机器人程序恶意注册什么的.. 其中User.java,加上了password和cod ...

  8. gitlab 取消注册功能

    gitlab 默认安装完成以后是允许用户注册,公司内部使用所以准备禁用了注册功能,只允许管理员从后台开通权限: 1.进入"Admin Area" 2.在左边菜单栏最低下点击&quo ...

  9. 7、ABPZero系列教程之拼多多卖家工具 修改注册功能

    本篇开始进入重头戏,之前的几篇文章都是为了现在的功能作准备.前面教程已经讲到修改User表结构,接下来就需要修改注册逻辑代码. 注册页面 修改Register.cshtml,备注如下代码: 文件路径: ...

随机推荐

  1. 批量go get 代码

    批量 go get 代码 Go

  2. Java的优先队列PriorityQueue详解

    一.优先队列概述 优先队列PriorityQueue是Queue接口的实现,可以对其中元素进行排序, 可以放基本数据类型的包装类(如:Integer,Long等)或自定义的类 对于基本数据类型的包装器 ...

  3. 每天一点点之 taro 框架开发 - 事件处理与样式表

    1.方法调用 state = { name:'张三' } test(){ this.state.name } <button onClick={ this.test.bind(this) } / ...

  4. 算法5：队列——解密 QQ 号

    新学期开始了,小哈是小哼的新同桌(小哈是个小美女哦~),小哼向小哈询问 QQ 号,小哈当然不会直接告诉小哼啦,原因嘛你懂的.所以小哈给了小哼一串加密过的数字,同时小哈也告诉了小哼解密规则.规则是这样的 ...

  5. 关于ThinkCMF后台验证码不显示

    最近小凯在群里看到好多同学们遇到一个头疼的问题,程序在本地调试好了之后上传服务器,后台的验证码就会不显示,今天三群的  [江苏  冰点零度 php] 同学遇到了这个问题. 开始小凯以为是GB库出来问题 ...

  6. UNION和UNION ALL的作用和语法

    主要就是两句话区别: union是联合的意思,就是合并两个或多个select语句的结果集,并消除重复行: union all 当然也是联合的意思,也是合并两个或多个select语句的结果集,但是保留重 ...

  7. 2020/2/3 PHP代码审计之PHP弱类型

    0x00 简介 php中有两种比较的符号 == 与 === <?php 2 $a = $b ; 3 $a===$b ; 4 ?> === 在进行比较的时候,会先判断两种字符串的类型是否相等 ...

  8. VUE常见的语法

    模版渲染{{msg}} v-html="" v-text="" v-bind:id=""  类似 attr 三元判断 {{ok?'yes': ...

  9. eclipse默认的WebContent目录修改为webRoot

    从网上下载了个Java Web项目,导入Eclipse后在Tomcat中发布,发现在Tomcat的Webapps目录下没有JSP页面 到项目中去看才发现有两个目录,一个WebContent,一个Web ...

  10. delphi内嵌汇编

    { 前面知道了一个汇编的赋值指令(MOV), 再了解一个加法指令(ADD), 就可以做个例子了. 譬如: ADD AX,BX; 这相当于 Delphi 中的 AX := AX + BX; 另外提前来个 ...