24 - form表单验证 - bootstrap结合使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了24 - form表单验证 - bootstrap结合使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一. flask中bootstrap的使用

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

文章来源地址https://www.toymoban.com/news/detail-683532.html

二. 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 %}

到了这里，关于24 - form表单验证 - bootstrap结合使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！