WTForms和quick_form的一点使用技巧

最新推荐文章于 2021-09-21 17:32:37 发布

原创最新推荐文章于 2021-09-21 17:32:37 发布 · 4.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#python #flask #WTForms #quick_form

技术专栏收录该内容

33 篇文章

订阅专栏

本文介绍在Flask应用中结合WTForms和Bootstrap进行表单处理的方法，并探讨如何将表单验证移至前端实现。通过在Field定义中使用render_kw参数，可以自定义HTML属性，实现前端JS函数的调用进行表单验证。

在大多数flask教程中，都会介绍使用WTForms和bootstrap，使用起来确实比较方便。方法大致如下：

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired

class LoginForm(FlaskForm):
    name = StringField('姓名', validators=[DataRequired()])
    password = PasswordField('密码', validators=[DataRequired()])
    submitfield = SubmitField('提交')

在模版中各表单项分开渲染：

<form id="loginform" action="/login" method="post">
	{{ form.hidden_tag() }}
	{{ form.name.label }}{{ form.name }}
	{{ form.password.label }}{{ form.password }}
	{{ form.submitfield() }}
</form>

或者使用quick_form()渲染：

{% import 'bootstrap/wtf.html' as wtf %}
{{ wtf.quick_form(form) }}

对于WTForms大概也是如此介绍，一般情况下也能用。但是如果我想把表单的检验放在前端呢？如何下手？渲染时若使用第一种方法，那还可以在<form>中设置id、action之类的；但若使用的是quick_form()呢？你想修改一点什么东西都无从下手。百度中也很少有人提及这个问题，查了不少资料，总算摸出点头绪来，解决了自己的问题。

在各种Field的定义中，可以加入一个render_kw。这是一个字典，平常HTML各种定义都可以放在里边。比如：

class LoginForm(FlaskForm):
    name = StringField('姓名', render_kw={"id":"name", "placeholder":"请输入用户名"})
    password = PasswordField('密码', render_kw={"id":"pwd", "placeholder":"请输入密码"})
    submitfield = SubmitField('提交', render_kw={"type": "button", "onclick":"alert('提交')"})

这样子就可以在点击提交按钮后调用自定义的js函数进行检验，若满足条件再submit()。（上例中只是使用alert()弹出一个窗口。注意：在SubmitField中，需要加上"type": "button"，要不然就算js函数中检验未通过不想submit()，它最终依然还是会自己提交表单。----其实加上"type": "button"的SubmitField，已经可以当作普通的button来使用了。）但是在前端中调用submit()需要用到form对象，而获取form对象需要定义form的id，再使用var form = document.getElementById("loginform");。但quick_form(form)渲染时是没有id的。这就需要在quick_form()中加入一些参数：

{{ wtf.quick_form(form, id='loginform', action='/login', form_type='horizontal', horizontal_columns=('lg',4,4)) }}

id和action意义很明显了。form_type是指定按什么样的方式渲染form的，horizontal_columns是指定一行几列，这两参数都与bootstrap有关，在原代码中看不太懂，大家修改做下测试，一般能满足到你的要求的。