11,flask之--WTForms
WTForms是什么?
相当于django的ModelForm。
在网页中,为了和用户进行信息交互总是不得不出现一些表单。flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据。WTForm中最重要的几个概念如下:
Form类,开发者自定义的表单必须继承自Form类或者其子类。Form类最主要的功能是通过其所包含的Field类提供对表单内数据的快捷访问方式。
各种Field类,即字段。一般而言每个Field类都对应一个input的HTML标签。比如WTForm自带的一些Field类比如BooleanField就对应<input type="checkbox">,SubmitField就对应<input type="submit">等等。
Validator类。这个类用于验证用户输入的数据的合法性。比如Length验证器可以用于验证输入数据的长度,FileAllowed验证上传文件的类型等等。
另外,flask为了防范csfr(cross-site request forgery)攻击,默认在使用flask-wtf之前要求app一定要设置过secret_key。最简单地可以通过app.config['SECRET_KEY'] = 'xxxx'来配置。app的配置涉及到如何架构整个项目目录,这里默认这个SECRET_KEY已经配置完成。
直接上代码:
后端代码:
from flask import Flask, render_template,request from wtforms.fields import simple, core #用来创建组件 from wtforms import validators from wtforms import Form #被继承 app = Flask(__name__) class LoginForm(Form): username = simple.StringField( label="用户名", # 标签标记 validators=[validators.DataRequired(message="用户名不能为空"), validators.Length(min=3,max=8,message="不是长了就是短了")], # 校验条件 可迭代条件 # description='11111111111', # 描述标记 id="user_id", # 标签ID default=None, # 默认值 widget=None, # 默认组件(input type="text") 在StringField中已经被实例化了 render_kw={"class":"my_login"}, # {"class":"my_login"} ) password = simple.PasswordField( label="密码", # 标签标记 validators=[validators.DataRequired(message="密码不能为空"), validators.Length(min=3, max=16, message="不是长了就是短了"), validators.Email(message="密码必须符合邮箱规则")], # 不知道 # description='11111111111', # 描述标记 id="user_id", # 标签ID default=None, # 默认值 widget=None, # 默认组件(input type="text") 在PasswordField中已经被实例化了 render_kw={"class": "my_login"}, # {"class":"my_login"} ) class RegForm(Form): username = simple.StringField( label="用户名", # 标签标记 validators=[validators.DataRequired(message="用户名不能为空"), validators.Length(min=3,max=8,message="用户名不是长了就是短了")], # 校验条件 可迭代条件 ) password = simple.PasswordField( label="密码", # 标签标记 validators=[validators.DataRequired(message="密码不能为空"), validators.Length(min=3, max=16, message="密码不是长了就是短了"), validators.Email(message="密码必须符合邮箱规则")], ) repassword = simple.PasswordField( label="确认密码", # 标签标记 validators=[validators.EqualTo(fieldname="password",message="眼神未确认")] ) gender = core.RadioField( label="性别", coerce=str, choices=( ("1","女"), ("2","男") ), default="1" ) hobby = core.SelectMultipleField( label="爱好", validators=[validators.Length(min=2,max=4,message="癖好有问题")], coerce=int, choices=( (1, "fengjie"), (2, "luoyufeng"), (3, "lixueqin"), (4, "wuyifan"), (5, "panta") ), default=(1,3,5) ) @app.route("/",methods=["GET","POST"]) def index(): if request.method == "GET": fm = LoginForm() return render_template("index.html",wtf = fm) else: new_fm = LoginForm(request.form) if new_fm.validate(): return new_fm.data.get("password") else: return render_template("index.html", wtf=new_fm) @app.route("/reg",methods=["GET","POST"]) def reg(): if request.method == "GET": rf = RegForm() return render_template("reg.html",rf = rf) else: rf = RegForm(request.form) if rf.validate(): print(type(rf.data.get("gender")),rf.data.get("gender")) return rf.data.get("password") else: return render_template("reg.html", rf=rf) if __name__ == '__main__': app.run(debug=True)
前端代码:index
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form action="" method="post" novalidate> {{ wtf.username.label }} {{ wtf.username }} <p><h1>{{wtf.username.errors.0}}</h1></p> <p> {{ wtf.password.label }} {{ wtf.password }} </p> <p><h1>{{wtf.password.errors.0}}</h1></p> <input type="submit" value="登录"> </form> </body> </html>
前端代码reg
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form action="" method="post" novalidate> {% for field in rf %} <p>{{ field.label }}{{ field }}{{ field.errors.0 }}</p> {% endfor %} <input type="submit" value="注册"> </form> </body> </html>
访问效果: