表单处理实验

代码命令：

视图函数：

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegisterForm()
    # 此处的validate_on_submit() 方法用于对表单数据进行验证
    if request.method == 'POST' and form.validate_on_submit():
        # 展示表单所包含的所有数据
        info = ''
        for k, v in form.data.items():
            info += '%s: %s<br>' % (k, v)
        return info
    else:
        return render_template('register.html', form=form)

模板文件（WTFroms.py）：

from flask_wtf import FlaskForm

from wtforms import Form, PasswordField, IntegerField, TextAreaField, SelectField, SubmitField, \

    SelectMultipleField, RadioField, validators

from wtforms.fields.simple import StringField

from wtforms.validators import DataRequired, Email


class RegisterForm(FlaskForm):

    username = StringField(label='用户名', validators=[DataRequired()])

    password = PasswordField(label='密码', validators=[DataRequired()])

    age = IntegerField(label='年龄', validators=[DataRequired()])

    phone = StringField(label='电话', validators=[DataRequired()])

    email = StringField(label='邮箱', validators=[DataRequired(), Email()])

    introduce = TextAreaField(label='自我介绍')

    education = SelectField(label='学历', coerce=int, choices=list(

        {

            0: '保密',

            1: '中专',

            2: '高中',

            3: '专科',

            4: '本科',

        }.items()

    ))

    sex = RadioField(label='性别', validators=[DataRequired()], coerce=int, choices=list(

        {

            1: '男',

            2: '女',

        }.items()

    ))

    skills = SelectMultipleField(label='特长', validators=[DataRequired()], coerce=int, choices=list(

        {

            1: '软件开发',

            2: '系统运维',

            3: '网络安全',

        }.items()

    ))

    submit = SubmitField(label='注册')

模板文件（register.html）：

{% extends 'bootstrap/base.html' %}

{% import 'bootstrap/wtf.html' as wtf %}

{% block title %}注册表单{% endblock %}

{% block content %}

<div class="container">

    {{ wtf.quick_form(form) }}

</div>

{% endblock %}

效果图：

注册表单页面

注册表单提交数据展示

代码详释：

视图函数代码详释：

1.  @app.route('/register', methods=['GET', 'POST']) ：

表示定义了一个路由，当访问/register路径时，函数register会被调用。同时，指定了支持的请求方法为GET和POST。

2.  form = RegisterForm() ：

表示创建了一个RegisterForm类的实例form，该类应该是在WTFroms.py模块中定义的。

3.  if request.method == 'POST' and form.validate_on_submit() :

表示检查请求方法是否为POST，并验证表单数据是否有效。如果有效，将执行下面的代码。

4.  for k, v in form.data.items() :

表示遍历表单数据的键值对，并将它们组合成字符串格式，用于显示表单中提交的所有数据。

5.  return render_template('register.html', form=form) :

表示如果请求方法不是POST或者表单数据无效，将渲染模板文件register.html，并将form实例传递给模板。

 

 WTFroms.py 模块的解释：

表示WTFroms.py模块继承了自FlaskForm的类。类中定义了各种表单字段，如用户名、密码、年龄、电话、邮箱、自我介绍等，并设置了相应的验证规则。

WTFroms.py模块代码详释：

1. {% extends 'bootstrap/base.html' %} ：

表示继承了bootstrap/base.html模板。这意味着register.html模板将继承bootstrap/base.html中的一些通用样式和布局。

2. {% import 'bootstrap/wtf.html' as wtf %} ：

表示通过{% import %}语句，导入了bootstrap/wtf.html模块，并将其命名为wtf。这样，在模板中就可以使用wtf来访问bootstrap/wtf.html中定义的宏或函数。

3. {% block title %}注册表单{% endblock %}`：

表示一个标题块，用于定义页面的标题。在这里，标题被设置为"注册表单"。

4. {% block content %} 和 {% endblock %}`：

表示内容块的开始和结束标记。在这两个标记之间的代码将构成页面的主要内容。

5.  <div class="container"> ：

表示一个HTML容器元素，用于将页面内容包裹在一个容器中，以提供一致的布局。

6.  {{ wtf.quick_form(form) }} ：

表示使用了wtf.quick_form宏来生成表单。form是在路由处理函数中创建的RegisterForm实例。这个宏会根据RegisterForm类中的定义生成相应的表单字段。

常见问题：

ModuleNotFoundError: No module named 'email_validator'

错误原因：

因为Flask==2.3.0以后的WTForms已经不支持email验证器。

解决方法：

pip install email-validator