在Python中制作动态复选标记

Question

我想应用一个小项目，其中复选标记的颜色根据条件而变化，让我们考虑以下截图：

我肯定会更改跨度标签中复选标记的颜色，对吧？但让我们假设我想让它取决于某些条件，并且我想使用 python，即 Flask，让我们考虑以下形式：

所以用户正在输入他的年龄和体重，如果他们都满足某些条件，那么复选标记的颜色必须是绿色，否则它必须是红色，我知道复选标记是这样的：

<span style="color: rgb(0,255,0);">&#10003 </span><br>

但是如何让它变得动态呢？我尝试过以下一种：我在 python 中创建了 text_color 变量： color_text = "color: rgb(255,255,0);"并将其应用到 html 文件中，如下所示： ✓

但不会直接影响它，那么我怎样才能做得更好呢？请帮助我，我将发布 html 和 python 代码:

Python代码：

import numpy as np
from flask import Flask, request, jsonify, render_template, send_from_directory

app = Flask(__name__)


@app.route("/")
def home():
    return render_template("Ages.html")


@app.route("/predict", methods=["POST"])
# @app.route('/')
def predict():
    text = [x for x in request.form.values()]
    age = float(text[0])
    weight = float(text[1])
    if age > 18 and weight > 70:
        Text = f"your age is {age} and your  weight is {weight}"
    else:
        Text = f"sorry your age  and weight does not meet  condtions"
    color_text = "color: rgb(255,255,0);"
    # text=list(text)
    return render_template("Ages.html", prediction_text=Text)
    # sentiment_pipeline = pipeline("sentiment-analysis")
    # result =sentiment_pipeline(text)[0]
    # if result['label']=='POSITIVE':
    #     return render_template('Commenting.html',prediction_text=f'emotion of comment is positive')
    # else:
    #     return render_template('Commenting.html', prediction_text=f'emotion of comment is not positive')


if __name__ == "__main__":
    app.run()

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Enter Your Age</title>
</head>

<body>
  <p>Enter your Age and Weight</p>

  <form action="{{ url_for('predict')}}" method="post">
    <label for="age">enter your age:</label><br><span style={{color_text}}>&#10003 </span><br>
    <input type="text" id="age" name="age" value=""><br>
    <label for="weight">Enter your weight:</label><br><span style={{color_text}}>&#10003 </span><br>
    <input type="text" id="weight" name="weight" value=""><br>
    <input type="submit" value="Submit">
  </form>
  <h4 style="color:Violet;">
    {{ prediction_text }}
  </h4>

</body>

</html>

Answer 1

有2种方法可以实现表单验证：

简单的html验证，无需请求
后端验证，需要ajax请求

根据您的要求，无论您的验证是复杂的还是简单的（在您的示例中，我没有看到任何使用 ajax 请求的复杂逻辑），您都可以将一种或两种方法合并到您的表单中。

简单的例子：

const ageInput = document.getElementById("age");
const checkmark = document.querySelector(".checkmark");

ageInput.addEventListener("input", function () {
  if (this.value >= 18 && this.value <= 100) {
    checkmark.style.color = "green";
  } else {
    checkmark.style.color = "red";
  }
});

<h1>Enter age</h1>
<form>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age" required>
    <span class="checkmark" style="color: red;">&#10003;</span>
  </div>
  <button type="submit">Submit</button>
</form>

这个复杂的示例将要求您编写一个验证视图，并且您需要返回一个 json 响应，而不是使用

render_template

。之后您需要进行相应的处理。（Flask 将字典序列化为 json。）

@app.route("/predict", methods=["POST"])
def predict():
    # some validation steps
    return {"success": True}

在Python中制作动态复选标记

问题描述投票：0回答：1

1个回答

最新问题

在Python中制作动态复选标记

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1