Question

我是WTForms的新手，而且从目前为止我所学到的知识，我发现验证错误处理有点棘手。

首先，我无法实现原生HTML <input required >;

其次，当表单验证失败时，我必须重新呈现表单所在的页面模板，如果我的表单放在页面底部，用户将看到页面刷新＆＃39;并且不知道发生了什么。

有没有人有关于如何更无缝地集成WTForms的建议？欢迎任何评论，资源，网址，代码示例，谢谢！

以下是我的一些相关代码：

# /forms.py
from wtforms import Form, BooleanField, StringField, PasswordField, validators

class RegistrationForm(Form):
    email = StringField('Email Address', [
        validators.required(),
        validators.Email(message='Please enter a valid email address'),
        validators.length(min=6, max=35)
    ])
    password = PasswordField('New Password', [
        validators.required(),
        validators.DataRequired(),
        validators.length(min=6, max=35)
    ])

# /views.py
from flask import Flask, Blueprint, flash, render_template, redirect, request, url_for
from forms import RegistrationForm, LoginForm

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    form = RegistrationForm()
    context = {
        "form": form
    }
    if request.method == 'POST' and form.validate():
        submitted_form = request.form
        return redirect('/welcome')
    else:
        return render_template('form.html', context = context)

# /form.html
<form class="form" action="" method="POST" name="register">
  {% for field_name, field_errors in context.reg_form.errors|dictsort if field_errors %}
    {% for err in field_errors %}
      <li class="error">{{ context.reg_form[field_name].label }}: {{ err }}</li>
    {% endfor %}
   {% endfor %}

   <ul class="form-fields center">
     <li class="form-field">
     {{ context.form.email(class='email', placeholder='email') }}
     </li>
     <li class="form-field">
     {{ context.form.password(class='password', placeholder='password') }}
     </li>
   </ul>
</form>

Answer 1

据我了解，WTForm将始终刷新页面以显示错误。我解决这个问题的方法是让前端为我验证表格。不知道你的情况是否可行，但我已经使用AngularJS来做这个伎俩了。它非常简单，如果您需要简单的验证，如电子邮件格式，密码长度等，则不需要单行代码，这些都是通过html属性完成的。您甚至可以禁用提交按钮，直到您的表单准备就绪。看看这个CodePen

如果仍需要，您可以使用此功能滚动到页面底部：

var objDiv =     document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight

如果您需要更强大的解决方案，您可能会想出一个API，它会向您要验证的任何字段返回true或false。然后make angular发出一个http请求，在你输入时检查它，这样你100％确定你的表单将要验证。但根据您检查的内容，您可能会暴露出安全漏洞。在Ng-Newsletter

上有关于此的优秀博文

Answer 2

为了更好地体验 Flask 中的表单，您应该使用Flask-WTF extension。安装它：

$ pip install flask-wtf

导入

from flask.ext.wtf import Form

并将其与wtforms模块一起使用。

.py 文件：

from flask.ext.wtf import Form
from wtforms import StringField, SubmitField
from wtforms.validators import Required

class NameForm(Form):
    name = StringField('What is your name?', validators=[Required()])
    submit = SubmitField('Submit')

.html 档案：

<form method="POST">
{{ form.name.label }} {{ form.name() }}
{{ form.submit() }} #this is your submit button
</form>

具有无缝用户体验的WTForms错误处理

2 个答案: