Question

这个问题与this question有关，但重点是我问另一个问题时不知道的潜在问题之一。

我正在使用Python，Flask和WTForms制作表单。这是python：

from flask import render_template
from flask_wtf import FlaskForm
from wtforms import DecimalField, SubmitField
from wtforms.validators import NumberRange, DataRequired

class NumberForm(FlaskForm):
    question_one = DecimalField('Question 1', validators=[NumberRange(min=0, max=10)])
    question_two = DecimalField('Question 2', validators=[DataRequired()])
    submit = SubmitField('Submit')

@app.route('some_route/', methods=['GET', 'POST'])
def page():
    form = NumberForm()
    if form.validate_on_submit():
        return some_success_or_other
    return render_template('page.html', form=form)

和HTML：

<form method="POST">
  <div class="form-group-row">
    {{ form.hidden_tag() }}
    {{ form.question_one.label }}
    <div>
      {{ form.question_one }}
    </div>
  </div>
  <div class="form-group-row">
    {{ form.question_two.label }}
    <div>
      {{ form.question_two }}
    </div>
  </div>
  <div class="form-group-row">
    {{ form.submit }}
  </div>
</form>

我正在使用的两个验证器（NumberRange和DataRequired）的行为不同。如果未在字段2中输入数据并且单击了提交按钮，则不提交表单，并且在字段旁边弹出错误消息，提示“请填写此字段”。

如果在字段1中提交了字符串（而不是小数）或超出范围的数字，则在按下按钮时确实会提交表单。
尽管记录了错误（并且可以使用{{ form.errors }}来显示错误，但是我希望两个验证器都具有相同的行为-我希望当在字段1中输入无效数字/字符串时，防止提交表单）。

有人知道为什么验证器的行为不同吗？

Answer 1

HTML5引入了 required 属性，如果尚未填充其中一个字段（受此属性影响），则强制填写字段并阻止表单验证。此属性仅可用于输入标签。

使用flask-wtf，当您使用带有必需验证器的字段时，它将自动生成一个具有required属性的html字段，该字段将阻止发送表单并显示信息框。

对于诸如NumberRange之类的其他验证器，则不相同。

使用纯HTML：

要具有相同的行为，即检查输入的数字是否在定义明确的范围内，如果情况并非如此，则阻止发送表格，则必须使用模式属性（更多详细信息here）。在这种情况下没有预定义的模式，因此您需要使用正则表达式创建自定义模式。它将给出以下内容：<input type="text" pattern="[0-9]">。

现在我们只需要对wtforms重新采用相同的逻辑...

使用wtforms：

<form method="POST">
    <div class="form-group-row">
        {{ form.hidden_tag() }}
        {{ form.question_one.label }}
        <div>
            {{ form.question_one(pattern="[0-9]") }}
        </div>
    </div>
    <div class="form-group-row">
        {{ form.question_two.label }}
        <div>
            {{ form.question_two }}
        </div>
    </div>
    <div class="form-group-row">
        {{ form.submit }}
    </div>
</form>

在{{ form.question_one(pattern="[0-9]") }}行，我将pattern属性与正则表达式一起使用，该正则表达式检查输入的数字是否在0到9的范围内。对于较大的范围，您将需要编写稍微复杂一点的正则表达式（ this link令人着迷）

在某些WTForm验证方法上，消息未闪烁

1 个答案: