如何在python烧瓶中获取html属性，如html元素的类

Question

我有一张信用卡验证表。我想在 routes.py 文件中获取突出显示的信用卡类型图像的类名。

{% extends 'layout.html' %}
{% block content %}
<form class="form" method="post" action="{{ url_for('checkout') }}">
    <div class="creditCardForm">
            <div class="heading">
                <h2>Confirm Purchase</h2>
            </div>
            <div class="payment">
                    <div class="form-group owner">
                        <label for="owner">Owner</label>
                        <input type="text" class="form-control" id="owner" name="owner">
                    </div>
                    <div class="form-group CVV">
                        <label for="cvv">CVV</label>
                        <input type="text" class="form-control" id="cvv" name="cvv">
                    </div>
                    <div class="form-group" id="card-number-field">
                        <label for="cardNumber">Card Number</label>
                        <input type="text" class="form-control" id="cardNumber" name="cardNumber">
                    </div>
                    <div class="form-group" id="expiration-date">
                        <label>Expiration Date</label>
                        <select name="expiration-month">
                            <option value="01">January</option>
                            <option value="02">February </option>
                            <option value="03">March</option>
                            <option value="04">April</option>
                            <option value="05">May</option>
                            <option value="06">June</option>
                            <option value="07">July</option>
                            <option value="08">August</option>
                            <option value="09">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                        </select>
                        <select name="expiration-year">
                            <option value="16"> 2020</option>
                            <option value="17"> 2021</option>
                            <option value="18"> 2022</option>
                            <option value="19"> 2023</option>
                            <option value="20"> 2024</option>
                            <option value="21"> 2025</option>
                        </select>
                    </div>
                    <div class="form-group" id="credit_cards">
                        <img src="{{ url_for('static', filename='pics/'+'visa.jpg') }}" id="visa" name="visa" class="">
                        <img src="{{ url_for('static', filename='pics/'+'mastercard.jpg') }}" id="mastercard" name="mastercard" class="transparent">
                        <img src="{{ url_for('static', filename='pics/'+'amex.jpg') }}" id="amex" name="amex" class="transparent">
                    </div>
                    <div class="form-group" id="pay-now">
                        <button type="submit" class="btn btn-info" id="confirm-purchase">Pay & Proceed</button>
                    </div>
            </div>
        </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<script type="text/javascript" , src="{{ url_for('static', filename='script.js') }}"></script>
<script type="text/javascript" , src="{{ url_for('static', filename='jquery.payform.min.js') }}"></script>
{% endblock content %}

在上面的页面中，如果我输入VISA卡的详细信息，图像“mastercard”和“amex”的类名将变为透明。

我想在我的 routes.py 文件中验证这一点。因此，我正在寻找如下内容：

@app.route("/checkout", methods=['POST'])
def checkout():
visa_class = request.form['visa'].getattr('class')

Answer 1

我今天自己找到了一个替代方案：我将值分配给一个不可见的文本区域，以便我们在使用烧瓶时可以访问它。

代码如下： HTML：

<form method="post" action="{{ url_for('main') }}" id="form">
  <div class="form-group">
    <textarea name="hidden" class="form-control" style="display: none;" value="" id="hidden"></textarea> 
  </div>
  <input type="submit" value="Confirm" onclick="Assign()" align="center">
</form>
<script>
function Assign()
{
  document.getElementById("hidden").value = "some values";
}

Python：

@app.route('/', methods=['GET', 'POST'])
def main():
    if request.method == 'POST':
            value_you_want = request.form['hidden']

Answer 2

方案二：获取每张卡片图片的类

在此解决方案中，visa、mastercard 和 amex 类将在分别通过输入字段 visa_class、mster_card_class 和 amex_class 提交表单时通过 POST 方法传递。这些字段将在提交时创建。

这是通过在{% endblock content %} 之前的 HTML 文件末尾添加以下 javascript/Jquery 来完成的。在完成整个页面的渲染后，将添加一个提交表单的事件。我假设 HTML 中只有一个表单，否则应该使用 form-id。

<script>
    $(document).ready(function() {

        $("form").submit( function(eventObj) {

          $("<input />").attr("type", "hidden")
              .attr("name", "visa_class")
              .attr("value", $("#visa").attr('class'))
              .appendTo("form");

          $("<input />").attr("type", "hidden")
              .attr("name", "mster_card_class")
              .attr("value", $("#mastercard").attr('class'))
              .appendTo("form");

          $("<input />").attr("type", "hidden")
              .attr("name", "amex_class")
              .attr("value", $("#amex").attr('class'))
              .appendTo("form");

          return true;
        });
    })
</script>

在checkout() 中获取类值如下：

@app.route("/checkout", methods=['POST'])
def checkout():
    if request.method == 'POST':
        visa_class = request.form['visa_class']
        mster_card_class = request.form['mster_card_class']
        visa_amex_classclass = request.form['amex_class']
    else:
        visa_class = None # not yet
        mster_card_class = None
        visa_amex_classclass = None

解决方案号（1）：在 python 中识别卡类型

在这里，我建议另一种方法来实现您的目标，这从您的话中显而易见：

我想在我的路线中验证这一点

这个目标是识别卡片类型

另外，我们在问题中发现：

如果我输入 VISA 卡详细信息，图像“mastercard”和“amex”的类名将变为透明。

这提到在 HTML 文件中有一个 javascript 事件负责识别卡类型。该事件负责只显示正确的卡片类型图像。

所以，如果我们按照python中那个javascript事件的相同方法，我们可以从卡的详细信息中检查卡的类型，在网上搜索我们找到了这些信息[1]：

每个卡网络的第一位数字不同：

Visa 卡 – 以 4 开头，有 13 位或 16 位数字

万事达卡 – 以 5 开头，有 16 位数字***

美国运通卡 - 以 3 开头，然后是 4 或 7，有 15 位数字

所以在你的python代码中，我们可以使用如下代码从卡号中识别卡类型：

@app.route("/checkout", methods=['POST'])
def checkout():
    if request.method == 'POST':
        cardNumber= request.form['cardNumber']
        if cardNumber[0]=='4'and len(cardNumber) in (13,16):
            card_type='visa'
        elif cardNumber[0]=='5' and len(cardNumber)=16:
            card_type='mastercard'
        elif cardNumber[:1] in ('34','37') and len(cardNumber)=15:
            card_type='amex'
        else:
            card_type= None

        if card_type is None:
            '''
            taks some action
            ''''

如果您检查与卡类型识别相关的javascript事件，则很容易验证该方法。因此，您可以使 Python 和 Javascript 完全相同，无需检查class。

祝你好运。

Answer 3

如果你想传递“class” HTML 属性，你必须使用 class_='' 因为“class”是 Python 中的保留关键字。

{{ form.searchCity(size=20, class_='searchCity') }}  

文档位于：

http://wtforms.readthedocs.io/en/latest/crash_course.html#rendering-fields

然而，真正的力量来自使用它的 call() 方法渲染字段。通过调用该字段，您可以提供关键字参数，这些参数将作为 html 属性注入到输出中：

form.content(style="width: 200px;", class_="bar")

<input class="bar" id="content" name="content" style="width: 200px;" type="text" value="foobar" />'