【一】定义form组件#

forms.py

1
# 定义form类
2
class MyForm(forms.Form):
3
    # username : 字符串类型  最小三位，最大八位
4
    username = forms.CharField(max_length=8, min_length=3, label="用户名",
5
                               error_messages={
6
                                   "max_length": "最大八位",
7
                                   "min_length": "最小三位",
8
                                   "required": "必填字段",
9
                               })
10
    # # username : 字符串类型  最小三位，最大八位 : 字符串类型  最小三位，最大八位
11
    password = forms.CharField(max_length=8, min_length=3, label="密码",
12
                               error_messages={
13
                                   "max_length": "最大八位",
14
                                   "min_length": "最小三位",
15
                                   "required": "必填字段",
16
                               })
17
    # email : 必须符合邮箱格式  xxx@xx.com
18
    email = forms.EmailField(label="邮箱",
19
                             error_messages={
20
                                 "invalid": "格式不正确",
21
                                 "required": "必填字段",
22
                             })

views.py

1
def index(request):
2
    # （1）产生一个空对象
3
    form_obj = MyForm()
4
    # （2） 直接将空对象传递给前端页面
5

6
    # （3） 获取前端输入的信息，校验并返回结果
7
    if request.method == "POST":
8
        # 获取前端输入的信息
9
        '''
10
        数据获取繁琐
11
        校验数据需要构造成字典格式传回
12
        ps：request.POST 可以看成是字典数据的格式
13
        '''
14
        # 校验并返回结果
15
        form_obj = MyForm(request.POST)
16
        # 判断数据是否合法
17
        if form_obj.is_valid():
18
            # 合法操作数据库存储数据
19
            return HttpResponse("OK")
20
        else:
21
            # 数据不合法 -- 展示错误信息给前端
22
            pass
23

24
    return render(request, 'index.html', locals())

【二】Form组件自带的#

注意上面的例子中，我们使用{{ form.name_of_field.errors }}模板语法，在表单里处理错误信息。
对于每一个表单字段的错误，它其实会实际生成一个无序列表，参考下面的样子：

1
<ul class="errorlist">
2
    <li>Sender is required.</li>
3
</ul>

这个列表有个默认的CSS样式类errorlist，如果你想进一步定制这个样式，可以循环错误列表里的内容，然后单独设置样式：

1
{% if form.subject.errors %}
2
    <ol>
3
    {% for error in form.subject.errors %}
4
        <li><strong>{{ error|escape }}</strong></li>
5
    {% endfor %}
6
    </ol>
7
{% endif %}

一切非字段的错误信息，比如表单的错误，隐藏字段的错误都保存在{{ form.non_field_errors }}中，上面的例子，我们把它放在了表单的外围上面，它将被按下面的HTML和CSS格式渲染：

1
<ul class="errorlist nonfield">
2
    <li>Generic validation error</li>
3
</ul>

【三】遍历渲染错误信息#

【1】自定义前端模板#

1
<form action="" method="post">
2
    {% for field in form_obj %}
3
        <div class="fieldWrapper">
4
            {{ field.errors }}
5
            {{ field.label_tag }} {{ field }}
6
            {% if field.help_text %}
7
                <p class="help">{{ field.help_text|safe }}</p>
8
            {% endif %}
9
        </div>
10
    {% endfor %}
11
    <p><input type="submit"></p>
12
</form>

【2】自动生成前端标签#

1
<form action="" method="post">
2

3
  <div class="fieldWrapper">
4

5
      <label for="id_username">用户名:</label> <input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username">
6

7
  </div>
8

9
  <div class="fieldWrapper">
10

11
      <label for="id_password">Password:</label> <input type="text" name="password" maxlength="8" minlength="3" required="" id="id_password">
12

13
  </div>
14

15
  <div class="fieldWrapper">
16

17
      <label for="id_email">Email:</label> <input type="email" name="email" required="" id="id_email">
18

19
  </div>
20

21
<p><input type="submit"></p>
22
</form>

下表是{{ field }}中非常有用的属性，这些都是Django内置的模板语言给我们提供的方便：

