Pyramid 中的wtforms中的SelectField和通过javascript添加标签选项

1. SelectField简介

SelectField是wtforms库中的一个表单字段类型，用于在页面上创建下拉选择框。通过使用SelectField，我们可以轻松地在表单中提供选择选项，并将用户选择的值传递给后台处理。

在使用SelectField之前，我们首先需要通过pip安装wtforms库。在Pyramid项目中，可以使用以下命令安装：

pip install wtforms

安装完成后，我们需要导入SelectField以及相关的模块：

from wtforms import SelectField
from wtforms.validators import DataRequired

2. 使用SelectField创建下拉选择框

在Pyramid中，我们可以使用wtforms库的SelectField来创建下拉选择框。下面的示例演示了如何在表单中创建一个下拉选择框，并在表单中检查用户是否选择了某个选项：

from wtforms import Form, SelectField
from wtforms.validators import DataRequired

class MyForm(Form):
    my_choices = [('1', 'Option 1'), ('2', 'Option 2'), ('3', 'Option 3')]
    my_field = SelectField('My Field', choices=my_choices, validators=[DataRequired()])

上述代码中，我们首先定义了一个名为my_choices的列表，其中每个元素表示一个选项。每个选项都是一个元组，第一个元素是选项的值，第二个元素是选项的显示文本。

然后，我们创建了一个名为my_field的SelectField，并将my_choices作为参数传递给choices参数。validators=[DataRequired()]表示该字段在提交时是必需的。

在视图函数中，我们可以像这样实例化该表单并在模板中使用它：

**from pyramid.view import view_config
from pyramid.response import Response
from myapp.forms import MyForm

@view_config(route_name='my_route', renderer='my_template')
def my_view(request):
    form = MyForm(request.POST)
    if request.method == 'POST' and form.validate():
        selected_option = form.my_field.data
        # 其他处理逻辑...
    return {'form': form}
**

在模板中，我们可以通过form.my_field访问SelectField字段，使用它来渲染表单。例如，我们可以使用以下代码将其渲染为HTML的下拉选择框：

<div>
    <label>{{ form.my_field.label }}</label>
    <select id="{{ form.my_field.id }}" name="{{ form.my_field.name }}">
        {% for value, label in form.my_field.choices %}
        <option value="{{ value }}" {% if form.my_field.data == value %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
    </select>
    {% if form.my_field.errors %}
    <ul class="errors">
        {% for error in form.my_field.errors %}
        <li>{{ error }}</li>
        {% endfor %}
    </ul>
    {% endif %}
</div>

3. 通过javascript动态添加

有时候，我们希望在运行时动态地向下拉选择框中添加选项。通过使用javascript，我们可以通过以下步骤实现：

获取到下拉选择框的DOM元素；
创建一个新的<option>元素；
设置<option>元素的值和显示文本；
将<option>元素添加到下拉选择框中。

下面是一个使用纯javascript实现动态添加

<script>
    function addOption() {
        var selectField = document.getElementById('my-field');
        var option = document.createElement('option');
        option.value = '4';
        option.text = 'Option 4';
        selectField.add(option);
    }
</script>

<button onclick="addOption()">Add Option</button>

在上述示例中，我们首先获取到id为my-field的下拉选择框的DOM元素。然后，我们创建一个新的元素，并设置它的值和显示文本。最后，我们使用add()方法将元素添加到下拉选择框中。

4. WTForms支持的HTML标准字段

字段对象 描述

StringField 文本字段

TextAreaField 多行文本字段

PasswordField 密码文本字段

HiddenField 隐藏文件字段

DateField 文本字段，值为 datetime.date 文本格式

DateTimeField 文本字段，值为 datetime.datetime 文本格式

IntegerField 文本字段，值为整数

DecimalField 文本字段，值为decimal.Decimal

FloatField 文本字段，值为浮点数

BooleanField 复选框，值为True 和 False

RadioField 一组单选框

SelectField 下拉列表

SelectMutipleField 下拉列表，可选择多个值

FileField 文件上传字段

SubmitField 表单提交按钮

FormField 把表单作为字段嵌入另一个表单

FieldList 一组指定类型的字段

5. WTForms常用验证函数

验证函数 描述

DataRequired 确保字段中有数据

EqualTo 比较两个字段的值，常用于比较两次密码输入

Length 验证输入的字符串长度

NumberRange 验证输入的值在数字范围内

URL 验证URL AnyOf 验证输入值在可选列表中

NoneOf 验证输入值不在可选列表中

CSRF_ENABLED是为了CSRF（跨站请求伪造）保护。 SECRET_KEY用来生成加密令牌，当CSRF激活的时候，该设置会根据设置的密匙生成加密令牌。

使用 Flask-WTF 需要配置参数 SECRET_KEY

创建表单模型类代码:

# coding:utf-8
from flask import Flask, render_template, url_for, redirect, Response
from flask_wtf import FlaskForm
# flask_wtf是基于wrforms的，所以下载flask_wtf时就带有了
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualTo

app = Flask(__name__)


# 定义表单的模型类
class RegisterFrom(FlaskForm):
# 名字 验证器/验证器 数据为空时返回信息
user_name = StringField(label=u"用户名", validators=[DataRequired(u"用户名不能为空!")])
password = PasswordField(label=u"密码", validators=[DataRequired(u"密码不能为空!")])
password2 = PasswordField(label=u'确认密码', validators=[DataRequired(u"确认密码不能为空!"),
EqualTo('password', u"两次密码不一致!")])
submit = SubmitField(label=u"提交")


# 使用 Flask-WTF 需要配置参数 SECRET_KEY
app.secret_key = "reknfknfkefsfsfe"


@app.route("/register", methods=["GET", "POST"])
def register():
# 创建form对象，如果是post请求，前端发送数据，flask会把数据在构造form对象时，存放到对象中
form = RegisterFrom()
# 如果表单模型类中的数据完全满足所有的验证器(数据不出错)，则返回True，否则False
if form.validate_on_submit():
username = form.user_name.data
pwd = form.password.data
pwd2 = form.password2.data
print(username, pwd, pwd2)
return redirect(url_for("index"))
return render_template('register.html', form=form)


@app.route("/index")
def index():
return "Success"


if __name__ == '__main__':
app.run()
模板代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
{{ form.csrf_token }}
{{ form.user_name.label }}
{{ form.user_name }}<br>
{% for msg in form.user_name.errors %}
<p>{{ msg }}</p>
{% endfor %}

{{ form.password.label }}
{{ form.password }}<br>
{% for msg in form.password.errors %}
<p>{{ msg }}</p>
{% endfor %}

{{ form.password2.label }}
{{ form.password2 }}<br>
{% for msg in form.password2.errors %}
<p>{{ msg }}</p>
{% endfor %}

{{ form.submit }}
</form>
</body>
</html>