如何将 Flask-WTForms 与联系表单的 HTML 模板连接起来？答案

【问题标题】：How can I connect Flask-WTForms with the HTML-template for a Contact Form?如何将 Flask-WTForms 与联系表单的 HTML 模板连接起来？
【发布时间】：2021-02-01 06:29:37
【问题描述】：

我是 Python 新手，我正在尝试为我的个人博客构建一个联系页面。我很困惑如何将联系路由与 HTML 模板连接起来。这是我的 Python 代码：

class ContactForm(Form):

    name = TextField("Name", [validators.DataRequired("Message 1"), validators.Length(min=5, max=20)])
    email = TextField("Email", [validators.DataRequired("Message 2"), validators.Length(min=6,max=30)])
    message = TextField("Message",[validators.DataRequired("Message 3"), validators.Length(min=10, max=200)])
    phone = StringField("Phone", [validators.Optional(strip_whitespace=True)])
    submit = SubmitField("Send")
   
@app.route('/contact', methods= ["POST", "GET"])
def contact():

    form = ContactForm()


    if request.method == "POST":
        if form.validate() == False:
            flash("These fields are required")
            return render_template('contact.html', form=form)
        else:
            return "Form posted."

    elif request.method == "GET":
        return render_template('contact.html', form=form)

这是我的联系页面的 HTML 模板：

<div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
        <form action="{{ url_for('contact') }}" name="sentMessage" id="contactForm" method=post>
          <div class="control-group">
            <div class="form-group floating-label-form-group controls">
              <label>Name</label>
              <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <div class="control-group">
            <div class="form-group floating-label-form-group controls">
              <label>Email Address</label>
              <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <div class="control-group">
            <div class="form-group col-xs-12 floating-label-form-group controls">
              <label>Phone Number</label>
              <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <div class="control-group">
            <div class="form-group floating-label-form-group controls">
              <label>Message</label>
              <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <br>
          <div id="success"></div>
        <button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>
      </form>
       </div>
      </div>
  </div>

将 HTML 模板（姓名、电子邮件、消息、电话）中的表单与 Python 路由连接起来的最佳方法是什么，这样，一旦填写了所有字段并单击了“发送”按钮” , 出现消息“已发布表单。”我阅读了有关 WTF 表单的 Flask 文档，但我仍然不确定它是如何工作的。非常感谢您的各种建议。

【问题讨论】：

blog.miguelgrinberg.com/post/…

标签： html flask flask-wtforms

【解决方案1】：

我已经更新了你的联系方式：

class ContactForm(FlaskForm):

    name = TextField("Name", [validators.DataRequired("Message 1"), validators.Length(min=5, max=20)])
    email = TextField("Email", [validators.DataRequired("Message 2"), validators.Length(min=6,max=30)])
    message = TextField("Message",[validators.DataRequired("Message 3"), validators.Length(min=10, max=200)])
    phone = StringField("Phone", [validators.Optional(strip_whitespace=True)])
    submit = SubmitField("Send")

@app.route('/contact', methods= ["POST", "GET"])
def contact():

    form = ContactForm()
    if form.validate_on_submit():
        name = form.name.data
        email = form.email.data
        message = form.message.data
        phone = form.phone.data
        return "Form posted. name: {}, email:{}, message:{}, phone:{}".format(name, email, message, phone)
    return render_template('contact.html', form=form)

这里，我为你简化了这段代码，现在你不需要检查它是帖子还是获取请求

@app.route('/contact', methods= ["POST", "GET"])
def contact():

    form = ContactForm()
    if form.validate_on_submit():
        name = form.name.data
        email = form.email.data
        message = form.message.data
        phone = form.phone.data
        return "Form posted. name: {}, email:{}, message:{}, phone:{}".format(name, email, message, phone)
    return render_template('contact.html', form=form)

form.validate_on_submit 如果表单通过了所有验证器，如果它没有通过验证器，或者根本没有表单（如在 get 请求中），则评估为 true，这将评估为 false，并呈现联系方式.html

