表单(一)
2020-02-11 本文已影响0人
费云帆
单纯从前端的html来说，表单是用来提交数据给服务器的,不管后台的服务器用的是Django还是PHP语言还是其他语言。只要把input标签放在form标签中，然后再添加一个提交按钮(submit)，那么以后点击提交按钮，就可以将input标签中对应的值提交给服务器了。
Django中的表单：
Django中的表单丰富了传统的HTML语言中的表单。在Django中的表单，主要做以下两件事：
<1> 渲染表单模板。
<2> 表单验证数据是否合法
以生成'留言板'网页为示例:
步骤<1> 新建'front app',新建'forms'
# forms
# 总览一下,操作方法与'模型'类似
from django import forms
class MessageBoardForm(forms.Form): # 继承Form类
title=forms.CharField(max_length=10,min_length=2)
content=forms.CharField(widget=forms.Textarea)# 使用widget(组件)指定'Textarea'类型
email=forms.EmailField()
reply=forms.BooleanField(required=False)# reply字段通过'required'参数取值,表示'可选','可不选'
步骤<2> '服务端'加载'MessageBoardForm'
# front.views
from django.shortcuts import render
from django.views.generic import View
from .forms import MessageBoardForm
# FormView用来处理'get'和'post'请求
class FormView(View):
def get(self,request):
# 生成空表单并传递context
# 这个form对象包含了不少方法和属性,可以了解
form=MessageBoardForm()
context={
'form':form
}
return render(request,'index.html',context=context)
步骤<3> 前端模板的渲染并映射url
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Message Board</title>
</head>
<body>
<form action="" method="post">
<table>
{{ form.as_table }} # 这里使用form对象的as_table渲染表单
<tr>
<td></td>
<td>
<input type="submit" value="提交"> # 定义'提交'按钮,发送数据
</td>
</tr>
</table>
</form>
</body>
</html>
'''
实际开发中,很少用到form.as_table,比如想插入CSS之类的样式,这里要怎么破...
'''
# urls
from django.urls import path
from front import views
urlpatterns = [
path('', views.FormView.as_view()),
]
启动服务,刷新网页,看看效果(每个'字段'会'自动'添加':'符号)
通过试验,即使后端的'post'方法没有定义,但是前端依然对'字段'作了限制
比如'content'字段不能为空,'email'字段的格式'随便写'也是不能通过的
(请不要'图样图森破',以为'后端'就不用对'字段'作限制了...原因自己想...)
• 小小修改一下'forms.py',变更模板的标签(通过'label'设置中文标签)
# forms
from django import forms
class MessageBoardForm(forms.Form):
# 通过label参数设置中文标签
title=forms.CharField(max_length=10,min_length=2,label='标题')
content=forms.CharField(widget=forms.Textarea,label='内容')
email=forms.EmailField(label='邮箱')
reply=forms.BooleanField(required=False,label='回复')
步骤<4> 后端'post'方法编写:
# views
from django.shortcuts import render
from django.views.generic import View
from .forms import MessageBoardForm
from django.http import HttpResponse
class FormView(View):
def get(self,request):
......
return render(request,'index.html',context=context)
def post(self,request):
# 这里依然涉及form对象的一些属性和方法,有空可以去了解(is_valid和cleaned_data经常搭配使用)
form=MessageBoardForm(request.POST) # 接收POST传过来的'类字典对象'
if form.is_valid(): # 验证是否可用
title=form.cleaned_data.get('title') # 利用cleaned_data属性获取对应的字段
content=form.cleaned_data.get('content')
email=form.cleaned_data.get('email')
reply=form.cleaned_data.get('reply')
# 终端获取前端传过来的数据
print('*'*40)
print(title)
print(content)
print(email)
print(reply)
print('*'*40)
return HttpResponse('留言板回复成功!!!')
else:
print(form.errors) # 如果用户发送的字段验证失败,'终端打印错误信息'
return HttpResponse('fail!')
'''
<ul class="errorlist"><li>content<ul class="errorlist"><li>This field is required.</li></ul></li><li>title<ul class="errorlist"><li>This field is required.</li></ul></li><li>email<ul class="errorlist"><li>This field is required.</li></ul></li></ul>
'''
异常的处理:
errors属性返回的'信息'并不友好,查看type(form.errors)
# class 'django.forms.utils.ErrorDict' ,errors实质就是'ErrorDict'的一个实例,查看源码,我们调用get_json_data()返回更加友好的错误信息:
class FormView(View):
......
else:
# {'content': [{'message': 'This field is required.', 'code': 'required'}], 'title': [{'message': 'This field is required.', 'code': 'required'}], 'email': [{'message': 'This field is required.', 'code': 'required'}]}
print(form.errors.get_json_data())
return HttpResponse('fail!')
'''
显然看起来更加清楚了
'''
进一步的改进:使用中文'自定义'出错内容
# forms
from django import forms
class MessageBoardForm(forms.Form):
# 通过 error_messages 参数自定义'出错信息'
title=forms.CharField(max_length=10,min_length=2,label='标题',
error_messages=dict(min_length='字段不能少于2个字符'))
content=forms.CharField(widget=forms.Textarea,label='内容',
error_messages=dict(required='必须输入content字段'))
email=forms.EmailField(label='邮箱',error_messages=dict(required='必须输入email字段'))
reply=forms.BooleanField(required=False,label='回复')
'''
{'content': [{'message': '必须输入content字段', 'code': 'required'}], 'email': [{'message': '必须输入email字段', 'code': 'required'}], 'title': [{'message': 'This field is required.', 'code': 'required'}]}
'''
使用纯前端的实例(例如前端不再使用form.as_table):
# forms
from django import forms
class MessageBoardForm(forms.Form):
# 这里传递的key不仅仅只有'required',比如还有'invalid'
email=forms.EmailField(label='邮箱',error_messages=dict(required='必须输入email字段'))
price=forms.FloatField(label='价格',error_messages=dict(invalid='请输入正确的浮点类型'))
# views
from django.shortcuts import render
from django.views.generic import View
from .forms import MessageBoardForm
from django.http import HttpResponse
from django.forms.utils import ErrorDict
class FormView(View):
# 不再传递context=form,直接加载前端表单
def get(self,request):
return render(request,'index.html')
def post(self,request):
form=MessageBoardForm(request.POST)
if form.is_valid():# 字段的验证,在调用is_valid()的时候,就会被验证
price=form.cleaned_data.get('price')
return HttpResponse('数据提交成功!!!')
else:
print(form.errors.get_json_data()) # 最终都是调用get_json_data()方法
return HttpResponse('数据提交失败!')
# html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Message Board</title>
</head>
<body>
<form action="" method="post">
<label> 邮箱:
<input type="text" name="email">
</label>
<label> 价格:
<input type="text" name="price">
</label>
<input type="submit" value="submit">
</form>
</body>
</html>
重启服务,故意输错,看看终端的效果
'''
{'price': [{'message': '请输入正确的浮点类型', 'code': 'invalid'}], 'email': [{'message': '必须输入email字段', 'code': 'required'}]}
'''
注意:由于前端使用了纯html语言,前端界面不会再对邮箱字段的'有效性'进行验证,而我们之前使用form.as_table是可以从前端对字段的'有效性'进行验证的!
