提交前验证 WTForm

Question

是否可以在离开字段后提交前验证 WTForm 字段？例如，在输入用户名后，在用户单击提交之前验证该字段以查看其是否可用并显示复选标记。

Answer 1

更改字段时，执行检查并更改相邻节点中的文本。有些东西可以直接在浏览器中验证。要根据服务器上的数据进行验证，请将带有 JavaScript 的请求发送到检查数据的视图，然后 returns 发送 JSON 响应。

@app.route('/username-exists', methods=['POST'])
def username_exists():
    username = request.form['username']
    exists = check_if_user_exists(username)
    return jsonify(exists=exists)

<input id='username' name='username'>
<p id='username-status'></p>

var username_input = $('#username');
var username_status = $('#username-status');

$('#username').on('focusout', function () {
    $.post(
        "{{ url_for('username_exists') }}",
        {
            username: username_input.val()
        },
        function (data) {
            username_status.text(data.exists ? '✔️' : '');
        }
    );
});

此示例使用 jQuery，但该概念并不特定于任何库。

或者，post 将整个表单转移到仅验证字段的单独视图，然后 return jsonify(form.errors) 并在浏览器中对它们进行处理。代码与上面基本相同，只是有一些额外的逻辑将错误消息放在正确的字段旁边。

请记住在提交表单时仍要验证数据，因为可以在浏览器之外使用其他方式发出请求

提交前验证 WTForm

Validate WTForm before submitting

python

jinja2

flask

flask-wtforms