如何访问 JQuery 中的 WTForm 字段？答案

【问题标题】：How to access WTForm fields in JQuery?如何访问 JQuery 中的 WTForm 字段？
【发布时间】：2015-07-09 22:52:48
【问题描述】：

我正在尝试使用 Flask 建立一个网站，并且正在使用 WTForms 进行这样的注册页面：

views.py：

@app.route('/register', methods=('GET', 'POST'))
def register():

    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(form.password.data)
        form.populate_obj(user)
        db.session.add(user)
        db.session.commit()
        login_user(user)
        return redirect(url_for('index'))
    return render_template('register.html', title='Register', form=form, user=current_user)

{% extends "base.html" %}
{%- block content -%}
{% import "formhelpers.html" as fields %}
<div id="login_container">
    <div id="register_title"><p>Register</p></div>
    <form method="post" action="{{ url_for('register') }}">
        {{ form.hidden_tag() }}
        {{ fields.render(form.first_name, placeholder="Firstname") }} <br/>
        {{ fields.render(form.last_name, placeholder="Surname") }} <br/>
        {{ fields.render(form.email, placeholder="Your email") }} <br/>
        {{ fields.render(form.password, placeholder="Password") }} <br/>
        {{ fields.render(form.confirm, placeholder="Confirm password") }} <br/>
      <p>
      <input class="btn" type="submit" value="register"></a>
      </p>
    </form>
</div>

{%- endblock -%}

我想要做的是，如果用户的密码不匹配，在他们键入时给他们一个错误消息。我知道你可以像这样在 jquery 中做这样的事情：

$('.password-field').keyup(function() {
    var p1 = $(this).val();
    var p2 = $(.confirm-field).val();
    if (p1 != p2) {
        $('.error-message').show();
    }

但我不确定如何访问 JQuery 中的 WTForm 字段。有什么想法吗？

【问题讨论】：

标签： jquery flask-wtforms

【解决方案1】：

这可行，如果我们有渲染的 HTML/表单字段，我们可以帮助您编写更简单的代码。

var p1 = $("#login_container input[type=password]:nth-child(1)");
var p2 = $("#login_container input[type=password]:nth-child(2)");
$(p1).keyup(function() {
   if ($(p1).val() != $(p2).val()) {
      $('.error-message').show();
   }
}

【讨论】：