zoukankan      html  css  js  c++  java
  • 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>

    访问效果:

  • 相关阅读:
    微软官方Windows Phone初学者开发视频系列从零开始带您轻松进入开发的世界
    Flash务实主义(五)——AS3的垃圾回收
    各种流行的编程风格
    程序设计的十个做与不做
    Android 上的 10 款 Web 开发工具推荐
    Flex 中的 DataGrid 自动刷新(转)
    Flex 序列化自定义类 解决 sharedObject 保存自定义对象
    Adobe更新手机应用开发工具 涵盖所有平台
    程序员的七大坏毛病
    怎样让失败变成成功之母?
  • 原文地址:https://www.cnblogs.com/wqzn/p/10269025.html
Copyright © 2011-2022 走看看