属性	说明
{{ field.label }}	字段对应的label信息
{{ field.label_tag }}	自动生成字段的label标签，注意与{{ field.label }}的区别。
{{ field.id_for_label }}	自定义字段标签的id
{{ field.value }}	当前字段的值，比如一个Email字段的值someone@example.com
{{ field.html_name }}	指定字段生成的input标签中name属性的值
{{ field.help_text }}	字段的帮助信息
{{ field.errors }}	包含错误信息的元素
{{ field.is_hidden }}	用于判断当前字段是否为隐藏的字段，如果是，返回True
{{ field.field }}	返回字段的参数列表。例如{{ char_field.field.max_length }}

【四】禁止浏览器做校验#

浏览器自动帮我们做数据校验，但是前端的校验不安全
如何禁止浏览器做校验？
在form表单中加入参数即可

1
<form action="" method="post" novalidate>

【1】自定义前端模板#

1
<form action="" method="post" novalidate>
2
  {% for form in form_obj %}
3
      <p> {{ form.label }} : {{ form }}</p>
4
      <span style="color: red">{{ form_obj.errors }}</span>
5
  {% endfor %}
6
  <p><input type="submit"></p>
7
</form>

【2】自动生成前端标签#

1
<form action="" method="post" novalidate="">
2

3
        <p> 用户名 : <input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username"></p>
4
        <span style="color: red"></span>
5

6
        <p> Password : <input type="text" name="password" maxlength="8" minlength="3" required="" id="id_password"></p>
7
        <span style="color: red"></span>
8

9
        <p> Email : <input type="email" name="email" required="" id="id_email"></p>
10
        <span style="color: red"></span>
11

12
    <p><input type="submit"></p>
13
</form>

【五】不可见字段#

很多时候，我们的表单中会有一些隐藏的不可见的字段，比如honeypot。
我们需要让它在任何时候都仿佛不存在一般，比如有错误的时候，如果你在页面上显示了不可见字段的错误信息，那么用户会很迷惑，这是哪来的呢？
所以，通常我们是不显示不可见字段的错误信息的。
Django提供了两种独立的方法，用于循环那些不可见的和可见的字段，hidden_fields()和visible_fields()。
这里，我们可以稍微修改一下前面的例子：

1
{# 循环那些不可见的字段 #}
2
{% for hidden in form.hidden_fields %}
3
{{ hidden }}
4
{% endfor %}
5
{# 循环可见的字段 #}
6
{% for field in form.visible_fields %}
7
    <div class="fieldWrapper">
8
        {{ field.errors }}
9
        {{ field.label_tag }} {{ field }}
10
    </div>
11
{% endfor %}

【六】注意事项#

【1】必要条件#

get 请求和 post 传给页面对象变量名必须一样

1
def index(request):
2
    # （1）产生一个空对象
3
    form_obj = MyForm() # ******这里的变量名
4
    # （2） 直接将空对象传递给前端页面
5

6
    # （3） 获取前端输入的信息，校验并返回结果
7
    if request.method == "POST":
8
        # 获取前端输入的信息
9
        '''
10
        数据获取繁琐
11
        校验数据需要构造成字典格式传回
12
        ps：request.POST 可以看成是字典数据的格式
13
        '''
14
        # 校验并返回结果
15
        form_obj = MyForm(request.POST) # ******这里的变量名
16
        # 判断数据是否合法
17
        if form_obj.is_valid():
18
            # 合法操作数据库存储数据
19
            return HttpResponse("OK")
20
        else:
21
            # 数据不合法 -- 展示错误信息给前端
22
            pass
23

24
    return render(request, 'index.html', locals())

【2】forms 组件#

当你的数据不合法的情况下，会记录上一次的数据，基于上一次的数据再编辑

音乐

音乐

【一】定义form组件#

【二】Form组件自带的#

【三】遍历渲染错误信息#

【1】自定义前端模板#

【2】自动生成前端标签#

【四】禁止浏览器做校验#

【1】自定义前端模板#

【2】自动生成前端标签#

【五】不可见字段#

【六】注意事项#

【1】必要条件#

【2】forms 组件#

支持与分享

音乐

Django框架Form组件之渲染错误信息

【一】定义form组件#

【二】Form组件自带的#

【三】遍历渲染错误信息#

【1】自定义前端模板#

【2】自动生成前端标签#

【四】禁止浏览器做校验#

【1】自定义前端模板#

【2】自动生成前端标签#

【五】不可见字段#

【六】注意事项#

【1】必要条件#

【2】forms 组件#

支持与分享