Django中forms组件(常用很重要) - wfw001

公告

基础：forms组件有什么用

1.渲染html代码
2.校验数据
3.展示提示信息

一.如何使用forms组件

#如何使用forms组件，必须书写一个forms类
#1.导入forms
from django import forms
#2.定义一个form组件类并继承forms.Form
class  MyForm(forms.Form):
    #3.设置用户名密码最小最大长度
    username=forms.CharField(min_length=8,max_length=12,label="用户名")
    password=forms.CharField(min_length=8,max_length=12,label="密码")
    #4.email必须符合邮箱格式
    email=forms.EmailField(label="邮箱")

二.forms常用的校验方法

# 将待校验的数据组织成字典的形式传入
# obj=views.MyForm({})校验数据常用方法
# obj=views.MyForm({"username":"wangfengwei","password":"123456","email":"1@163.com"})
# obj.is_valid() 判断数据是否合法，只有一个不合法就返回False
# obj.cleaned_data 查看所有符合条件的数据
# obj.errors 查看所有不符合条件的数据以及不符合原因

校验逻辑：先从字典里面找有没有对应的键，如果有就拿着对应的value去对比校验条件，如果符合就放在cleaned_data里面，
        如果不符合就放在errors里面。

三.钩子函数

# 钩子函数：在特定的节点自动触发完成响应操作
# forms组件中有2类钩子：钩子函数类可以自定义校验规则
# 全局钩子：当你需要给多个字段校验规则时候使用
# 局部钩子：当给某个字段校验规则时候使用

#局部钩子函数:当上面校验通过后走这里的校验逻辑
def clean_username(self):
    username=self.cleaned_data.get("username")
    if "@" in username:
        #提示前端展示错误信息
        self.add_error('username','用户名不能包含@')
    #将钩子函数获取到的的数据在放回去
    return username

#全局钩子函数
def clean(self):
    password=self.cleaned_data.get("password")
    if len(password)>8:
        self.add_error("password","长度错误")
    return self.cleaned_data

四.后端如何调用写好的forms组件

def ab_form(request):
    #渲染html：不能渲染button按钮，只能渲染input框
    #如何将多个参数返回给前端呢？
    if request.method=="POST":
        #1.产生一个空对象并将request.POST传给自己换个空对象
        forms_obj=MyForm(request.POST)
        #2.直接将该空对象返回给html
        return render(request,'ab_form.html',locals())
        #3.去html页面渲染

五.前端如何渲染html

<body>
<form action="" method="post">

    <p>第1种渲染方式:自动渲染</p>
    {{ forms_obj.as_p }}

    <p>第2中渲染方式:自定义选择某个框渲染</p>
    forms_obj.username.label 拿到框的注释信息 forms_obj.username拿到框
    {{ forms_obj.username.label }}:{{ forms_obj.username }}

    <p>第3种渲染方式(推荐使用)</p>
    {% for form in forms_obj %}
        <p>
        {{ form }}:输入框  {{ form.label }}：拿输入框的注释
            {{ form.label }}:{{ form }}
            <span style="color: red">{{ form.errors.0 }}</span>
        </p>
    {% endfor %}
    <input type="submit" class="btn ben-info">
</form>

</body>

六.常用参数有哪些(直接在加到后面即可)

xxx.html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrapmin.js"></script>
</head>
<body>
<form action="" method="post">

    <p>第1种渲染方式:自动渲染</p>
    {{ forms_obj.as_p }}

    <p>第2中渲染方式:自定义选择某个框渲染</p>
    forms_obj.username.label 拿到框的注释信息 forms_obj.username拿到框
    {{ forms_obj.username.label }}:{{ forms_obj.username }}

    <p>第3种渲染方式(推荐使用)</p>
    {% for form in forms_obj %}
        <p>
        {{ form }}:输入框  {{ form.label }}：拿输入框的注释
            {{ form.label }}:{{ form }}
            <span style="color: red">{{ form.errors.0 }}</span>
        </p>
    {% endfor %}
    <input type="submit" class="btn ben-info">
</form>

</body>
</html>

七.源码及效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrapmin.js"></script>
</head>
<body>
<form action="" method="post">

    <p>第1种渲染方式:自动渲染</p>
    {{ forms_obj.as_p }}

    <p>第2中渲染方式:自定义选择某个框渲染</p>
    forms_obj.username.label 拿到框的注释信息 forms_obj.username拿到框
    {{ forms_obj.username.label }}:{{ forms_obj.username }}

    <p>第3种渲染方式(推荐使用)</p>
    {% for form in forms_obj %}
        <p>
        {{ form }}:输入框  {{ form.label }}：拿输入框的注释
            {{ form.label }}:{{ form }}
            <span style="color: red">{{ form.errors.0 }}</span>
        </p>
    {% endfor %}
    <input type="submit" class="btn ben-info">
</form>

</body>
</html>

views.py文件
#1.导入forms
from django import forms
#2.定义一个form组件类并继承forms.Form
class  MyForm(forms.Form):
    #3.设置用户名密码最小最大长度
    username=forms.CharField(min_length=8,max_length=12,label="用户名",initial="默认值",required=False,
    error_messages={
        'required':"用户名不正确"
    },
     widget=forms.widgets.TextInput(attrs={"class":"form-contral"})
                             )
    password=forms.CharField(min_length=8,max_length=12,label="密码",error_messages={
        "min_length":"密码长度不能小于8位",
        "max_length":"密码不能大于12位",
        "required":"密码不能为空"
    })
    #4.email必须符合邮箱格式
    email=forms.EmailField(label="邮箱",error_messages={
        "invalid":"邮箱格式不正确",
        "required":"邮箱不能为空"
    })

    #局部钩子函数:当上面校验通过后走这里的校验逻辑
    def clean_username(self):
        username=self.cleaned_data.get("username")
        if "@" in username:
            #提示前端展示错误信息
            self.add_error('username','用户名不能包含@')
        #将钩子函数获取到的的数据在放回去
        return username

    #全局钩子函数
    def clean(self):
        password=self.cleaned_data.get("password")
        if len(password)>8:
            self.add_error("password","长度错误")
        return self.cleaned_data



def ab_form(request):
    if request.method=="POST":
        forms_obj=MyForm(request.POST)
        return render(request,'ab_form.html',locals())

posted on 2022-12-09 23:34 wfw001 阅读(143) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部