如何在Filed Validation中使用JavaScript Switch案例

这不是switch语句的工作方式。在开关的情况下，不能编写不同的表达式。它只能将表达式与case语句中定义的单个值进行比较。请参阅以下位置的另一个解释：交换机案例语句内部的表达式

如何使用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

虽然使用开关不是一个好方法，但可以这样进行：

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

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是这里更好的解决方案。

交换机演示

您可以在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>

在我的案例中，我使用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;
}