码迷,mamicode.com
首页 > Web开发 > 详细

Django框架form表单配合ajax注册

时间:2018-10-18 18:15:56      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:ret   play   ima   put   django   spl   username   font   erro   

总结一下,其实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 == 123456:
            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注册

标签:ret   play   ima   put   django   spl   username   font   erro   

原文地址:https://www.cnblogs.com/xu12135/p/9811795.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!