比較 Flask Jinja2 中的兩個字段

Question

但是，我正在嘗試比較使用 Jinja 生成的兩個字段，而無需按下提交按鈕。

我使用了包含的驗證器、標准 if 案例等。它們都沒有按預期工作，所以我嘗試了 Javascript。

一般來說，我想：

比較兩個字段（域/服務器）。 如果他們的 IP 地址不完全是“確認”按鈕，則應顯示。

為此，我需要重新加載服務器端 HTML。

此外，我無法弄清楚如何通過 Javascript 比較兩個字段的 IP 地址。

這是一個示例代碼：

<div id="home" class="text-center">
    Hello, {{ username }}
</div>

<body>
    <input type="text" id="domain" size="30">
    <input type="text" id="server" size="30">
    
    {% if not compareArecords %}
        <button type="button" class="btn btn-danger">Danger</button><br>
    {%endif %}
</body>
    
<script>
    document.getElementById("domain").addEventListener("keyup", compareArecords);
    document.getElementById("server").addEventListener("keyup", compareArecords);

    function compareArecords() {
        var text1 = document.getElementById("domain");
        var text2 = document.getElementById("server");
        if (text1.value === text2.value)
            return true;
        else
            return false;
    }
</script>

Answer 1

為了不必重新加載 html，通常會使用 css 隱藏元素，直到您需要顯示它。 在你的例子中會是這樣的

<body>
    <input type="text" id="domain" size="30">
    <input type="text" id="server" size="30">

    <button type="button" class="btn btn-danger hidden" id="btn-danger">Danger</button><br>
</body>

<script>
    document.getElementById("domain").addEventListener("keyup", compareArecords);
    document.getElementById("server").addEventListener("keyup", compareArecords);

    function compareArecords() {
        var text1 = document.getElementById("domain");
        var text2 = document.getElementById("server");
        if (text1.value === text2.value)
            // Nothing to do here!
        else {
            var danger_btn = document.getElementById("btn-danger");
            danger_btn.classList.toggle("hidden");
        }
    }
</script>

Css：

.hidden { display: none; }

應該注意的是，您也可以完全使用 javascript 生成危險按鈕，如果您想這樣做，這也不是太復雜，但它有一些缺點，例如關注點分離。

比較 Flask Jinja2 中的兩個字段

問題描述

1 個解決方案

解決方案1
0 2022-08-30 09:34:00

比較 Flask Jinja2 中的兩個字段

問題描述

1 個解決方案

解決方案1 0 2022-08-30 09:34:00

解決方案1
0 2022-08-30 09:34:00