django_forms
forms组件简化了前端编写，django通过forms组件实现前端样式的构建、渲染与校验。
效果图：
forms组件
from django.forms import widgets
from django import forms
from django.core.exceptions import ValidationError
wdg1 = widgets.TextInput(attrs={'class':'form-control'}) # 可以给input标签加任何属性
wdg2 = widgets.PasswordInput(attrs={'class':'form-control'})
class UserForms(forms.Form): # 创建forms校验对象
name = forms.CharField(min_length=4, max_length=8,widget=wdg1, label='姓名') # min_length 校验规则
pwd = forms.CharField(min_length=4,widget=wdg2, label='密码')
r_pwd = forms.CharField(min_length=4,widget=wdg2, label='确认密码')
email = forms.EmailField(widget=wdg1, label='邮箱')
tel = forms.CharField(min_length=11, max_length=11,widget=wdg1, label='手机号')
#局部钩子
def clean_name(self):
val = self.cleaned_data.get('name')
if not val.isdigit():
return val
else:
raise ValidationError('用户名不能全是数字')
# 全局钩子
def clean(self):
pwd = self.cleaned_data.get('pwd')
r_pwd = self.cleaned_data.get('r_pwd')
if pwd == r_pwd:
return self.cleaned_data
else:
raise ValidationError('两次密码不一致!')
视图函数
1 from django.shortcuts import render
2 from django.forms import widgets
3 from django import forms
4
5 # Create your views here.
6
7
8 # 简单的forms校验
9 def simple_forms(request):
10 class UserForms(forms.Form): # 创建forms校验对象
11 name = forms.CharField(min_length=4, max_length=8) # min_length 校验规则
12 pwd = forms.CharField(min_length=4)
13 r_pwd = forms.CharField(min_length=4)
14 email = forms.EmailField()
15 tel = forms.CharField(min_length=11, max_length=11)
16 if request.method == 'POST':
17 res = UserForms(request.POST)
18 print(res)
19 print(res.is_valid()) # 规则是否校验通过 全部通过为True
20 if res.is_valid():
21 # cleaned_data 校验通过的所有字段，比如输入100个字段，但是这里只校验4个字段，得到的就是过滤后的4个字段
22 print(res.cleaned_data)
23 else:
24 print(res.cleaned_data) # 通过的部分字段，哪个字段校验通过就往这里加
25 print(res.errors) # ErrorDict : {"校验错误的字段":["错误信息",]} 不通过的往这里加，是一个字典
26 print(res.errors.get('email')) # ErrorList ["错误信息",] 是一个列表
27 print(res.errors.get('email')[0]) # 取第一个错误信息，一般都是取第一个错误信息返回给前端
28 return render(request, 'simple_forms.html')
29
30
31 # forms校验 前端渲染 为了避免前端和后端字段不一致，可以直接由后端渲染前端页面
32 def multi_forms(request):
33 wdg1 = widgets.TextInput(attrs={'class':'form-control'}) # 可以给input标签加任何属性
34 wdg2 = widgets.PasswordInput(attrs={'class':'form-control'})
35 class UserForms(forms.Form): # 创建forms校验对象
36 name = forms.CharField(min_length=4, max_length=8,widget=wdg1, label='姓名') # min_length 校验规则
37 pwd = forms.CharField(min_length=4,widget=wdg2, label='密码')
38 r_pwd = forms.CharField(min_length=4,widget=wdg2, label='确认密码')
39 email = forms.EmailField(widget=wdg1, label='邮箱')
40 tel = forms.CharField(min_length=11, max_length=11,widget=wdg1, label='手机号')
41 myform = UserForms() # 实例传给前端进行渲染
42 if request.method == 'POST':
43 # 将这个传给前端，可以渲染错误提示信息 myform.tel.errors.0 拿到相应字段的错误信息进行渲染
44 # 而且将用户输入的信息重传给用户 避免待提交的数据刷新
45 myform = UserForms(request.POST)
46 print(myform)
47 print(myform.is_valid()) # 规则是否校验通过 全部通过为True
48 if myform.is_valid():
49 # cleaned_data 校验通过的所有字段，比如输入100个字段，但是这里只校验4个字段，得到的就是过滤后的4个字段
50 print(myform.cleaned_data)
51 else:
52 print(myform.cleaned_data) # 通过的部分字段，哪个字段校验通过就往这里加
53 print(myform.errors) # ErrorDict : {"校验错误的字段":["错误信息",]} 不通过的往这里加，是一个字典
54 print(myform.errors.get('email')) # ErrorList ["错误信息",] 是一个列表
55 print(myform.errors.get('email')[0]) # 取第一个错误信息，一般都是取第一个错误信息返回给前端
56 return render(request, 'multi_forms.html', locals())
57 return render(request, 'multi_forms.html',locals())
58
59
60 # 局部钩子与全局钩子
61 def gouzi(request):
62 # 通models，可以将forms放在一个文件，然后导入
63 from forms_app01.myforms import UserForms
64 myform = UserForms()
65 if request.method == 'POST':
66 myform = UserForms(request.POST)
67 if myform.is_valid():
68 print(myform.cleaned_data)
69 else:
70 clean_error = myform.errors.get("__all__")
71 return render(request, 'gouzi.html', locals())
72 return render(request, 'gouzi.html',locals())
simple_forms.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>简单forms校验</title>
6 <link rel="stylesheet" href="/static/bootstrap.min.css">
7 </head>
8 <body>
9 <div class="container">
10 <div class="row">
11 <div class="col-md-6 col-md-offset-3">
12 <h3>简单forms校验</h3>
13 <form action="" method="post">
14 {% csrf_token %}
15 <label for="user">用户名</label>
16 <p><input type="text" name="name" id="name"></p>
17 <label for="pwd">密码</label>
18 <p><input type="password" name="pwd" id="pwd"></p>
19 <label for="r_pwd">确认密码</label>
20 <p><input type="password" name="r_pwd" id="r_pwd"></p>
21 <label for="email">邮箱</label>
22 <p><input type="text" name="email" id="email"></p>
23 <label for="phone">手机</label>
24 <p><input type="text" name="tel" id="phone"></p>
25 <input type="submit">
26 </form>
27 </div>
28 </div>
29 </div>
30 </body>
31 </html>
gouzi.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>钩子</title>
6 <link rel="stylesheet" href="/static/bootstrap.min.css">
7 </head>
8 <body>
9 <div class="container">
10 <div class="row">
11 <div class="col-md-6 col-md-offset-3">
12 <hr>
13 <h3>钩子</h3>
14 <form action="" method="post">
15 {% csrf_token %}
16 {% for field in myform %}
17 <label for="">{{ field.label }}</label>
18 {{ field }}
19 <span class="pull-right" style="color: red">
20 {% if field.label == '确认密码' %}
21 {{ clean_error.0 }}
22 {% else %}
23 {{ field.errors.0 }}
24 {% endif %}
25 </span>
26 {% endfor %}
27 <input type="submit" class="btn btn-success mybtn">
28 </form>
29 </div>
30 </div>
31 </div>
32 </body>
33 </html>