一篇文章浅析Django Form组件相关知识

前言

在上一篇时，我们小试牛刀了以下Django Form组件的使用，一篇文章带你了解Django Form组件(入门篇)，没来得及的小伙伴可以一起看看。但是你可能会有很多疑问，并不知道怎么使用。

并且知道Form组件的功能。

• 生成HTML标签。
• 验证提交的数据。
• 保留提交之前的数据。

所以本篇就接着上次的继续,来一起学习以下Django Form组件如何使用。

Form组件的理解

没有使用Form组件时

在一般情况下，我们如果编写输入框时，在Html中，一般都是这样写的。

代码

... 
<form method="post" action="" novalidate> 
    <div> 
        <label>用户名:</label> 
        <input type="text" name="uname"> 
    </div> 
    <div> 
        <label>密码:</label> 
        <input type="text" name="upwd"> 
    </div> 
    <div><input type="submit"></div> 
</form> 
... 

实现效果

使用Form组件时

在使用Form组件时，我们通常需要定义Form类。

这个Form，里面的字段，就可以理解为input标签，只不过是在后端写的。

Form类

from django.forms import Form 
class LoginForm(Form): 
    uname = fields.CharField(label="用户名") 
    upwd = fields.CharField(label="密码") 

views.py

from django.shortcuts import render 
def login(request): 
    form = LoginForm() 
    return render(request, "login_f.html", {"form": form}) 

html

... 
<form method="post" action="" novalidate> 
    <div> 
        <label>{{ form.uname.label }}:</label> 
        {{ form.uname }} 
        <!--  
            form.uname.errors.0 是为了展示填写不正确的错误信息 
            errors.0是因为错误可能有多个 
            但是通常情况下,取第一个错误足够 
         --> 
        {{ form.uname.errors.0 }} 
    </div> 
    <div> 
        <label>{{ form.upwd.label }}:</label> 
        {{ form.upwd }} 
        {{ form.upwd.errors.0 }} 
    </div> 
    <div><input type="submit"></div> 
</form> 
... 

小总结

可以发现，我并没有写input代码，而是直接调用后端的form.<字段名>出来的。

Form类生成的Html

可以发现，基本上和自己写的Html差不多，生成的id为id+<字段名>。

Form生成的Html和手动写Html对应图

通过对应图确定，通过后端的form.<字段>生成的直接就是input标签。

好了，到这，就确定了Form类，就是为我们生成input标签的。

Form使用

使用有以下步骤。

1.创建Form类,尽可能和models对上。

class LoginForm(Form): 
    uname = fields.CharField(label="用户名") 
    upwd = fields.CharField(label="密码") 

因为Form提交的数据，可以转换成dict,key就是Form字段名。

如果Form字段和models对上，直接models.<模型类>.objects.create(**dict)。

2.如果是GET请求，实例化Form对象，并且返回页面。

def login(request): 
    if request.method == 'GET': 
        form = LoginForm() 
        return render(request, "login_f.html", {"form": form}) 

3.如果是POST请求，实例化Form对象时，传入request.POST,request.FILES,并且验证。

# 接着上面 
    elif request.method == "POST": 
        form = LoginForm(request.POST, request.FILES) 
        ########### 验证数据 
        if form.is_valid(): 
            # 验证成功 
            # 验证成功之后的数据,key就是Form类的字段名 
            print(form.cleaned_data)  # {'uname': '1212', 'upwd': '1212'} 
            return HttpResponse("ok") 
        # 验证失败 
        # 虽然返回的还是页面 
        # 但是form会把上次输入框内容保存下来,并且还会展示errors信息 
        return render(request, "login_f.html", {"form": form}) 

4.前端使用后端传过来的form对象。

方式一，点每个字段

<form method="post" action="" novalidate> 
    <div> 
        <!-- form.uname.label点的是label属性  --> 
        <label>{{ form.uname.label }}:</label> 
        {{ form.uname }} 
        <!-- 
            form.uname.errors.0 是为了展示填写不正确的错误信息 
            errors.0是因为错误可能有多个 
            但是通常情况下,取第一个错误足够 
         --> 
        {{ form.uname.errors.0 }} 
    </div> 
    <div> 
        <label>{{ form.upwd.label }}:</label> 
        {{ form.upwd }} 
        {{ form.upwd.errors.0 }} 
    </div> 
    <div><input type="submit"></div> 
</form> 

方式二，循环form对象

form对象是可以循环的，循环的每个form对象就是每个字段对象。

<form method="post" action="" novalidate> 
    {% for foo in form %} 
        <div> 
            <label>{{ foo.label }}:</label> 
            {{ foo }} 
            {{ foo.errors.0 }} 
        </div> 
    {% endfor %} 
    <div><input type="submit"></div> 
</form> 

 所以，如果一个表有很多的字段时，尽可能的采用循环方式。
本文转载自网络，原文链接：https://mp.weixin.qq.com/s/4nXTsJAbYHP3LTcJHZHkFQ
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：让你的 JS 代码变得更加优雅且可维护 下一篇：没有了