首页 > Web开发 > 详细

flask 利用flask_wtf扩展 创建web表单

时间:2019-03-05 14:17:41      阅读:202      评论:0      收藏:0      [点我收藏+]

在Flask中,为了处理web表单,我们一般使用Flask-WTF扩展,它封装了WTForms,并且它有验证表单数据的功能

  1. 创建语句格式: startTime = DateTimeField(‘计划开始时间‘, validators=[DataRequired(‘不可为空‘),EqualTo(‘nowTime‘,message=‘两次事件必须一致‘)],format=‘%Y/%m/%d %H:%M:%S‘ render_kw={‘placeholder‘:‘2018-06-03 00:00:00‘, ‘id‘: ‘rz1‘,‘autocomplete‘: "off"}
  2. html效果:

    <label>计划开始时间</label>

    <input autocomplete="off" class="form-control" id="rz1" name="startTime" placeholder="2018-06-03 00:00:00" required="" type="text" value="">  

  3. 页面展示效果:

    技术分享图片

 

解析:

  • DataTimeField是从wtforms包导入的字段类 from wtfms import SelectField, StringField, SubmitField, TextField, DateTimeField, FileField。。。
  • ‘计划开始时间‘是input标签的lable
  • validators是验证器,验证输入值的合法性,以列表的形式封装各种验证函数,验证函数由wtforms.validators导入:from wtforms.validators import DataRequired
  • format指定展示格式
  • render_kw以字典的形式存放input标签的各种属性

 

form.py文件在项目中的位置:与逻辑层同级,即与view.py同级,以便于不同的功能块放不同的form表单

项目效果:  三个文件依次是创建蓝图  创建form表单  逻辑(视图)函数           

                     技术分享图片

 

创建表单部分代码案例:

技术分享图片
 1 from flask_wtf import Form
 2 from wtforms import SelectField, StringField, SubmitField, TextField, DateTimeField, FileField, SelectMultipleField, TextAreaField, HiddenField
 3 from wtforms.validators import DataRequired
 4 
 5 
 6 class TaskinfoAdd(Form):
 7     taskName = StringField(任务名称:, [DataRequired(任务名称不能为空)], render_kw={placeholder: 任务名称, autocomplete: off})
 8     taskInfo = TextAreaField(详情描述:, render_kw={placeholder: 任务描述..., autocomplete: off})
 9     urgentId = SelectField(紧急程度:, validators=[DataRequired(请选择紧急程度)], coerce=int, render_kw={style: width:110px})
10     resPeople = StringField(责任人:, [DataRequired(责任人不能为空)], render_kw={class: res-people, placeholder: 责任人, style: width:110px, data-toggle:"modal", data-target:"#myModal2"})
11     exePeople = StringField(参与人(多选):, render_kw={class: exe-people, placeholder: 参与人(多选), style: width:300px})
12     sharePeople = StringField(共享人(多选):, render_kw={placeholder: 共享人(多选), style: width:300px})
13     startTime = DateTimeField(计划开始时间:, [DataRequired(开始时间不能为空)], format=%Y-%m-%d %H:%M:%S, render_kw={placeholder:2018-06-03 00:00:00, id: rz1, class: form-control calendar-control, autocomplete: "off"})
14     endTime = DateTimeField(计划完成时间:, [DataRequired(完成时间不能为空)], format=%Y-%m-%d %H:%M:%S, render_kw={placeholder:2019-06-06 00:00:00, id: rz2, class: form-control calendar-control, autocomplete: off})
15     workTime = StringField(计划工时(分钟):, [DataRequired(工时不能为空)], render_kw={placeholder: 60})
16 
17     loadFile = FileField(附件, render_kw={multiple: multiple})
18     submit = SubmitField(保存)
19 
20 
21 class TaskinfoEdit(Form):
22     taskName = StringField(任务名称:, [DataRequired(任务名称不能为空)])
23     taskInfo = TextAreaField(详情描述:, render_kw={placeholder: 任务描述..., autocomplete: off})
24     urgentId = SelectField(紧急程度:, validators=[DataRequired(不可为空)], coerce=int, render_kw={style: width:135px; display:inline-block})
25     resPeople = StringField(责任人:, [DataRequired(责任人不能为空)], render_kw={style: width:150px; display:inline-block})
26     advanceId = SelectField(进&nbsp;&nbsp;&nbsp;度:, coerce=int, render_kw={placehoder: 50%, style: width:153px; display:inline-block})
27     workTime = StringField(计划工时(分钟):, [DataRequired(工时不能为空)], render_kw={style: width:100px; display: inline-block})
28     exePeople = StringField(参与人:, render_kw={style: width:220px; display: inline-block})
29     sharePeopleTo = StringField(共享人:, render_kw={style: width:220px; display: inline-block})
30 
31     loadFile = FileField(上传附件:, render_kw={multiple: multiple})
32     download = StringField(下载附件:, render_kw={placehoder: 无附件, style: background: white; height:23px; display: inline-block}, id=download)
33     reason = StringField(超期原因:, render_kw={placeholder: 超期原因..., autocomplete: off})
34     submit = SubmitField(提交)
form.py

 

flask接收后端处理:

技术分享图片
 1 @task_mgm.route(/taskinfo_add, methods=[GET, POST])
 2 @login_required
 3 def taskinfo_add_fun():
 4     form1 = TaskinfoAdd()
 5     form1.urgentId.choices = [(urgences.id, urgences.urgentName) for urgences in Urgence.query.all()]
 6     if form1.validate_on_submit():
 7         task = MgmTask(taskName=form1.taskName.data, urgentId=form1.urgentId.data, resPeople=form1.resPeople.data,
 8                     exePeople=form1.exePeople.data, sharePeopleTo=form1.sharePeople.data, startTime=form1.startTime.data,
 9                     endTime=form1.endTime.data, workTime=form1.workTime.data, taskInfo=form1.taskInfo.data,
10                     createPeople=current_user.name)
11         # 替换汉语逗号
12         task.sharePeopleTo.replace(, ,)
13         task.resPeople.replace(, ,)
14         task.exePeople.replace(, ,)
15         #  保存上传的文档
16         upload(form1, task)
17         try:
18             db.session.add(task)
19             db.session.commit()
20         except Exception as e:
21             logging.error(e)
22         return redirect(url_for(task_mgm.taskinfo_add_fun))
23     return render_template(/task_mgm/taskinfo_mine.html, form1=form1, name=current_user.name, grade=current_user.grade)
24 
25 
26 # 编辑任务
27 @task_mgm.route(/taskinfo_editID=<int:num>, methods=[GET, POST])
28 @login_required
29 def taskinfo_edit_fun(num):
30     task = MgmTask.query.get(num)
31     pageType = request.values.get(pageType)
32     formEdit = TaskinfoEdit(obj=task)
33     formEdit.urgentId.choices = [(urgences.id, urgences.urgentName) for urgences in Urgence.query.all()]
34     formEdit.advanceId.choices = [(advances.id, advances.name) for advances in Advance.query.all()]
35     if task.fileName:
36         formEdit.download.data = task.fileName
37     if formEdit.validate_on_submit():
38         formEdit.populate_obj(task)  # 重新填充表单
39         if formEdit.advanceId.data == 5:
40             task.finishTime = datetime.now()
41         upload(formEdit, task)
42         try:
43             db.session.add(task)
44             db.session.commit()
45         except Exception as e:
46             logging.error(e)
47         
48     page = request.args.get(page, 1, type=int)
49     pagination = Comment.query.filter(Comment.taskId == num).order_by(Comment.createTime.desc()).paginate(
50             page, per_page=225, error_out=False)
51     comments = pagination.items
52     return render_template(/task_mgm/taskinfo_edit.html, formEdit=formEdit, header=编辑任务, comments=comments, pagination=pagination, pageType=pageType, name=current_user.name, grade=current_user.grade)
view.py

 

html前端可以继承bootstrap的wtf.html  也可以直接写:

  • 继承:    
1 {% import "bootstrap/wtf.html" as wtf %}
2 
3 <div class="modal-body" style="margin-top: 20px">{{ wtf.quick_form(form1, form_type=horizontal, horizontal_columns=(md, 3, 8)) }}
5   <button type="button" class="btn btn-default" data-dismiss="modal"
6    style="position:relative; margin-left: 460px; bottom:49px;">关闭
7   </button>
8   </div>
  • 不继承
1 <form method="post">
2     {#设置csrf_token#}
3     {{ form.csrf_token() }}
4     {{ form.username.label }}{{ form.username }}<br>
5     {{ form.password.label }}{{ form.password }}<br>
6     {{ form.password2.label }}{{ form.password2 }}<br>
7     ...
8     {{ form.input }}<br>
9 </form>

 

WTForms支持的HTML标准字段:

字段对象说明
StringField 文本字段
TextAreaField 多行文本字段
PasswordField 密码文本字段
HiddenField 隐藏文件字段
DateField 文本字段,值为 datetime.date 文本格式
DateTimeField 文本字段,值为 datetime.datetime 文本格式
IntegerField 文本字段,值为整数
DecimalField 文本字段,值为decimal.Decimal
FloatField 文本字段,值为浮点数
BooleanField 复选框,值为True 和 False
RadioField 一组单选框
SelectField 下拉列表
SelectMutipleField 下拉列表,可选择多个值
FileField 文件上传字段
SubmitField 表单提交按钮
FormField 把表单作为字段嵌入另一个表单
FieldList 一组指定类型的字段

WTForms常用验证函数:

验证函数说明
DataRequired 确保字段中有数据
EqualTo 比较两个字段的值,常用于比较两次密码输入
Length 验证输入的字符串长度
NumberRange 验证输入的值在数字范围内
URL 验证URL
AnyOf 验证输入值在可选列表中
NoneOf 验证输入值不在可选列表中

提示:

使用Flask-WTF需要配置参数SECRET_KEY。

CSRF_ENABLED是为了CSRF(跨站请求伪造)保护。 SECRET_KEY用来生成加密令牌,当CSRF激活的时候,该设置会根据设置的密匙生成加密令牌

flask 利用flask_wtf扩展 创建web表单

原文:https://www.cnblogs.com/We612/p/10476324.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!