Livecycle语句

Question

我正在处理一个具有“验证”按钮的表单。此按钮的目的是检查并确保所有字段都已完成(这是项目所要求的)。下面是检查字段是否为null的代码，然后更改边框颜色并显示文本框。

if (form1.Main.sfRequestor.requestNameFirst.rawValue == null){
    form1.Main.sfRequest.txtValidate.presence = "visible";
    form1.Main.sfRequestor.requestNameFirst.border.edge.color.value = "255,0,0"
} else {
    form1.Main.sfRequest.txtValidate.presence = "hidden";
    form1.Main.sfRequestor.requestNameFirst.border.edge.color.value = "255,255,255"
};

if (form1.Main.sfRequestor.requestNameLast.rawValue == null){
    form1.Main.sfRequest.txtValidate.presence = "visible";
    form1.Main.sfRequestor.requestNameLast.border.edge.color.value = "255,0,0"
} else {
    form1.Main.sfRequest.txtValidate.presence = "hidden";
    form1.Main.sfRequestor.requestNameLast.border.edge.color.value = "255,255,255"
};

有几个子表单中的20+字段需要检查。我正在尝试合并代码，但我对如何进行合并感到困惑。变量能处理Javascript中的字段名吗？

Answer 1

您可以很容易地将它变成一个循环，并且可以将它写成一个生命，以保持名称空间的清洁。

(function (arr) {
    var txtValidate = form1.Main.sfRequest.txtValidate,
        i, e;
    for (i = 0; i < arr.length; ++i) {
        e = form1.Main.sfRequestor[arr[i]]; // cache me
        if (e.rawValue == null){
            txtValidate.presence = "visible";
            e.border.edge.color.value = "255,0,0"
        } else {
            txtValidate.presence = "hidden";
            e.border.edge.color.value = "255,255,255"
        }
    }
}(['requestNameFirst', 'requestNameLast']));

但是，看起来txtValidate.presence只被设置为上一项的任何条件，您确定不想使用标记并将其设置为last吗？例如：

(function (arr) {
    var txtValidateState = 'hidden',
        i, e;
    for (i = 0; i < arr.length; ++i) {
        e = form1.Main.sfRequestor[arr[i]];
        if (e.rawValue == null){
            txtValidateState = "visible"; // any null makes txtValidate visible
            e.border.edge.color.value = "255,0,0"
        } else {
            e.border.edge.color.value = "255,255,255"
        }
    }
    form1.Main.sfRequest.txtValidate.presence = txtValidateState; // set last
}(['requestNameFirst', 'requestNameLast']));

假设sfRequestor和sfRequest更新泛型表单

(function (form, arr) {
    var txtValidateState = 'hidden',
        i, e;
    for (i = 0; i < arr.length; ++i) {
        e = form.sfRequestor[arr[i]];
        if (e.rawValue == null){
            txtValidateState = "visible";
            e.border.edge.color.value = "255,0,0";
        } else {
            e.border.edge.color.value = "255,255,255";
        }
    }
    form.sfRequest.txtValidate.presence = txtValidateState;
}(form1.Main, ['requestNameFirst', 'requestNameLast']));

假设sfRequest是常量但sfRequestor可能是不同的更新

(function () { // moved IIFE to protect namespace
    function validate(form, subform, arr) { // now named, new param subform
        var txtValidateState = 'hidden',
            i, e;
        for (i = 0; i < arr.length; ++i) {
            e = form[subform][arr[i]]; // select from subform
            if (e.rawValue == null){
                txtValidateState = "visible";
                e.border.edge.color.value = "255,0,0";
            } else {
                e.border.edge.color.value = "255,255,255";
            }
        }
        form.sfRequest.txtValidate.presence = txtValidateState; // assuming stays same
    }
    validate(form1.Main, 'sfRequestor', ['requestNameFirst', 'requestNameLast']);
    validate(form1.Main, 'sfClientInfo', ['firstname']);
    // if you have many here you can re-write as a loop again
}());

Answer 2

您可以轻松地将它变成一个简单的函数：

 function validateField(element) {
     if (element.rawValue == null) {
        form1.Main.sfRequest.txtValidate.presence = "visible";
        element.border.edge.color.calue = "255,0,0";
     }
     else {
        form1.Main.sfRequest.txtValidate.presence = "hidden";
        element.border.edge.color.calue = "255,255,255";      
     }
 }

然后就这样称呼它：

validateField(form1.Main.sfRequestor.requestNameFirst);
validateField(form1.Main.sfRequestor.requestNameLast);

为了进一步简化，将所有20个元素放在一个数组和循环中。

var elements = [form1.Main.sfRequestor.requestNameFirst, form1.Main.sfRequestor.requestNameLast, ...];
elements.forEach(function(element) {
    validateField(element);
});