如何在 UI5 中管理输入验证和值状态答案

【问题标题】：How to manage input validation and Value State in UI5如何在 UI5 中管理输入验证和值状态
【发布时间】：2018-03-12 02:08:29
【问题描述】：

在以下情况下我需要帮助。我有一个输入字段和前面的 3 个复选框。要求是 - 如果用户在字段中输入内容，他必须选中其中一个复选框。虽然它在输入字段中提供了正确的值状态，但如果我单击提交按钮，它不会在页面上停止。而是提交动作是成功完成的。如果输入处于错误状态，我不希望用户成功提交。我该怎么办？我添加了以下内容：

XML View:
<Input id="input" width="25px" change="handleChange" </Input>
<CheckBox id="2" text ="Hello" select="ChkSel"> </CheckBox>
<CheckBox id="3" text ="Hello2" select="ChkSel"> </CheckBox>
<CheckBox id="4" text ="Hello3" select="ChkSel"> </CheckBox>

Controller:
    handleChange: function(oEvent) {
            var newValue = oEvent.getParameter("value");
            var check1 = this.getView().byId("2").getSelected();
            var check2 = this.getView().byId("3").getSelected();
            var check3 = this.getView().byId("4").getSelected();

            if (newValue !== "") {
                if (!check1 && !check2 && !check3) {
                                        this.getView().byId("input").setValueState(sap.ui.core.ValueState.Error);
                    MessageToast.show("Select appropriate checkbox");
                }
            }
            if (newValue === "") {
                if (check1 || check2 || check3) {
                   MessageToast.show("Enter text or deselect checkbox");
                } 

            }

        },
        ChkSel: function(oEvent) {
            var newValue = this.getView().byId("input").getValue();
            var check1 = this.getView().byId("2").getSelected();
            var check2 = this.getView().byId("3").getSelected();
            var check3 = this.getView().byId("4").getSelected();
            if (newValue !== "") {
                if (check1 || check2 || check3) {
                    this.getView().byId("input").setValueState("None");
                } else {
                    this.getView().byId("input").setValueState(sap.ui.core.ValueState.Error);
                }

            }

【问题讨论】：

标签： xml validation sapui5 sap-fiori

【解决方案1】：

好吧，我只是使用一个不同的变量来决定是否必须完成 POST 调用。

例如，在使用 Jquery 循环/JS 循环检查 Value State 之前，可以声明一个变量 var canProceed=true。

现在在循环时，如果你得到任何值状态错误的 id，那么你可以更新canProceed = false，然后打破循环。

因此，如果 canProceed 为 true，则执行 post 请求，否则显示消息框或更改值状态。

【讨论】：