在 wtform 上进行实时验证。我可以访问前端的验证器吗？ [复制]

Question

我有一个看起来像这样的 wtform 类：

class Registration(Form):
  email = StringField('Email', validators=[Required(), Email()])
  username = StringField('Username', validators=[Required()])
  name = StringField('Name', validators=[Required()])
  password = PasswordField('Password',
    validators=[
      Required(),
      EqualTo('confirm_password', message='Your passwords did not match'),
      Length(min=6, max=20, message='passwords must be longer than 6 characters')
    ])
  confirm_password = PasswordField('Confirm Password', validators=[Required()])
  submit = SubmitField('Register')

  def validate_email(self, field):
    if User.query.filter_by(email=field.data).first():
      raise ValidationError('Email already registered')

  def validate_username(self, field):
    if User.query.filter_by(username=field.data).first():
      raise ValidationError('Username already exists')

我想 WTForms 不会在前端提供任何形式的实时内联验证，这很好，但我想知道是否有一种方法可以通过获取字段的验证器并使用它们在某种 javascript 中。

例如，密码字段。密码必须超过 6 个字符。在这种情况下，我想在他们输入时显示一个验证表单：

但是，一旦他们输入了有效长度的密码，它就会显示：

我遇到的问题是访问页面上的 wtform 的要求和验证器。这可以吗？

Answer 1

我使用的方法并不完全是微不足道的，但也不是太复杂。我将处理程序附加到要验证的字段上的更改或模糊事件。当我收到此事件时，我的处理程序会收集表单中所有字段的值并向服务器提交一个 ajax POST 请求。服务器现在拥有整个表单，并且可以使用 WTForms 进行验证。此 Ajax 请求的 JSON 响应是验证错误列表，客户端可以根据需要显示。

更多详情请见this answer。