django-crispy-forms

最新推荐文章于 2024-07-17 11:32:34 发布

Ot...

最新推荐文章于 2024-07-17 11:32:34 发布

阅读量1k

点赞数

文章标签： django

本文链接：https://blog.csdn.net/qq_43857082/article/details/107215292

版权

效果图：
在这里插入图片描述

forms.py:

from crispy_forms.bootstrap import AppendedText, PrependedText, FormActions
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Field, Submit, Reset
from django import forms
from django.forms import formset_factory, modelformset_factory

from app.models import Report, User


class CrispyForm(forms.Form):
    name = forms.CharField(max_length=100, help_text="提示：请填写你的真实姓名")
    age = forms.IntegerField(max_value=30)
    money = forms.CharField(max_length=50)
    happy = forms.CharField(max_length=50)
    introduction = forms.CharField(max_length=300, widget=forms.Textarea)
    sex = forms.ChoiceField(choices=(('option1', '男'), ('option2', '女')), widget=forms.RadioSelect, initial='option2')
    love = forms.MultipleChoiceField(choices=(('o1', '唱歌'), ('o2', '跳舞'), ('o3', '运动'),
                                              ('o4', '睡觉'), ('o5', '游戏')), widget=forms.CheckboxSelectMultiple,
                                     initial=('o1', 'o3'))
    multi_select = forms.MultipleChoiceField(
        choices=(('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5')),
    )

    helper = FormHelper()
    helper.form_class = 'form-horizontal'
    # Layout()中必须包含上面所有的字段，否则会报错
    helper.layout = Layout(
        Field('name', css_class='input-xlarge'),
        Field('introduction', rows="3", css_class='input-xlarge'),
        Field('love', style="background: blue; padding: 10px;"),
        'sex',
        AppendedText('age', '岁'),
        PrependedText('money', '￥'),
        PrependedText('happy', '<input type="checkbox" checked="checked" value="" id="" name="">'),
        'multi_select',
        FormActions(
            Submit('report_submit', '提交', css_class="btn-primary"),
            Reset('reset', '撤销')
        )
    )

views.py

def crispy(request):
    if request.method == 'GET':
        crispy_form = CrispyForm()
        return render(request, 'app/crispy.html', {'crispy_form': crispy_form})
    elif request.method == 'POST':
        crispy_form = CrispyForm(request.POST)
        if crispy_form.is_valid():
            return render(request, 'app/crispy.html', {'crispy_data': crispy_form.cleaned_data})
        else:
            print(crispy_form.cleaned_data)
            return HttpResponse("表单校验错误")

crispy.html

{% load crispy_forms_tags %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CRISPY TEST PAGE</title>
    <link href="{% static 'app/bootstrap-3.3.7/dist/css/bootstrap.css'%}" rel="stylesheet">
    <script src="{% static 'app/bootstrap-3.3.7/js/tests/vendor/jquery.min.js' %}"></script>
    <script src="{% static 'app/bootstrap-3.3.7/dist/js/bootstrap.js' %}"></script>
</head>
<body>
    <div style="width:30%" class="col-md-offset-4">
    {#  <form action="{% url 'app:crispy' %}" method="post">  #}
    {#  {% csrf_token %}  #}
    {#  {{ crispy_form | crispy }}    使用这个表达式的话FormHelper不起作用  #}

        {#  POST只传过来了clean.data，并没有把crispy_form表单直接传过来，不加if的话会报错  #}
        {% if crispy_form %}
            {% crispy crispy_form %}
        {% endif %}

{#        <input type="submit" value="提交" class="btn btn-default">#}
{#    </form>#}
    </div>
    <p style="color: red">{{ crispy_data }}</p>
</body>
</html>

settings.py

INSTALLED_APPS = [
    ......
    'crispy_forms',
]

# 使用crispy
CRISPY_TEMPLATE_PACK = 'bootstrap3'

注意：

要自己将bootstrap导入静态文件夹

Ot...

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
django-crispy-forms

效果图：forms.py:from crispy_forms.bootstrap import AppendedText, PrependedText, FormActionsfrom crispy_forms.helper import FormHelperfrom crispy_forms.layout import Layout, Field, Submit, Resetfrom django import formsfrom django.forms import formset_
复制链接

扫一扫