总结一下，其实form组件的主要功能如下:

  • 生成页面可用的HTML标签
  • 对用户提交的数据进行校验
  • 保留上次输入内容

下面是写的登录页面的实例

1:views视图中的代码

# 注册页面

def register(request):

    if request.method == 'POST':

        # 将提交过来的数据放的form表单中进行校验

        form_obj = forms.Register(request.POST)

        # 判断校验是否真确

        print(form_obj.is_valid())

        ret = {'status': False, 'msg': ''}

        if form_obj.is_valid():

            # 删除form_obj.cleaned_data中的确认密码

            form_obj.cleaned_data.pop('re_password')

            avatar = request.FILES.get('avatar')

            models.UserInfo.objects.create_user(**form_obj.cleaned_data,avatar=avatar)

            ret['status'] = True

            ret['msg'] = '/index/'

            return JsonResponse(ret)

        else:

            ret['msg'] = form_obj.errors

            return JsonResponse(ret)

    form_obj = forms.Register()

    return render(request, 'reg.html', {'form_obj': form_obj})

2:forms表单中的代码

"""

注册使用的form表单

"""

from django import forms

from blog import models

class Register(forms.Form):

    username = forms.CharField(

        label='用户名:',

        max_length=16,

        error_messages={

            'max_length': '用户名不能超过16位',

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

        },

        widget=forms.widgets.TextInput(

            attrs={'class': 'form-control'}

        )

    )

    password = forms.CharField(

        label='密码',

        min_length=6,

        error_messages={

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

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

        },

        widget=forms.widgets.PasswordInput(

            attrs={'class': 'form-control'},

            render_value=True

        )

    )

    re_password = forms.CharField(

        label='确认密码',

        min_length=6,

        error_messages={

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

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

        },

        widget=forms.widgets.PasswordInput(

            attrs={'class': 'form-control'},

            render_value=True

        )

    )

    email = forms.EmailField(

        label='邮箱',

        error_messages={

            'invalid': '邮箱格式错误',

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

        },

        widget=forms.widgets.EmailInput(

            attrs={'class': 'form-control'}

        )

    )

    # 判断两次密码是否一致

    def clean_re_password(self):

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

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

        if password != re_password:

            raise forms.ValidationError('两次密码不一致')

        return re_password

    # 判断密码是否简单

    def clean_password(self):

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

        if password == '':

            raise forms.ValidationError('密码太简单了')

        return password

    # 判断用户名是否存在

    def clean_username(self):

        username = self.cleaned_data['username']

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

        if user_obj:

            raise forms.ValidationError('用户名已存在')

        return username

3:HTML中的代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-Type" charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/mystyle.css">

</head>

<body>

<div class="container">

    <div class="row">

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

            <form novalidate action="/reg/" method="post" class="form-horizontal reg-form "

                  enctype="multipart/form-data">

                {% csrf_token %}

                <div class="form-group">

                    <label for="{{ form_obj.username.id_for_label }}"

                           class="col-sm-2 control-label">{{ form_obj.username.label }}</label>

                    <div class="col-sm-8 ">

                        {{ form_obj.username }}

                        <span class="help-block"></span>

                    </div>

                </div>

                <div class="form-group">

                    <label for="{{ form_obj.password.id_for_label }}"

                           class="col-sm-2 control-label">{{ form_obj.password.label }}</label>

                    <div class="col-sm-8 ">

                        {{ form_obj.password }}

                        <span class="help-block"></span>

                    </div>

                </div>

                <div class="form-group">

                    <label for="{{ form_obj.re_password.id_for_label }}"

                           class="col-sm-2 control-label">{{ form_obj.re_password.label }}</label>

                    <div class="col-sm-8 ">

                        {{ form_obj.re_password }}

                        <span class="help-block"></span>

                    </div>

                </div>

                <div class="form-group">

                    <label for="{{ form_obj.email.id_for_label }}"

                           class="col-sm-2 control-label">{{ form_obj.email.label }}</label>

                    <div class="col-sm-8 ">

                        {{ form_obj.email }}

                        <span class="help-block"></span>

                    </div>

                </div>

                <div class="form-group">

                    <label for="id_avatars"

                           class="col-sm-2 control-label">头像</label>

                    <div class="col-sm-8">

                        <label for="id_avatars">

                            <img src="/static/img/default.png" alt="" id="avatar-img">

                        </label>

                        <input id="id_avatars" name="avatars" type="file" style="display: none">

                    </div>

                </div>

                <div class="form-group">

                    <div class="col-sm-offset-2 col-sm-10">

                        <button id="reg-submit" type="button" class="btn btn-success">注册</button>

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

