1

我为一个输入字段写了一个小检查,它计算长度并确保它是正确的数量。它变得复杂,因为它需要允许 9 个数字或 1 个字母和 5 个数字。我现在拥有它的方式有效,但代码伤害了我的大脑,我想看看更优雅的解决方案会是什么样子,也许使用三元和/或开关?

所以我现在有一小部分不太漂亮:

if (len !== 9) {
    if (len == 1) {
        y.hide();
        n.show();
        valInput.text("You need 8 more numbers");
    } else {
        if (len == 2) {
            y.hide();
            n.show();
            valInput.text("You need 7 more numbers");
        } else {
            if (len == 3) {
                y.hide();
                n.show();
                valInput.text("You need 6 more numbers");
            } else {
                if (len == 4) {
                    y.hide();
                    n.show();
                    valInput.text("You need 5 more numbers");
                } else {
                    if (len == 5) {
                        y.hide();
                        n.show();
                        valInput.text("You need 4 more numbers");
                    } else {
                        if (len == 6) {
                            y.hide();
                            n.show();
                            valInput.text("You need 3 more numbers");
                        } else {
                            if (len == 7) {
                                y.hide();
                                n.show();
                                valInput.text("You need 2 more numbers");
                            } else {
                                if (len == 8) {
                                    y.hide();
                                    n.show();
                                    valInput.text("You need 1 more number");
                                } else {
                                    if (len > 9) {
                                        y.hide();
                                        n.show();
                                        valInput.text("Order number must be 9 digits");
                                        // gt 9
                                    }
                                    // 8
                                }
                                // 7
                            }
                            // 6
                        }
                        // 5
                    }
                    // 4
                }
                // 3
            }
            // 2
        }
        // 1
    }
    // this is not equal to 9
}

更新

感谢所有的答案!好多好东西,玩了一会儿我就收下我喜欢的。为了澄清当满足适当的要求时会发生什么,然后提交按钮淡入,但直到它被验证。不确定它是否相关,但会提到该函数也作为“实时类型”运行,因此每次返回带有计数的消息.keyup()

4

7 回答 7

5

如果你不想使用 switch,你可以这样做:

if (len < 9) {
    y.hide();
    n.show();
    valInput.text("You need " + (9 - len) + " more number(s)");
}
else if (len > 9) {
    y.hide();
    n.show();
    valInput.text("Order number must be 9 digits");
}
else {
    // all good here...
}

如果您不喜欢该"number(s)"部分,只需检查 len 是否不是 1,然后将其添加"s""number".

于 2013-09-16T17:50:23.150 回答
4

因为那些看起来都一样,为什么不使用这个:

if (len !== 9) {
    var diff = 9 - len;
    var value = ( 0 < diff ? "You need " + diff + " more numbers" : "Order number must be 9 digits" );
    y.hide();
    n.show();
    valInput.text(value);
}
于 2013-09-16T17:50:26.920 回答
4

我认为你应该通过 javascript 计算剩余的字符,因为这是所有其他 if else 分支的唯一区别,所以你可以做这样的事情并且更具可读性:

if (len !== 9) {
    y.hide();
    n.show();
    if (len > 9) {
        valInput.text("Order number must be 9 digits");
    }
    else{
        var remaining = 9 - len;
        valInput.text("You need " + remaining + " more numbers");
    }
}
于 2013-09-16T17:53:30.037 回答
3

在您的特定情况下,对于这样的事情,验证看起来很简单:

function validate(len) {
    var msg;
    if (len == 9)
        return true;
    y.hide(); /* no need to duplicate these calls in each condition */
    n.show();
    if (len < 9)
        msg = 'You need ' + (9-len) + ' more number' + (len == 1 ? '' : 's') + '.';
    else
        msg = 'You entered ' + (len-9) + ' number' + (len == 1 ? '' : 's') + ' too many.;
    valInput.text(msg);
    return false;

}

评论: ===应该保存以备不时之需,而不仅仅是花哨!不幸的是,很多人被教导要避免双重等于,而不是真正理解它有用和有用的额外功能,如类型转换。在这种情况下,没有任何理由使用三等号。

但一般来说,例如,如果您的条件序列所做的事情比警报消息序列仅按连续整数变化的消息序列更重要,则使用switch...

switch (len) {
case 1:

/* handle this case */;
    y.hide();
    n.show();
    valInput.text("You need 8 more numbers");
    break;
/* make sure to end case 1 with a break; */

case 2:
    y.hide();
    n.show();
    valInput.text("You need 7 more numbers");
    break;
/* make sure to end every case with a break; */

...
}
于 2013-09-16T17:48:36.643 回答
2

您可以将其简化为:

  if (len !== 9) {
      valInput.text("You need " +  (9 -len ) + " more numbers");
       y.hide();
      n.show();
   }
于 2013-09-16T17:51:16.747 回答
2

为什么还要使用 aswitch或 huge if

if(len == 9){
    // do stuff.
}else{
    y.hide();
    n.show();
    if(9 > len)
         valInput.text("You need " + (len - 9) + " less numbers");
    else 
         valInput.text("You need " + (9 - len) + " more numbers");
    valInput.text("Order number must be 9 digits");
}

只需声明您想要的值的范围,然后声明concatenate字符串。

于 2013-09-16T17:51:25.327 回答
0

最短的选择:

(y.hide(), n.show(), valInput.text(
     len < 9 &&  "You need " + (9-len) + " more digits"
  || len > 9 && "too many ("+ (len-9) + ") digits" 
  || "ok!"
));
于 2013-09-16T18:35:47.687 回答