Question

我正在This Demo尝试一个简单的输入验证，你可以看到我正在使用一些嵌套的if语句（可以更多地应用更多的验证规则）。现在我的问题是你是否可以帮我使用JavaScript Switch Statement而不是ifses if语句我感到困惑的原因是声明的(expression)和default:部分，我完全混淆了如何在我的情况下使用它们？

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

这是我的代码：

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

由于

Answer 1

这不是方式，switch语句的工作原理。在交换机的情况下，您不能写不同的表达式。它只能将表达式与case语句中定义的单个值进行比较。请参阅：Expression inside switch case statement

上的其他说明

Answer 2

如何使用switch()语句的示例如下：

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
}

最好使用一个switch而不是使用2-3个if/then/else语句。

您可以在此处找到更多示例：http://www.w3schools.com/js/js_switch.asp

Answer 3

虽然不是使用开关的好方法，但您可以这样做：

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

Answer 4

If else声明适用于此处。这里很难使用switch。让我们看一下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();
    });
});

代码看起来很长，并且在更多条件下成为问题。所以 if else 是更好的解决方案。

switch demo

Answer 5

您可以在case子句中编写表达式，但必须返回值以进行比较。

$(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

在我的情况下，我使用了switch作为Bootstrap中表单的练习。由于程序程序不断跟踪更多字段，因此让它们在情况之间切换，因此它不需要检查其上的每个变体并跳转到下一个字段。我提出并反对开关应该寻找的条件。请记住，这是一次课外活动，我的界限很清楚：不允许/不允许。这是代码

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

如何在字段验证中使用JavaScript Switch Case

6 个答案: