如何将 JS 变量添加到错误消息中并保留一个字体 ID 标签

Question

我有一个带有以下错误消息的表单。此错误消息正常运行，所以我先分享它，然后显示我接下来要更改的内容：

if (thing is true) {
    $(this).parents("table:first")
    .prop("disabled",true)
    .css({'background-color' : 'lightgray'})
    .after("<font color = red id=error3><strong>*</strong> Please check that your start and end dates are between June 15, 2018 and November 30, 2019. The Start Date may not be greater than the End Date.</font>");
}             

我想更改错误消息以在表单中包含用户较早的日期提供程序。当我使用连接时，它看起来像这样：

if (thing is true) {
    // example dates provided by user
    cysd = $("#id_currentyearstartdate").val();
    cyed = $("#id_currentyearenddate").val();
    // let's say cysd is January 1, 2018 and cyed is December 31, 2018

    $("input#next-submit-button")
    .prop("disabled",true)
    .css({'background-color' : 'lightgray'})
    .after("<font color = red id=error2><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between </font>" + cysd + "<font color = red id=error2> and </font>" + cyed + "<font color = red id=error2>. The Start Date may not be greater than the End Date.</font>");

我搞砸的地方是，在原始错误消息中，我有一条错误消息，字体 ID 为“error2”。这使我能够在正确的条件下轻松添加或删除错误消息。

我不知道如何在实际的错误消息文本或字体标记中包含变量值，这样当 id=error2 时仍会引用 整个 string "请检查您的开始日期和结束日期是否在 2018 年 1 月 1 日至 2018 年 12 月 31 日之间。开始日期不得早于结束日期。

Answer 1

把它放在同一个标​​签里就行了……

.after("<font color = red id=error2><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between " + cysd + ". The Start Date may not be greater than the End Date.</font>");

您也可以使用template literals 而不是连接，这更容易一些，因为您不必担心会混淆您的引号。用反引号 (`) 包裹你的字符串，并将你的变量放在前面有 $ 的花括号中。

.after(`<font color = red id=error2><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between ${cysd}. The Start Date may not be greater than the End Date.</font>`);

无论如何，您都不应该使用font 标签-they're obsolete。请改用 css 和 span 标签。

.after(`<span style=color:red id=error2><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between ${cysd}. The Start Date may not be greater than the End Date.</span>`);

Answer 2

您可以使用Template Literal 并使用美元符号和花括号将变量值放入您的字符串中。例如：${cysd}

$("input#next-submit-button")
.prop("disabled",true)
.css({'background-color' : 'lightgray'})
.after(`<font color="red" id="error2"><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between ${cysd} and ${cyed}. The Start Date may not be greater than the End Date.</font>`);

Answer 3

为什么不将整个消息包装在 div 和 id="error2" 中：

<style>
    #error2 {
        color: 'red'
    }

    .error_date {
        color: 'blue'
    }
</style>

$("input#submit-button")
    .prop("disabled",true)
    .after("<div id='error2'>" +
        "Please resolve any errors above before continuing.<br/>" +
        "<strong>*</strong> Check that your start and end dates are between <span class='error_date'>" + cysd + "</span> and <span class='error_date'>" + cyed + "</span>." +
        "The Start Date may not be greater than the End Date.</div>");