<script src="/static/jquery-3.3.1.js"></script>

<script src="/static/bootstrap/js/bootstrap.min.js"></script>

4:ajax请求的代码

<script>

    $('#reg-submit').on('click', function () {

　　　　　　// 上传带文件的ajax请求 需要将 data 类型 改为 FormData

        var formData = new FormData();

            formData.append('username',$("#id_username").val());

            formData.append('password',$('#id_password').val());

            formData.append('re_password',$("#id_re_password").val());

            formData.append('email',$('#id_email').val());

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

            formData.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val());

        $.ajax({

            url: '/reg/',

            type: 'POST',

            processData:false, // 文件上传必填的两项

            contentType:false,

            data: formData,

            success: function (data) {

                if (data.status) {

                    location.href = data.msg;

                } else {

                    $.each(data.msg,function (k,v) {

                       //console.log ($('#id_'+k));

                        $('#id_'+k).next().text(v[0]).parent().parent().addClass('has-error')

                    })

                }

            }

        })

    });

    // 获得焦点取消错误

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

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

    });

    // 找到图片的input标签绑定change事件

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

        // 创建一个读取文件的对象

        var fileReader = new FileReader();

        // 1 取到当前选中的文件

        fileReader.readAsDataURL(this.files[0]);

        // 加载文件需要时间

        fileReader.onload = function () {

            // 加载完图片后添加到img标签中

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

        }

    });

</script>

5:最后效果图

Django框架form表单配合ajax注册的更多相关文章

  1. Django框架form表单的那些事儿

    Form那些事儿 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; 1:initial 初始值,input框里面的初始值. class L ...

  2. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  3. Django 11 form表单（状态保持session、form表单及注册实现）

    Django 11 form表单(状态保持session.form表单及注册实现) 一.状态保持 session 状态保持 #1.http协议是无状态的:每次请求都是一次新的请求,不会记得之前通信的状 ...

  4. Django--分页器（paginator）、Django的用户认证、Django的FORM表单

    分页器(paginator) >>> from django.core.paginator import Paginator >>> objects = ['joh ...

  5. 关于form表单或者Ajax向后台发送数据时，数据格式的探究

    最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...

  6. 转载：Django之form表单

    转载: 一.使用form类创建一个表单 先定义好一个RegForm类: forms.py from django import forms # 导入forms类 class NameForm(form ...

  7. form表单的ajax验证2

    form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  8. Django的form表单

    html的form表单 django中,前端如果要提交一些数据到views里面去,需要用到 html里面的form表单. 例如: # form2/urls.py from django.contrib ...

  9. laravel中form表单，ajax传值没反应

    laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...

随机推荐

  1. bzoj 1050 [HAOI2006]旅行comf——kruscal

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1050 因为还有Impossible的情况,所以想到了kruscal.(?) 但好像不太行.然 ...

  2. webstorm格式化代码快捷键

    ctrl+alt+L 把网易云音乐的快捷键关了就可以了

  3. div代码大全 DIV代码使用说明

    一.DIV代码语法 - TOP DIV代码是放入小于与大于符号内,即“<div>”. DIV是一对闭合标签,即“”开始,“结束”的盒子标签. 语法结构: <div>我是内容&l ...

  4. jsp必填项加红色星号

    <th><font color=red>*</font>文字:</th>

  5. JavaScript Libraries In A TypeScript Application, Revisited

    If you haven’t already gotten involved with it, you’ll probably know that TypeScript is becoming inc ...

  6. Javascript-正则表达式常用验证

    <div> <h1>一.判断中国邮政编码匹配</h1> <p>分析:中国邮政编码都是6位,且为纯数字</p> <div>邮政编码 ...

  7. QT_获取运行进程所在目录路径_1

    QString getProcessPathForWin(int idProcess) { #ifdef Q_OS_WIN // access process path WCHAR name[]; Z ...

  8. 清除SQL数据库文本字段中的回车、换行符的方法

    清除SQL数据库中文本字段的回车.换行符的方法 清除回车符: update tableName set columnName = rtrim(ltrim(replace(columnName ,cha ...

  9. Hdu 3068 最长回文字串Manacher算法

    题目链接 最长回文 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  10. ecshop二次开发之后台秒杀

    1.进入admin->includes->inc_menu.PHP中此文件为定义左侧功能模块超链接 2.添加include/inc_menu.php秒杀管理超链接找链接 $modules[ ...