24 - form表单验证 - bootstrap结合使用

一. flask中bootstrap的使用

        16- flask-bootstrap模板的使用_一个微不足道的bug的博客-CSDN博客

        

二. form结合bootstrap使用

        (1). form.py 进行表单验证

from flask_wtf import FlaskForm
from flask_wtf.file import FileField, FileRequired, FileAllowed
from wtforms import StringField
from wtforms.validators import DataRequired, Length, ValidationError


class UserForm(FlaskForm):
    # StringField:text文本框  ;DataRequired():必填 ;Length():长度; EqualTo():和谁保持一致
    name = StringField(label='用户名', validators=[DataRequired(), Length(min=6, max=12, message="用户名长度必须在6~12位之间")])
    # FileField:文件上传类型 ;FileRequired:必填;FileAllowed:允许的类型
    icon = FileField(label="用户头像", validators=[FileRequired(), FileAllowed(['jpg', 'png', 'gif'], message="必须是图片文件格式")])

    # 定义钩子方法,对用户名增加校验:validate_字段名
    def validate_name(self, data):
        if self.name.data[0].isdigit():
            raise ValidationError("用户名不能以数字开头")

    (2). 视图函数调用表单对象,传递给前端

from io import BytesIO

from flask import Blueprint, session, make_response, render_template

from util.form import UserForm

user_bp = Blueprint('user', __name__)


@user_bp.route('/', methods=["GET", "POST"])
def boot_form_user():
    uform = UserForm()
    return render_template("user/index.html", uform=uform)

(3). 前端结合bootstrap使用表单对象生成页面

{% extends 'bootstrap/base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
 
{% block style %}
    {{ super() }}
{% endblock %}
 
{% block content %}
  {#快速的全拿过来#}
{# {{ wtf.quick_form(uform) }}#}
  {#一个个拿#}
{{ wtf.form_field(uform.name) }}
 
{% endblock %}