sapui5 中的必填字段验证器答案

【问题标题】：Required field validator in sapui5sapui5 中的必填字段验证器
【发布时间】：2014-07-17 04:03:34
【问题描述】：

我有四个带有名称、年龄、城市和电话号码标签的文本字段。如果它留空，我必须验证它。它应该提醒我填写。如何在 sapui5 中使用必填字段验证器验证文本字段？

【问题讨论】：

【解决方案1】：

您可以简单地编写一个函数来获取文本字段并检查它们的值。
这可能如下所示：

function validateTextFieldValues() {

    // this function gets the first textfield
    var nameTextField = sap.ui.getCore().byId("idOfTheTextFieldContaingTheName");
    //this function checks its value, you can insert more checks on the value
    if(nameTextField.getValue() === "") {
        alert("Please enter a name.");
    }

    // ...
    // the same for the other fields
}

然后就可以在按钮点击上绑定功能了，比如创建按钮的时候：

new sap.ui.commons.Button({
    // your buttonconfiguration
    click: function(){
        validateTextFieldValues();
    }
});

此外，TextField 有一个名为 valueState 的属性。
与其事件liveChange 相关，有机会在输入时验证输入：

new sap.ui.commons.TextField({
    // your configuration
    liveChange: function(){
        if(this.getValue() === "")
            this.setValueState(sap.ui.core.ValueState.Error);
        else
            this.setValueState(sap.ui.core.ValueState.Success);
    }
});

_{(https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.core.ValueState.html)}

【讨论】：

在 sapui5 中是否有任何用于验证的 API 参考？
if (this.getValue().trim().length === 0){}
1.一些 UI5 控件也有setValueStateText() 2. 使用Data Types 加上Handling Wrong User Input 似乎是内置的输入处理方式，但我看不到比自定义错误处理功能更多的好处。

【解决方案2】：

您可以在更改字段值本身时对其进行验证，如下所示

var oname = new sap.ui.commons.TextField({
id: 'input2',
change : function(){
       if(this.getValue()=='')
         alert("enter some value");
  }
});

或者你可以编写一个函数来验证点击某个按钮。

【讨论】：

【解决方案3】：

即使使用 required 属性也无济于事，因为 UI5 不会在表单标签中放置任何控件。 required 属性设置一个属性

aria-required=true

您可以使用 jQuery 选择所有需要 aria 的元素并在任何其他控件事件（例如按下按钮）上处理它们。

下面是相同的示例代码。

var oBtn = new sap.ui.commons.Button();
    oBtn.attachPress(function(){
        var error;
        jQuery('input[aria-required=true]').each(function(){
            var oInput = sap.ui.getCore().byId(this.id);
            var val = oInput.getValue();
            if(!val){                   
                var sHtml = '<ul><li><strong> value is empty</li></ul>';
                var sValueState = '<strong>Error!</strong>';
                // Combine Input value, Error title and message into a Rich Tooltip
                var oTooltip = new sap.ui.commons.RichTooltip({ text: sHtml, valueStateText: sValueState});
                oInput.setTooltip(oTooltip);
                oInput.setValueState(sap.ui.core.ValueState.Error);
                error = false;
            }else{
                oInput.setValueState(sap.ui.core.ValueState.None);                   
                oInput.setTooltip(' ');
            }
        });
        if(error){
            return error;
        }
    });

【讨论】：