记得在之前《如何使用WTForms对表单进行验证?》一文中跟大家讲过,WTFroms不仅可以做表单验证,还可以做模板渲染,本节就为大家讲讲如何使用WTForms渲染表单?
新建一个flask_wtf_demo flask 项目,其代码如下:
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def index():
return "index page"
@app.route("/login")
def login():
return render_template("login.html")
if __name__ == "__main__":
app.run(debug=True)
注:由于我们只做模板渲染,所以这里就不考虑POST方法。
然后在templates文件下新建一个login.html文件,其代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td><input type="submit" name="登录"></td>
</tr>
</table>
</form>
</body>
</html>
运行主app文件,结果如下:
然后我们在项目下新建一个forms文件,用于放表单验证代码。forms.py文件代码如下:
from wtforms import Form,StringField
from wtforms.validators import InputRequired
class LoginForm(Form):
username = StringField(validators=[InputRequired()])
定义好了forms.py文件,我们在主app文件导入LoginForm这个类
from forms import LoginForm
然后实例化一个LoginForm对象,赋给form变量,并将其传入模板中!
@app.route("/login")
def login():
form = LoginForm(request.form)
return render_template("login.html",form=form)
打开login.html文件,找到下方代码:
<td>用户名</td>
<td><input type="text" name="username"></td>
把它替换成下面代码:
<td>{{ form.username.label }}</td>
<td>{{ form.username() }}</td>
再运行主app文件,结果如下:
结果和上面结果基本一样,唯一区别就是上面显示的是用户名,而下方却是Username,为什么会出现这样的结果呢?原因是我们没有指定这个字段label名称,它会自动采用我们forms中定义的username字段,然后将其首字母大写显示到网页中。有的人可能会问?哪我们如何使用自定义字段名字呢?方法很简单,我们在froms.py定义验证字段的时候,在前面输入自定义名称即可!代码如下:
username = StringField("请输入用户名",validators=[InputRequired()])
再运行主app文件,结果如下:
怎么样?看完觉得是不是很简单??
最后一个问题,我们这个表单界面太low了,我们要加点自定义样式(比如想给这文本框文字加个红色)怎么添加?方法如下:
1、先定义样式(这里以class选择器为例),代码如下:
.to_red{color:red;}
2、然后在 form.username()调用样式代码,代码如下:
{{ form.username(class="to_red") }}
再运行主app文件,在文本框输入文字测试一下效果:
最后的最后,总结一下用WTForms渲染模板的好处与坏处。
好处:少些代码
坏处:当网站页面需要调整、改版时,不利于web人员页面修改或样式调整