11，flask之--WTForms

WTForms是什麼？

至關於django的ModelForm。html

在網頁中，爲了和用戶進行信息交互老是不得不出現一些表單。flask設計了WTForm表單庫來使flask能夠更加簡便地管理操做表單數據。WTForm中最重要的幾個概念以下：前端

　　Form類，開發者自定義的表單必須繼承自Form類或者其子類。Form類最主要的功能是經過其所包含的Field類提供對錶單內數據的快捷訪問方式。django

　　各類Field類，即字段。通常而言每一個Field類都對應一個input的HTML標籤。好比WTForm自帶的一些Field類好比BooleanField就對應<input type="checkbox">，SubmitField就對應<input type="submit">等等。flask

　　Validator類。這個類用於驗證用戶輸入的數據的合法性。好比Length驗證器能夠用於驗證輸入數據的長度，FileAllowed驗證上傳文件的類型等等。後端

　　另外，flask爲了防範csfr(cross-site request forgery)攻擊，默認在使用flask-wtf以前要求app必定要設置過secret_key。最簡單地能夠經過app.config['SECRET_KEY'] = 'xxxx'來配置。app的配置涉及到如何架構整個項目目錄，這裏默認這個SECRET_KEY已經配置完成。架構

直接上代碼：app

後端代碼：post

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)

前端代碼：indexui

<!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>

前端代碼regspa

<!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>

訪問效果：