如何在归档验证中使用 JavaScript Switch Case

Question

I am trying a simple input validation at This Demo and as you can see I am using some nested if statements (which can be more for applying more validation rules). Now my question is if you can help me to use JavaScript Switch Statement instead of theses if statement the reason which I got confused is the (expression) and default: part of the statement which I am totally confused how to use them in my case?

switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        default code block
}

and here is my code:

$(function () {
    $("#pro").on("click", function (e) {
        inputData = $.trim($('input[type="text"]').val());
        if (inputData == ""){
            alert("Field Can not be Empty");
        }
        else if (inputData.length<3){
            alert("Field Can Be Less Than 4");
        }
        else
        {
         alert($('input[type="text"]').val());
        }
        e.preventDefault();
    });
});

Thanks

Answer 1

That's not the way, how switch statement works. You can not write different expressions in the case of a switch. It can only compare the expression to a single value defined in a case statement. See another explanation at: Expression inside switch case statement

Answer 2

An example of how to use switch() statement would be like this:

var expression = "1";

switch(expression) {
    case "1":
        //this will be executed
        break;
    case "2":
        //wont be executed
        break;
    default:
        //wont be executed, since a match was found
}

It is better to use one switch instead of using 2-3 if/then/else statements.

You can find more examples here: http://www.w3schools.com/js/js_switch.asp

Answer 3

Although not a good way to use switches you ca proceed like this:

switch(true){
 case (inputData == "") :
 // your code
 break;
 case (inputData.length<3) :
 //your code
 break;
 default:
 //your code
 break;
}

Answer 4

If else statement is suit here. It is difficult to use switch here. Let us look the switch

$(function () {
    $("#pro").on("click", function (e) {
        inputData = $.trim($('input[type="text"]').val());

        var len = inputData.length;
        switch(len)
        {
            case 0:
                alert("Field Can not be Empty");
                break;
            case 1:
                alert("Field Can't Be Less Than 4");
                break;
             case 2:
                alert("Field Can't Be Less Than 4");
                break;
             case 3:
                alert("Field Can't Be Less Than 4");
                break;
            default:
                alert($('input[type="text"]').val());
        }
        e.preventDefault();
    });
});

The code looks lengthy and become make problem for more condition. So the if else is the better solution here.

switch demo

Answer 5

You can write expressions in case clauses but you have to return the value for comparison.

 $(function () { var $input = $('input[type="text"]'); $('button').on('click', validateInput) function validateInput(e) { e.preventDefault(); var alertMsg = ""; var inputData = $.trim($input.val()); switch(inputData) { case "": alertMsg = "Field Can not be Empty"; break; case (inputData.length < 4 && inputData): alertMsg = "Field Can't Be Less Than 4"; break; default: alertMsg = inputData; } alert(alertMsg); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"><button>Click here</button>

Answer 6

In my case I used switch as an exercise to a form in Bootstrap. Due so I let the break between the cases as the program keeps tracking for more fields, so it doesn't need to check every variant on it and jumps to the next field. I made and object with the conditions that the switch should look for. Pls, do remember that this is a schoolar exercise and my boundaries were quite clear: no if/else allowed. Here is the code

//taking input value field
 let mailLine = inputEmail.value;

//obj mail
let mailObj = {

    case1 : (mailLine == ""),
    case2 : (!checkValidity(mailLine)), 
   //function check, no need to place it here!

}
//if the cases are true
switch (true) {

    case mailObj.case1:
          
    inputEmail.classList.add("is-invalid");//bootstrap div
    
    document.getElementById("errorEmail").textContent = "No empty field allowed";
    
    counter ++; //for more stuff in the code
        
        break; //left it on purpose. No itineration. So it goes to password, city...

    case mailObj.case2:
   
    inputEmail.classList.add("is-invalid");
    
    document.getElementById("errorEmail").textContent = "Not right mail format";
   
    counter ++;
        
        break;

    default:
    
    inputEmail.classList.remove("is-invalid");
    
    inputEmail.classList.add("is-valid");
    
    document.getElementById("okEmail").textContent = "Right mail format";
    
        break;
}