flask项目Web表单(2)_flaskform 一行多列-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45323012/article/details/104052474

本文介绍了如何利用Flask-WTF扩展在Flask项目中创建各种表单组件，包括文本输入、整数、日期和多行文本等，并提到了设置校验器以确保输入内容的合法性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的表单组件：

Flask-WTF扩展支持很多表单组件，例如：文本输入组件、输入整数组件、输入日期组件、输入多行文本组件等

创建一个表单组件：flask_form.py

from flask import Flask,request,render_template
from flask_wtf import FlaskForm
from wtforms import TextField,IntegerField,TextAreaField,BooleanField,DateField,SubmitField,validators
#from wtforms import TextField,SubmitField,validators
app=Flask(__name__)
app.secret_key='sdlkajdj45'
###用于Session/Cookie/Flask-WTF的CSRF保护等加密的密钥，密钥可随意指定，就是一个普通的字符串
#定义表单类
class ContactForm(FlaskForm):
    #用于输入文本的字段，其中validators.Required是一个校验器，表示该字段必须输入
    firstname=TextField('姓名',[validators.Required('姓名必须输入')])
    #录入整数的表单组件，该字段必须输入，并且输入范围必须在10—30，包括30
    age=IntegerField('年龄',[validators.Required('必须输入年龄'),
                     validators.NumberRange(10,30,'年龄必须在10-30')])
    #录入日期的表单组件，该字段必须输入
    birth=DateField('出生日期',[validators.Required('必须输入出生日期')])
    #选择表单组件(Checkbox),该字段必须输入
    isStudent=BooleanField('是否为学生')
    #录入多行文本的表单组件，该字段输入的字符个数必须在10-200
    resume=TextAreaField('简历',[validators.Length(10,200,'简历长度必须在10-200个字符')])
    submit=SubmitField('提交')
##用于处理GET和POST请求的路由函数
@app.route('/',methods=['GET','POST'])
def contact():
    form=ContactForm()
    #用于通知模板服务端校验通过的标志，如果该标志为True,表示所有的字段校验通过
    ok=False
    #只处理POST请求
    if request.method=='POST':
        #校验表单数据
        if form.validate_on_submit()==False:
            print(form.firstname.errors)
            print('error')
        else:
            print('输入成功')
            ok=True
    #将校验结果和表单代码返回客户端
    #向模板传入的表单类的实例和是否校验成功的布尔类型标志
    return render_template('simple.html',form=form,ok=ok)
if __name__=="__main__":
    app.run()

simple.html

<html>
<head>
   <meta charset='UTF-8'>
   <title>Flask-WTF模块支持的简单表单组件</title>
   </head>
   <body>
   <!--如果校验成功，会弹出一个对话框-->
   {% if ok %}
   <script>
       alert('数据录入成功。')
   </script>
   {% endif %}
   <!--输出与firstname字段相关的错误信息-->
   {% for message in form.firstname.errors %}
        <div>{{message}}
   {% endfor %}
   <!--输出与age字段相关的错误信息-->
   {% for message in form.age.errors %}
        <div>{{message}}
   {% endfor %}
    <!--输出与birth字段相关的错误信息-->
   {% for message in form.birth.errors %}
      <div>{{message}}
    {% endfor %}
    <!--输出与isStudent字段相关的错误信息-->
   {% for message in form.isStudent.errors %}
      <div>{{message}}
   {% endfor %}
     <!--输出与resume字段相关的错误信息-->
   {% for message in form.resume.errors %}
      <div>{{message}}
   {% endfor %}
   <!--定义表单-->
   <form action="http://localhost:5000" method=post>
   <fieldset>
       <!--下面的代码生成了表单组件代码-->
       <!--生成用于保存加密字符串的隐藏文本组件-->
       {{form.hidden_tag()}}
       <!--生成文本组件的标签名称的代码-->
       {{form.firstname.label}}<br>
       <!--生成文本组件的代码-->
       {{form.firstname}}
       <br>
       {{form.age.label}}<br>
       {{form.age}}<br>
       {{form.birth.label}}<br>
       {{form.birth}}<br>
       {{form.isStudent.label}}<br>
       {{form.isStudent}}<br>
       {{form.resume.label}}<br>
       {{form.resume}}<br>
       <br>
       <!生成提交按钮的代码-->
       {{form.submit}}
   </fieldset>
   </form>
   </body>
</html>