如果/其他则更有效地编写此方法

Question

I wrote a little check for an input field that counts the length and makes sure it is the proper amount. It gets complex because it needs to allow either 9 digits or 1 letter and 5 digits. The way I have it now works but the code hurts my brain, I would like to see what a more elegant solution would look like for this, maybe using ternary and/or switch?

So a little part of the not so pretty that I have in place now :

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
}

UPDATE

Thanks for all the answers! Lots of good stuff, I will accept my favorite after I play for a while. To clarify what happens when the proper requirements are met then the submit button fades in but not until it is validated. Not sure if it is relevant but will mention that the function also runs as "live type" so the message with the count is returned after each .keyup()

Answer 1

If you don't want to use switch, you can do something like this:

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...
}

And if you don't like the "number(s)" part, just check if len is not 1, and add that "s" to the "number" .

Answer 2

As those look all the same why not use this:

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

Answer 3

I think you should calculate the remaining characters through javascript, since that's the only difference in all the other if else branches, so you can do something like this and would be much more readable:

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

Answer 4

In your particular case it looks like the validation is simple enough for something like this:

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;

}

Comment: === should be saved for when needed, not just to be fancy! Unfortunately so many are taught to avoid double equals rather than actually understanding its useful and helpful extra features like type conversion. In this situation there is no reason whatsoever to use triple equals.

But in general , such as if your sequence of conditionals does something more significant than alert a sequence of messages varying only by a consecutive integer, then use 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; */

...
}

Answer 5

You can simplify this to:

  if (len !== 9) {
      valInput.text("You need " +  (9 -len ) + " more numbers");
       y.hide();
      n.show();
   }

Answer 6

Why even use a switch or a 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");
}

Just declare the range of the values you want then concatenate the string.

Answer 7

the shortest alternative:

(y.hide(), n.show(), valInput.text(
     len < 9 &&  "You need " + (9-len) + " more digits"
  || len > 9 && "too many ("+ (len-9) + ") digits" 
  || "ok!"
));