通知用户 Dash 中的无效输入

Posted 2023-03-22

【中文标题】通知用户 Dash 中的无效输入

【英文标题】：Inform user of invalid input in Dash

【发布时间】：2021-07-21 05:20:51

【问题描述】：

我使用破折号创建了一个仪表板。它有一个输入框，用户可以在其中输入一些数据。如果在附加的数据框中找到数据，则会显示一些图表。但是，如果在数据框中找不到用户输入的输入，则什么也不会发生并且页面保持空白。如果输入无效，有没有办法显示错误消息：

【参考方案1】：

dash-core-component 的Input 组件有一个您可以使用的pattern 属性：

检查控件值的正则表达式。模式必须匹配整个值，而不仅仅是某个子集。使用 title 属性来描述模式以帮助用户。当 type 属性的值为 text、search、tel、url、email 或 password 时，该属性适用，否则将被忽略。正则表达式语言与 javascript RegExp 算法相同，使用 'u' 参数使其将模式视为 unicode 代码点序列。该模式没有被正斜杠包围。

现在，如果您只想验证字符串的格式，您可以将一些正则表达式模式传递给 pattern 属性。

如果您想根据是否在数据框中找到输入值进行验证，您可以执行以下操作：

df = pd.DataFrame("data": ["1", "2", "3"])

app = dash.Dash()
app.layout = html.Div(
    [dcc.Input(id="input", type="text"), html.Div(id="output")], style="padding": 10
)


@app.callback(
    Output("output", "children"),
    Output("input", "pattern"),
    Input("input", "value"),
)
def number_render(input_value):
    pattern = input_value
    filtered_df = df[df["data"] == input_value]

    if filtered_df.empty:
        pattern = pattern + "_invalid"

    return input_value, pattern

这里的想法是根据输入的值过滤数据帧。如果在数据框中找不到输入值，我们想让模式无效。

我在这里做的方式是使模式值等于输入值与另一个值连接以确保模式不匹配。

如果输入值与数据框中的数据匹配，则模式设置为等于输入值。