flask 利用flask_wtf扩展创建web表单-白红宇

flask 利用flask_wtf扩展创建web表单

阅读量：5260 次

发布时间：2019-06-14

本文共 7917 字，大约阅读时间需要 26 分钟。

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

创建语句格式： 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"}

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('进   度：', 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=
      
       ', methods=['GET', 'POST'])28 @login_required29 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.fileName37     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.items52     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 
     
      {
   { wtf.quick_form(form1, form_type='horizontal', horizontal_columns=('md', 3, 8)) }}5   
      8

不继承

1 
     
      2     {
   #设置csrf_token#}3     {
    { form.csrf_token() }}4     {
   { form.username.label }}{
   { form.username }}
      
5     {
   { form.password.label }}{
   { form.password }}
      
6     {
   { form.password2.label }}{
   { form.password2 }}
      
7     ...8     {
   { form.input }}
      
9

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激活的时候，该设置会根据设置的密匙生成加密令牌

转载于:https://www.cnblogs.com/We612/p/10476324.html

你可能感兴趣的文章