如何用JavaScript的switch case替换表单验证函数中的if条件

你可以使用switch(true)的写法实现多条件判断，这种模式下每个case后的表达式返回布尔值，匹配到true时就会进入对应分支执行逻辑，完全可以替代你现有代码里的多个if判断，重构后的代码如下：

function validation() {
    var formrdvalid = false;
    var fname = document.getElementById("fname").value;
    var city =  document.getElementById("city");
    var radios = document.getElementsByName("gender");
    var agree = document.getElementById("invalidCheck").checked;

    // 性别选中状态遍历属于前置逻辑，单独提取执行
    if (!formrdvalid) {
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                formrdvalid = true;
            }
        }
    }

    switch(true) {
        // 校验姓名为空
        case fname === "":
            alert("please enter firstname");
            break;
        // 校验未选择城市
        case city.selectedIndex === 0:
            alert("select the city");
            return false;
        // 校验未选择性别
        case !formrdvalid:
            alert("please select gender");
            return false;
        // 校验未同意协议
        case agree === false:
            alert("agree terms and conditions");
            break;
    }
    // 所有校验通过返回true，否则返回false
    return !!(fname && city.selectedIndex !== 0 && formrdvalid && agree);
}

补充说明 #

• switch(true)是JS中用switch实现多条件分支的常用技巧，适配多条件并行判断的场景，和你原有if逻辑的执行效果完全一致
• 原有代码里最后!city || !radios的判断属于冗余逻辑：只要对应DOM节点存在，通过getElementById、getElementsByName获取的对象不会是空值，因此最终校验只需要判断四个校验项都通过即可
• 如果需要触发第一个错误就终止校验，直接在对应case分支里加return false即可实现

内容的提问来源于stack exchange，提问作者Mansi Satani