在大多数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有关,在原代码中看不太懂,大家修改做下测试,一般能满足到你的要求的。