BBS基于forms组件和Ajax请求的注册功能(代码)

前端

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="text-center">注册</h1>
            <form id="myform"><!--这里不用form表单提交，只是单纯用一下form标签-->
                {% csrf_token %}
                {% for form in form_obj %}
                    <lable for="{{ form.auto_id }}">{{ form.label }}</lable>
{#                    form.auto_id 获取forms组件渲染的标签的id值(id_字段名)形式#}
                    {{ form }}
                    <span style="color: red"></span>
                {% endfor %}
                <div class="form-group">
                    <label for="myfile">上传头像
                        {% load static %}
                        <img src="{% static 'img/default.png' %}" id="myimg" alt="" width="80" style="margin-left:10px">
                    </label>
                    <input type="file" name="avatar" id="myfile" style="display:none">
                </div>

                <input type="button" class="btn btn-primary pull-right" value="注册" id="id_commit">
            </form>

        </div>
    </div>
</div>
<script>

    // 将上传的头像展示到前端页面。
    $('#myfile').change(function () {
        // 文件阅读器对象
        // 1 先生成一个文件阅读器对象
        let myFileReaderObj = new FileReader();
        // 2 获取用户上传的头像文件
        let fileObj = $(this)[0].files[0];
        console.log(fileObj)
        // 3 将文件对象交给阅读器对象读取
        myFileReaderObj.readAsDataURL(fileObj) //阅读完之后其实就传到后端了。
        console.log(myFileReaderObj)
        // 4 利用文件阅读器 将文件展示到前端页面 修改src属性
        //等待文件阅读器加载完毕后再执行
        myFileReaderObj.onload = function () {
            $('#myimg').attr('src', myFileReaderObj.result) //将图片文件读取出来放到src属性后面
        }
    })

    // 发送ajax请求，发送的数据中既包含普通键值对，也包含文件
    // 准备数据
    $('#id_commit').click(function (){
        // 1 借助于formData对象
        let formDataObj = new FormData();
        //2 添加普通键值对
        $.each($('#myform').serializeArray(),function (index,obj){
        // console.log($('#myform').serializeArray()) 输出形式 1:{name: 'username', value: 'jason'}
        // 所以将他们一一添加进fromData对象中红
            formDataObj.append(obj.name,obj.value)
        })
        // 2 添加文件数据 (也是key：value 的形式传入的)
        formDataObj.append('avatar',$('#myfile')[0].files[0]);

        // 发送请求
        $.ajax({
            url:'',
            type:'post',
            data:formDataObj,
             //需要指定两个关键性参数
            contentType:false, //不需要任何编码
            processData: false, //不用对数据进行任何处理
            success:function (args){
                if (args.code == 1000){
                    //跳转到登录界面
                    window.onclick.href = args.url
                }else {
                    //将对应的错误提示，展示到对应的input框下面
                    $.each(args.msg,function (index,obj){
                        //console.log(index,obj) // eg:username:array  所以 obj是一个数组
                        let targetId = '#id_'+index
                        //forms组件渲染的标签的id值都是(id_字段名)格式，所以要用拼接的方式得到id值
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')
                    })
                }
            }
        })
    })

    //给所有的input框绑定获取焦点事件
    $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')
    })


</script>

后端逻辑

from django.shortcuts import render, HttpResponse, redirect
from app01.myforms import MyRegForm
from app01 import models
from django.http import JsonResponse

# Create your views here.
def register(request):
    form_obj = MyRegForm()
    if request.method == 'POST':
        back_dic = {'code': 1000, 'msg': ''}
        # 校验数据是否合法
        # # print(request.POST) # 得到QueryDict对象(一个字典)
        form_obj = MyRegForm(request.POST)  # 将字典里面的数据传给MyRegForm进行比对，有不对的会返回出来错误(error_messages)
        # 判断数据是否合法
        if form_obj.is_valid():  # 该方法只有在数据全部合法的情况下才会返回true
            clean_data = form_obj.cleaned_data  # 查看所有校验过的数据，并返回(字典格式)
            clean_data.pop('confirm_password')  # 删除确认密码的数据，为下面保存数据做铺垫
            file_obj = request.FILES.get('avatar')  # 用户头像一定要判断是否传值，不能直接添加到字典中
            # # print(file_obj) # file_obj 是图片名字  222.jpg
            if file_obj:
                clean_data['avatar'] = file_obj
            # 操作数据库保存数据
            models.UserInfo.objects.create_user(**clean_data)
            back_dic['url'] = '/login/'  # 传一个地址过去 ,注册完成后跳转到登录界面
        else:
            back_dic['code'] = 2000
            back_dic['msg'] = form_obj.errors  # 查看所有不符合校验规则的参数以及不符合的原因
        return JsonResponse(back_dic)
    return render(request, 'register.html', locals())

forms类书写

from django import forms
from app01 import models


# 对forms表中输入框输入的内容的限制。


class MyRegForm(forms.Form):
    username = forms.CharField(label='用户名', min_length=3, max_length=8,
                               error_messages={
                                   'required': '用户名不能为空',
                                   'min_length': '用户名最少三位',
                                   'max_length': '用户名最大八位',
                               },
                               # 让标签有bootstrap样式
                               widget=forms.widgets.TextInput(attrs={'class': 'form-control'})
                               )
    password = forms.CharField(label='密码', min_length=3, max_length=8,
                               error_messages={
                                   'required': '密码不能为空',
                                   'min_length': '密码最少三位',
                                   'max_length': '密码最大八位',
                               },
                               # 让标签有bootstrap样式
                               widget=forms.widgets.PasswordInput(attrs={'class': 'form-control'})
                               )
    confirm_password = forms.CharField(label='确认密码', min_length=3, max_length=8,
                                       error_messages={
                                           'required': '确认密码不能为空',
                                           'min_length': '确认密码最少三位',
                                           'max_length': '确认密码最大八位',
                                       },
                                       # 让标签有bootstrap样式
                                       widget=forms.widgets.PasswordInput(attrs={'class': 'form-control'})
                                       )
    email = forms.EmailField(label='邮箱',
                             error_messages={
                                 'required': '邮箱不能为空',
                                 'invalid': '邮箱格式不正确',
                             },
                             widget=forms.widgets.EmailInput(attrs={'class': 'form-control'})
                             )

    # 局部钩子 校验用户名是否已经存在
    def clean_username(self):
        username = self.cleaned_data.get('username')
        # 去数据库中校验
        is_exist = models.UserInfo.objects.filter(username=username)
        if is_exist:
            # 提示信息
            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