首页 > Web开发 > 详细

Django 【第十七篇】使用Form组件和Ajax实现用户注册

时间:2018-02-21 12:17:22      阅读:287      评论:0      收藏:0      [点我收藏+]

一、注册相关的知识点

1、Form组件

我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面建一个forms.py的文件来存放

技术分享图片

2、局部钩子函数

 def clean_username(self):
        username = self.cleaned_data.get("username")
        valid = models.UserInfo.objects.filter(username = username).first()
        if valid:
            raise ValidationError("用户名已存在")
        return username

3、全局钩子函数

#自定义全局钩子:验证两次密码是否一致
 def clean(self):
   if self.cleaned_data.get("password") == self.cleaned_data.get("password_again"):
        return self.cleaned_data
   else:
        raise  ValidationError("两次密码不一致")

4、 jQuery的属性操作相关的

attr:
    一个参数是获取属性的值,两个参数是设置属性值
removeAttr(属性名):
    删除属性值
prop:
    适应于属性的返回值是布尔类型的(单选,反选,取消的例子)
removePorp:
    删除属性的值

5、循环的两种方式:

$.each(数组/对象,function(i,v){})
$("div").each(function(i,v){})

6、css中的三种隐藏:

1、display:none  隐藏所有内容
2、visibility:hidden 隐藏内容 3、overflow:hidden 隐藏溢出内容 三者都是用来隐藏的: 区别在于: visibility虽然隐藏了,但是被隐藏的内容依然占据这空间,这段隐藏了的内容却保留空间的位置会在网页中显示空白
而display:隐藏了不占用空间 我们在注册的时候不用display:none,不然选择文件的那个功能就没有了,我们可以吧透明度

7、提交二进制数据用FormData

var formData=new FormData();
formData.append("username",$("#id_username").val()); 
formData.append("email",$("#id_email").val()); formData.append("tel",$("#id_tel").val());
formData.append("password",$("#id_password").val()); formData.append("password_again",$("#id_password_again").val()); formData.append("avatar_img",$("#avatar")[0].files[0]);

记得要加上

contentType:false
processData:false

8、可以用下面的方法判断是什么请求

if request.ajax():    #如果ajax请求
if request,method=="POST":   #如果是POST请求

9、上传文件有一个固定的配置参数media,和static相似 但又不同

步骤如下:

- 首先在settings中配置:

# ============media配置===============
MEDIA_URL="/media/"  #别名
MEDIA_ROOT=os.path.join(BASE_DIR,"app01","media","uploads")   #具体路径

- 在url中配置

url(r‘^media/(?P<path>.*)$‘, serve, {‘document_root‘: settings.MEDIA_ROOT}),

用处:

用处一:
----- avatar = models.FileField(verbose_name=‘头像‘, upload_to=‘avatar‘, default="/avatar/default.png") 会把接收的文件放在media指代的路径与upload_to的拼接:BASE_DIR+blog+media+uploads+avatar/a.png avatar字段在数据库中保存的是:avatar/a.png
用处二:
------ <img src="/media/avatar/a.png">

如果上传成功会把图片自动保存在这里

技术分享图片