return 函数只是为了证明表单正在被接收以及您如何访问数据。您可以对数据做任何您想做的事情，而不是简单地返回/打印，将它们发送到您的电子邮件，将它们发布到您的博客等...

return "Form posted. name: {}, email:{}, message:{}, phone:{}".format(name, email, message, phone)

这是你的contact.html：

  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
        <form action="" name="sentMessage" id="contactForm" method="POST">
          {{ form.hidden_tag() }}

          <div class="form-group">
            {{ form.name.label() }}
            {{ form.name() }}
          </div>
          <div class="form-group">
            {{ form.email.label() }}
            {{ form.email() }}
          </div>
          <div class="form-group">
            {{ form.phone.label() }}
            {{ form.phone() }}
          </div>
          <div class="form-group">
            {{ form.message.label()}}
            {{ form.message()}}
          </div>
          <br>
          <div id="success"></div>
          <div class="form-group">
            {{form.submit()}}
          </div>
      </form>
       </div>
      </div>
  </div>

我已经使用 Jinja 模板传递了参数 {{form.name.label}} 和 {{form.name}}， read about Jinja here

form.name.label 将显示您传递给字段的值（如“名称”和“消息”） form.name 将显示输入字段，form.email、form.phone 等也是如此......

如果没有验证，您还希望在每个字段下方打印出错误，说如果有人不符合要求的长度，它会打印出如下内容：

*字段长度必须在 10 到 200 个字符之间。

或

*电子邮件不正确

这样做的方法是检查每个表单字段中是否有任何错误，如果有，它们将存储在 form.name.errors 中，如果有多个，则必须对其进行迭代每个字段的错误（仅当您通过多个验证器检查时才会发生这种情况）

这是带有错误打印的contact.html：

  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
        <form action="" name="sentMessage" id="contactForm" method="POST">
          {{ form.hidden_tag() }}

          <div class="form-group">
            {{ form.name.label() }}
            {% if form.name.errors %}
                {{ form.name() }}
                <div class="invalid-feedback">
                {% for error in form.name.errors %}
                  <span>* {{ error }}</span>
                {% endfor %}
                </div>
            {%else%}
                {{ form.name() }}
            {% endif %}

          </div>
          <div class="form-group">
            {{ form.email.label() }}
            {% if form.email.errors %}
                {{ form.email() }}
                <div class="invalid-feedback">
                {% for error in form.email.errors %}
                  <span>* {{ error }}</span>
                {% endfor %}
                </div>
            {%else%}
                {{ form.email() }}
            {% endif %}
          </div>
          <div class="form-group">
            {{ form.phone.label() }}
            {% if form.phone.errors %}
                {{ form.phone() }}
                <div class="invalid-feedback">
                {% for error in form.phone.errors %}
                  <span>* {{ error }}</span>
                {% endfor %}
                </div>
            {%else%}
                {{ form.phone() }}
            {% endif %}

          </div>
          <div class="form-group">
            {{ form.message.label()}}
            {% if form.message.errors %}
                {{ form.message() }}
                <div class="invalid-feedback">
                {% for error in form.message.errors %}
                  <span>* {{ error }}</span>
                {% endfor %}
                </div>
            {%else%}
                {{ form.message()}}
            {% endif %}
          </div>
          <br>
          <div id="success"></div>
          <div class="form-group">
            {{form.submit()}}
          </div>
      </form>
       </div>
      </div>
  </div>

注意 jinja 使用 {% %} 作为语句，使用 {{ }} 作为变量，语句也需要使用 {% endif %} 和 {% endfor %} 来关闭

另外，我建议你去掉名字的最小长度要求，只保留最大长度

我还建议您对电子邮件字段使用 validators.Email()，这将确保用户将插入真实的电子邮件。

希望对您有所帮助，祝您有美好的一天。

【讨论】：