Flask框架之WTForms（详解）

目录

WTForms介绍和基本使用

WTForms介绍

基本使用

WTForms表单验证的基本使用

 WTForms常用验证器

 WTForms自定义验证器

场景：验证码实现

WTForms渲染模版

常用的方法

代码示例

---

WTForms介绍和基本使用

WTForms介绍

这个插件库主要有两个作用。

第一个是做表单验证，将用户提交上来的数据进行验证是否符合系统要求。

第二个是做模版渲染。 （了解即可）

官网：https://wtforms.readthedocs.io/en/latest/index.html

基本使用

Flask-WTF是简化了WTForms操作的一个第三方库。WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板。而Flask-WTF还包括一些其他的功能：CSRF保护，文件上传等。

安装Flask-WTF默认也会安装WTForms，因此使用以下命令来安装Flask-WTF和WTForms:

pip install flask-wtf

1.导入WTForms类 

在Python文件中，导入所需的WTForms类，通常是wtforms和wtforms.validators。

from wtforms import Form, StringField, IntegerField, validators

2.定义表单类：

创建一个表单类来定义您的表单字段。表单类是一个继承自wtforms.Form的类，每个表单字段都是该类的属性。

class MyForm(Form):
    name = StringField('Name', validators=[validators.DataRequired()])
    age = IntegerField('Age', validators=[validators.NumberRange(min=1, max=100)])

3.表单实例化： 

在您的视图函数或控制器中，实例化您的表单类。

form = MyForm()

4.在模板中渲染表单：

在HTML模板中，使用表单的form属性渲染表单字段。

<form method="POST">
    {{ form.name.label }} {{ form.name() }}
    {{ form.age.label }} {{ form.age() }}
    <input type="submit" value="Submit">
</form>

5.处理表单提交：

在您的视图函数或控制器中，检查表单是否被提交并验证数据。 

if form.validate_on_submit():
    name = form.name.data
    age = form.age.data
    # 处理表单数据

6.验证表单数据：

在表单类的字段定义中，可以使用内置的验证器来验证数据。例如，DataRequired验证器可用于确保字段不为空，NumberRange验证器可用于验证数值的范围等。还可以使用自定义验证器来满足特定需求。 

name = StringField('Name', validators=[validators.DataRequired()])
age = IntegerField('Age', validators=[validators.NumberRange(min=1, max=100)])

WTForms表单验证的基本使用

1. 自定义一个表单类，继承自wtforms.Form类。
2. 定义好需要验证的字段，字段的名字必须和模版中那些需要验证的input标签的name属性值保持一致。
3. 在需要验证的字段上，需要指定好具体的数据类型。
4. 在相关的字段上，指定验证器。
5. 以后在视图函数中，只需要使用这个表单类的对象，并且把需要验证的数据，也就是request.form传给这个表单类，再调用表单类对象.validate()方法进行，如果返回True，那么代表用户输入的数据都是符合格式要求的，Flase则代表用户输入的数据是有问题的。如果验证失败了，那么可以通过表单类对象.errors来获取具体的错误信息。

 WTForms常用验证器

页面把数据提交上来，需要经过表单验证，进而需要借助验证器来进行验证，以下是常用的内置验证器：

1. Length：字符串长度限制，有min和max两个值进行限制。

username = StringField(validators=[Length(min=3,max=10,message="用户名长度必须在3到10位之间")])

2. EqualTo：验证数据是否和另外一个字段相等，常用的就是密码和确认密码两个字段是否相等。

password_repeat = StringField(validators=[Length(min=6,max=10),EqualTo("password")])

3. Email：验证上传的数据是否为邮箱数据格式 如：223333@qq.com。

email = StringField(validators=[Email()])

4. InputRequired：验证该项数据为必填项，即要求该项非空。

username = StringField(validators=[input_required()])

5. NumberRange：数值的区间，有min和max两个值限制，如果处在这两个数字之间则满足。

age = IntegerField(validators=[NumberRange(12,18)])

6. Regexp：定义正则表达式进行验证，如验证手机号码。

phone = StringField(validators=[Regexp(r'1[34578]\d{9}')])

7. URL：必须是URL的形式 如http://www.bjsxt.com。

home_page = StringField(validators=[URL()])

8. UUID：验证数据是UUID类型。

uuid = StringField(validators=[UUID()])

数据项的类型，一般常用的有

 
 
from wtforms import Form,StringField,IntegerField
class RegisterForm2(Form):
  uname = StringField(validators=[InputRequired()])
  age = IntegerField(validators=[NumberRange(18,40)])

 WTForms自定义验证器

只有当WTForms内置的验证器不够使的时候，才需要使用自定义验证器。

如果想要对表单中的某个字段进行更细化的验证，那么可以针对这个字段进行单独的验证。

自定义验证器步骤如下：

1. 定义一个方法，方法的名字规则是：validate_字段名(self,field)。
2. 在方法中，使用field.data可以获取到这个字段的具体的值。
3. 验证时，如果数据满足条件，那么可以什么都不做。如果验证失败，

那么应该抛出一个wtforms.validators.ValidationError的异常，并且把验证失败的信息传到这个异常类中。

场景：验证码实现

关键代码：

from flask import session
from wtforms import Form,StringField,IntegerField
from wtforms.validators import Length,EqualTo,Email,InputRequired,NumberRange,Regexp,URL,UUID,ValidationError
 
 
class RegisterForm2(Form):
  email = StringField(validators=[Email()])
  uname = StringField(validators=[InputRequired()])
  age = IntegerField(validators=[NumberRange(18,40)])
  phone = StringField(validators=[Regexp(r'1[34578]\d{9}')])
  phomepage = StringField(validators=[URL()])
  uuid = StringField(validators=[UUID()])
  code = StringField(validators=[Length(4,4)])
  #取到的值 和服务器上 session上存储的值对比
  def validate_code(self,field):
    print(field.data,session.get('code'))
    if field.data != session.get('code'):
      raise ValidationError('验证码不一致！')

WTForms渲染模版

渲染模版是WTForms的第二个作用，不过，我们只需要了解即可，不需要花太多精力和时间去研究它。

常用的方法

1. field(): 用于渲染字段的默认HTML控件。例如，{{ form.name() }}会渲染名为"name"的字段的默认控件。

2. label(): 用于渲染字段的标签。例如，{{ form.name.label }}会渲染名为"name"的字段的标签。

3. errors(): 用于渲染字段的错误消息。例如，{{ form.name.errors }}会渲染名为"name"的字段的错误消息。

代码示例

<form method="POST">
    <div class="form-group">
        {{ form.name.label(class="form-label") }}
        {{ form.name(class="form-control") }}
        {% if form.name.errors %}
            <ul class="error-list">
                {% for error in form.name.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
    
    <div class="form-group">
        {{ form.age.label(class="form-label") }}
        {{ form.age(class="form-control") }}
        {% if form.age.errors %}
            <ul class="error-list">
                {% for error in form.age.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
    
    <input type="submit" value="Submit" class="btn btn-primary">
</form>

使用Bootstrap样式来为表单字段添加了class属性。通过调用label()方法和class参数，可以为标签添加自定义的CSS类。通过调用字段对象的class参数，可以为表单字段添加自定义的CSS类。在错误消息部分，我们使用了一个循环来渲染所有的错误消息。