生命周期javascript ...凝结if语句

时间:2015-01-08 14:22:02

标签: javascript if-statement livecycle

我正在处理一个带有“验证”按钮的表单。此按钮的目的是检查并确保所有字段都已完成(这是项目所需的)。下面是检查字段是否为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中处理字段名称吗?

2 个答案:

答案 0 :(得分:0)

您可以轻松地将其变为一个简单的功能:

 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);
});

答案 1 :(得分:0)

您可以非常轻松地将其转换为循环,并可以将其编写为 IIFE 以保持名称空间清洁

(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只能设置为最后一项的条件,您确定不想使用标志并将其设置为最后一个吗? e.g。

(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']));

通用表单的更新,假设sfRequestorsfRequest

(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
}());