10、头像图片预览

   //头像预览
        $(".avatar_file").change(function () {
            var ele_file = $(this)[0].files[0]; //当前选中的文件
            var reader = new FileReader();
            reader.readAsDataURL(ele_file); //对应找到打开的url
            reader.onload=function () {
{#                方式一#}
                $(".avatar_img").attr("src",this.result) ; //this.result是上面找到的url
{#                方式二#}
{#                 $(".avatar_img")[0].src=this.result; //设置图片属性#}
            }
        })

11、form自动生成的错误信息

当你定义了全局钩子的时候,而且正好出现你的那个全局钩子函数中的错(比如两次密码输入不一致),这样你打印错误信息的时候

会有一个__all__对象,这个就是你设置的全局钩子生成的。

技术分享图片

所以还要单独判断一下,现在全局钩子只有一个,你可以这样判断,但是,当全局钩子多的时候就得一个一个分开来判断

  if (i=="__all__"){
        $("#id_password_again").after($span)
   }

 

二、具体实现注册操作

urls.py 

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.conf import settings
from django.views.static import serve
urlpatterns = [
    url(r‘^admin/‘, admin.site.urls),
    url(r‘^login/$‘, views.login),
    url(r‘^index/$‘, views.index),
    url(r‘^get_vaildCode_img/$‘, views.get_vaildCode_img),
    url(r‘^log_out/$‘, views.log_out),

    url(r‘^register/$‘, views.register),
    url(r‘^media/(?P<path>.*)$‘, serve, {‘document_root‘: settings.MEDIA_ROOT}),
]

  

views.py

def register(request):
    if request.method=="GET":
        form = RegisterForm()
        return render(request,"register.html",{"form":form})
    else:
        form = RegisterForm(data=request.POST)
        regresponse = {"user":None,"msg_errors":None}
        if form.is_valid():
            username = form.cleaned_data.get("username")
            password = form.cleaned_data.get("password")
            tel = form.cleaned_data.get("tel")
            avatar_img = request.FILES.get("avatar_img")
            print(">>>",username,password,tel)
            models.UserInfo.objects.create_user(username = username,password=password,tel=tel,avatar=avatar_img)
            regresponse["user"] = username
        else:
            print("form.errors",form.errors)
            regresponse["msg_errors"]=form.errors
        return HttpResponse(json.dumps(regresponse))

  

forms.py

#!usr/bin/env python
# -*- coding:utf-8 -*-
from app01 import models
from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.validators import ValidationError
from django.core.validators import RegexValidator
class RegisterForm(Form):
    username = fields.CharField(
        required=True,
        max_length=16,
        min_length=3,
        error_messages={
            "required": "用户名不能为空",
            "max_length": "长度不能大于16",
            "min_length": "长度不能小于3",
        },
        widget=widgets.TextInput({"placeholder":"请您输入用户名","class":"form-control"})
    )
    password = fields.CharField(
        required=True,
        max_length=16,
        min_length=3,
        error_messages={
            "required": "密码不能为空",
            "max_length": "长度不能大于16",
            "min_length": "长度不能小于3",
        },
        widget=widgets.PasswordInput({"placeholder":"请您输入数字与字母组合的密码","class":"form-control"})
    )
    password_again = fields.CharField(
        required=True,
        max_length=16,
        min_length=3,
        error_messages={
            "required": "密码不能为空",
            "max_length": "长度不能大于16",
            "min_length": "长度不能小于3",
        },
        widget=widgets.PasswordInput({"placeholder": "请您再次输入密码", "class": "form-control"})
    )
    email = fields.EmailField(
        required=True,
        error_messages={
            "required":"邮箱不能为空",
            "invalid":"邮箱格式有误"
        },
        widget = widgets.EmailInput({"placeholder": "请输入您的邮箱", "class": "form-control"})
    )
    tel = fields.CharField(
        required=True,
        max_length=11,
        min_length=11,
        error_messages={
            "required":"手机号码不能为空",
            "max_length":"长度必须是11位,请你正确输入",
            "min_length":"长度必须是11位,请你正确输入",
        },
        validators=[RegexValidator("\d+","密码只能是数字")],
        widget=widgets.TextInput({"placeholder": "请您输入你的电话,要求11位哦", "class": "form-control"})
    )

    #自定义用户名验证:局部钩子
    def clean_username(self):
        username = self.cleaned_data.get("username")
        valid = models.UserInfo.objects.filter(username = username).first()
        if valid:
            raise ValidationError("用户名已存在")
        return username
    #自定义密码验证:
    def clean_password(self):
        password = self.cleaned_data.get("password")
        if password.isdigit():
            raise ValidationError("密码不能是纯数字")
        else:
            return password
    #自定义全局钩子:验证两次密码是否一致
    def clean(self):
        if self.cleaned_data.get("password") == self.cleaned_data.get("password_again"):
            return self.cleaned_data
        else:
            raise  ValidationError("两次密码不一致")

  

template

register.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/reg.css">
</head>
<body>
{#导航条#}
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container pull-left">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">博客园</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active c1"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li class="active c1"><a href="#">登录</a></li>
                <li class="active c1"><a href="#">注册</a></li>
                <li class="active c1"><a href="#">帮助</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<h2>注册新用户</h2>
<hr>
<div class="container">
    <div class="row left">
        <div class="col-md-6 col-md-offset-1">
            <form action="/register/" method="post" novalidate enctype="multipart/form-data">
                {% csrf_token %}
                 <div class="form-group">
                    <label for="password" class="control-label">用户名:</label>
                    <div>{{ form.username }}<span></span></div>
                </div>
                <div class="form-group">
                    <label for="password" class="control-label">密码:</label>
                    <div>{{ form.password }}<span></span></div>
                </div>
                <div class="form-group">
                    <label for="password" class="control-label">确认密码:</label>
                    <div>{{ form.password_again }}<span></span></div>
                </div>
                <div class="form-group">
                    <label for="email" class="control-label">邮箱:</label>
                    <div>{{ form.email }}<span></span></div>
                </div>
                <div class="form-group">
                    <label for="tel" class="control-label">手机号:</label>
                    <div>{{ form.tel }}<span></span></div>
                </div>
                <div class="form-group avatar">
                    <label for="avatar">头像:</label>
                    <img src="/static/image/default.png"  class="avatar_img">
                    <input type="file" id="avatar" name="avatar_file" class="avatar_file">
                </div>
                <button type="button" class="btn btn-primary registr_btn">注册</button><span class="xxx"></span>
            </form>
        </div>
    </div>
    <div class="right">
        <img src="/static/image/rigth.png" >
    </div>
</div>

<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
    $(function () {
        //给注册按钮增加事件
        $(".registr_btn").click(function () {
             var formData=new FormData();
            formData.append("username",$("#id_username").val());
            formData.append("email",$("#id_email").val());
            formData.append("tel",$("#id_tel").val());
            formData.append("password",$("#id_password").val());
            formData.append("password_again",$("#id_password_again").val());
            formData.append("avatar_img",$("#avatar")[0].files[0]);
            console.log("=========",formData);

            //先清除错误信息
            $(".pull-right").html("");
            $(".pull-right").parent().removeClass("has-error");
            $.ajax({
                url:"/register/",
                type:"POST",
                headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)},
                data:formData,
                contentType:false,
                processData:false,
                success:function (data) {
{#                    console.log(data);#}
                    var data = JSON.parse(data);
                    if(data["user"]){  //或者也可以用data.user
                        $(".xxx").html("注册成功");
                        window.location.href="/login/";
                    }
                    else {
                        console.log(data.msg_errors);  //拿到的是所有的错误信息
                        $.each(data.msg_errors,function (i,v) {
                            console.log(i,v);
                            $span = $("<span>");//创建一个span标签,方便提示错误信息的时候用
                            $span.addClass("pull-right").css("color","red");  //设置样式居右并且字体颜色为红色
                            $span.html(v[0]);//设置span里面的字体
                              $("#id_"+i).after($span).parent().addClass("has-error");//吧span标签放到每个input的后面显示并且让他的父亲变红,增加一个has-error的类

                             if (i=="__all__"){
                                 $("#id_password_again").after($span)
                             }
                        });
                    }
                }
            })
        });

        //头像预览
        $(".avatar_file").change(function () {
            var ele_file = $(this)[0].files[0]; //当前选中的文件
            var reader = new FileReader();
            reader.readAsDataURL(ele_file); //对应找到打开的url
            reader.onload=function () {
{#                方式一#}
                $(".avatar_img").attr("src",this.result) ; //this.result是上面找到的url
{#                方式二#}
{#                 $(".avatar_img")[0].src=this.result; //设置图片属性#}
            }
        })
    })
</script>
</body>
</html>

  

reg.css
.c1 {
    margin-right: 10px;
}

h2 {
    margin-top: 100px;
    margin-left: 280px;
}
.left{
    position: relative;
}
.right{
    width: 270px;
    height: 294px;
    position: absolute;
    top: 197px;
    left: 886px;
}
.registr_btn{
    width: 100px;
    margin-left: 200px;
}
.avatar{
    position: relative;
    width: 70px;
    height: 70px;
}
.avatar_img,.avatar_file{
    position: absolute;
    width: 70px;
    height: 70px;
    top: 0;
    left: 46px;
}
.avatar_file{
    opacity: 0;
}

  

 效果截图

技术分享图片

 

 

 
 

 

Django 【第十七篇】使用Form组件和Ajax实现用户注册

原文:https://www.cnblogs.com/xiaohema/p/8456436.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!