如何向输入字段添加验证? [英] How can I add validation to an Input field?

问题描述

刚刚学习 SAP UI5，我有一个简单的输入字段，如下所示:

Just learning SAP UI5, I have a simple input field like so:

app.xml

<Input
    placeholder="Please enter 10 digit number"
    value=""
/Input>

我正在尝试了解如何在输入字段上添加验证以执行以下操作:

I'm trying to understand how I can add a validation on the input field that does the following:

-接受 10 位或更多的数字

-Accepts a number of 10 digits or more

到目前为止，据我所知，这可以通过以下方式进行设置:

So far, what I understand, this can be setup in the following way:

<Input value="{

    path : ‘/userName’,
    type : ‘sap.ui.model.type.Integer’,
    constraints : {
        minLength : 10
    }
}

让我感到困惑的地方:

输入字段旨在充当搜索栏，因此我不需要在必须配置路径的地方引入数据绑定(搜索栏不应具有初始值).有人可以向我解释如何在不设置路径"的情况下添加验证?

The input field is meant to act as a search bar, therefore I don't need to introduce databinding (search bar should not have an initial value) where I have to configure a path. Can someone explain to me how I can add validation without setting a 'Path'?

推荐答案

如果您查看 Input，你会看到控件有事件liveChange.此外，您还可以使用验证器向用户提供即时反馈.

If you check the documentation for Input, you'll see that the control has the event liveChange. Furthermore, you can also use the validators to give immediate feedback to the users.

让我们看一个例子.

查看:

<Input liveChange = "onLiveChange" />

控制器:

onLiveChange(oEvent) {
    let newValue = oEvent.getParameter("newValue");

    //you can also use None, or just remove this line
    this.setValueState(sap.ui.core.ValueState.Success); 

    if(/* your error condition */)
        this.setValueState(sap.ui.core.ValueState.Error);
    }
}

当您的情况"为真，整个输入将改变其边框.

When "your condition" is true, the whole input will change its border.

无论如何，如果您想使用模型，您可以尝试创建一个本地 JSON 模型，并尝试将其绑定到具有约束的输入.但在这种情况下，我会选择第一个解决方案.

Anyway, if you want to use a model, you could try to create a local JSON-model, and try to bind it to the input with the constraint. But in this case, I would just go with the first solution.

这篇关于如何向输入字段添加验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！