求大神封装一下我的代码，最好能加上其他表单元素一起

悬赏园豆：100 [已解决问题] 解决于 2017-07-05 15:20

<body>
        <ul>
            <li class="li_show">项目基本信息</li>
            <li>项目单位信息</li>
            <li>项目其他信息</li>
        </ul>
        <button id="btnNext" class="btn">下一步</button>
        <button id="btnSave" class="btn">保存</button>
        <div class="pan">
            <div class="tbs show">
                <span>项目名称</span><input type="text" name="" id="" value="" />
                <span>所在城镇名称</span><input type="" /><t>*</t>
            </div>
            <div class="tbs">
                <span>项目单位名称</span><input type="text" name="" id="" value="" />
                <span>股权结构</span><input type="text" />
            </div>
            <div class="tbs">
                <span>项目其他信息</span><input type="text" name="" id="" value="" />
                <span>项目资金构成</span><input type="text" />
            </div>
        </div>
 </body>

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                width: 100%;
                height: 120px;
            }
            li {
                float: left;
                width: 100px;
                height: 100px;
                background: red;
                margin: 10px;
                list-style: none;
            }
            div.pan{
                width: 100%;
                height: 120px;
                float: left;
            }
            div.tbs {
                width: 1000px;
                height: 100px;
                float: left;
                background: yellow;
                margin: 10px;
                display: none;
            }
            
            li.li_show {
                background: yellow;
            }
            
            div.show {
                display: block;
            }
            .btn{
                float: left;
                margin: 10px;
                width: 200px;
                height: 60px;
                
            }

 </style>

<script type="text/javascript">
    $(function() {
        $("li").click(function() {
            var i = $(this).index();
            $("li").eq(i).addClass("li_show").siblings().removeClass();
            $("div.tbs").eq(i).show().siblings().hide();
        });
        $("#btnNext").click(function(){
                    var i=$("li.li_show").index();
                    var j=i+1;
                    $("li").eq(j).addClass("li_show").siblings().removeClass();
                    $("div.tbs").eq(j).show().siblings().hide();
        });
        $("#btnSave").click(function(){
                 var ele=$("input");
                 if(ele[0].value==""){
                 var msg=$(ele[0]).prev()[0].innerHTML;
                 alert("请填写 "+msg+"！");
                 var i=0;
                 $("li").eq(i).addClass("li_show").siblings().removeClass();
                        $("div.tbs").eq(i).show().siblings().hide();
                        $(ele[0]).focus();
                 }else if(ele[1].value==""){
                      var msg=$(ele[1]).prev()[0].innerHTML;
                      alert("请填写 "+msg+"！");
                      var i=0;
                      $("li").eq(i).addClass("li_show").siblings().removeClass();
                      $("div.tbs").eq(i).show().siblings().hide();
                      $(ele[1]).focus();
                    }
                    else if(ele[2].value==""){
                        var msg=$(ele[2]).prev()[0].innerHTML;
                        alert("请填写 "+msg+"！");
                        var i=1;
                      $("li").eq(i).addClass("li_show").siblings().removeClass();
                        $("div.tbs").eq(i).show().siblings().hide();
                        $(ele[2]).focus();
                    }
                    else if(ele[3].value==""){
                        var msg=$(ele[3]).prev()[0].innerHTML;
                        alert("请填写 "+msg+"！");
                        var i=1;
                      $("li").eq(i).addClass("li_show").siblings().removeClass();
                        $("div.tbs").eq(i).show().siblings().hide();
                        $(ele[3]).focus();
                    }
                    else if(ele[4].value==""){
                        var msg=$(ele[4]).prev()[0].innerHTML;
                        alert("请填写 "+msg+"！");
                        var i=2;
                      $("li").eq(i).addClass("li_show").siblings().removeClass();
                        $("div.tbs").eq(i).show().siblings().hide();
                        $(ele[4]).focus();
                    }
                    else if(ele[5].value==""){
                        var msg=$(ele[5]).prev()[0].innerHTML;
                        alert("请填写 "+msg+"！");
                        var i=2;
                      $("li").eq(i).addClass("li_show").siblings().removeClass();
                        $("div.tbs").eq(i).show().siblings().hide();
                        $(ele[5]).focus();
                    }else{
                        alert("保存成功！");
                    }
                    
                                        
                })
            })
            
        </script>

问题补充：

类似于这样的 

function CheckInfo() {
        //alert($("span[innerHTML=*]").length);
        //只能用在文本框和下拉框的判定上面
        var isok = true;
        $("tt").parent().find("input[type=text],select,textarea,input[type=radio],input[type=checkbox]").each(function(i) {
            var msg;
            if ($(this).is("input[type=radio]")) {
                if (!$("input[id^=" + $(this).attr("name") + "]:checked").val()) isok = false;
                var s = $.trim($(this).parent().prev().text()).replace(":", "").replace("：", "");
                if (!s) s = $.trim($(this).parent().parent().prev().text()).replace(":", "").replace("：", "");
                msg = "请选择 " + s + "！";
            }
            else if ($(this).is("input[type=checkbox]")) {
                if ($(":checkbox[id^=" + $(this).attr("name").replace("$0", "") + "]").attr("id")) {
                    if ($("input:checkbox[id^=" + $(this).attr("name").replace("$0", "") + "]:checked").length == 0) isok = false;
                    var s = $.trim($(this).parent().prev().text()).replace(":", "").replace("：", "");
                    if (!s) s = $.trim($(this).parent().parent().prev().text()).replace(":", "").replace("：", "");
                    msg = "请至少选择一个 " + s + "！";
                }
            }
            else if ($(this).is("input") || $(this).is("textarea")) {//如果是input控件
                if (!$.trim($(this).val())) isok = false;
                msg = "请填写 " + $.trim($(this).parent().prev().text()).replace(":", "").replace("：", "") + "！";               
            }
            else {//如果是select控件
                if (!$.trim($(this).val())) isok = false;
                msg = "请选择 " + $.trim($(this).parent().prev().text()).replace(":", "").replace("：", "") + "！";
            }
            if (!isok) {
                if ($(this).is("input") || $(this).is("textarea"))//应对日期控件未填时会赋值到按钮上。
                    $(this).select();
                else
                    $(this).focus();
                alert(msg);
                return false;
            }
        });

        if (!isok) {
            return false;
        }
        //其余的判定条件
        

        return true;
    }

魔兽IT | 初学一级 | 园豆：118
提问于：2017-07-05 11:16

< >

最佳答案

改了下，没有测试：

$("#btnSave").on("click",function(e){
    var eles=$("input");
    var elesLength=eles.length;
    var ulTab=$(".li_show").parent();    

    for(var i=0;i<elesLength;i++){
        var item= $(eles[i]);
        if(item.val()==""){
            item.parent().parent().find(".tbs").removeClass("show");
            item.parent().addClass("show");

            ulTab.find("li").removeClass("li_show");
            var s_index= item.parent().index();            
            ulTab.find("li").eq(s_index).addClass("li_show");

            alert("请填写"+item.prev().text());
            item.focus();
            
            break;
        }
    }
});

收获园豆：100

JimJiang | 菜鸟二级 |园豆：314 | 2017-07-05 13:34

@魔兽IT男:
你加入标记下就行了啊。

$("#btnSave").on("click", function(e) {
    var eles = $("input");
    var elesLength = eles.length;
    var ulTab = $(".li_show").parent();
    var divTab = $("div.tbs");
    var alerted=false;//
    for (var i = 0; i < elesLength; i++) {
        var item = $(eles[i]);
        if (item.val() == "") {
            item.parent().parent().find(".tbs").removeClass("show");
            item.parent().addClass("show");
            ulTab.find("li").removeClass("li_show");
            var s_index = item.parent().index();
            ulTab.find("li").eq(s_index).addClass("li_show");
            divTab.eq(s_index).show().siblings().hide();
            alert("请填写" + item.prev().text());
            alerted=true;
            item.focus();
            break;
        }
    }
    //...
    if (!alerted) {
        alert("保存成功！");
    }
});

JimJiang | 园豆：314 (菜鸟二级) | 2017-07-05 14:58

测试结果：

1、少了一行代码：$("div.tbs").eq(s_index).addClass("li_show");

2、if(eles.val() != ""){alert("保存成功！");}这段代码加到哪里呢？

魔兽IT | 园豆：118 (初学一级) | 2017-07-05 14:59

@JimJiang: 我的思路，可能语法上没有你的那么标准到位6^6

$("#btnSave").click(function() {
var ele = $("input");
for(var i = 0, len = ele.length; i < len; i++) {
if(ele[i].value == "") {
if(i < 2) {
checkInfo(i, 0);
return;
} else if(i >= 2 && i < 4) {
checkInfo(i, 1);
return;
} else if(i >= 4 && i < 6) {
checkInfo(i, 2);
return;
}
}
}
if(ele.value != "") {
alert("保存成功！");
}
})
//提示+跳转+获取焦点
function checkInfo(m, n) {
var ele = $("input");
var msg = $(ele[m]).prev()[0].innerHTML;
alert("请填写 " + msg + "！");
$("li").eq(n).addClass("li_show").siblings().removeClass();
$("div.tbs").eq(n).show().siblings().hide();
$(ele[m]).focus();
}

魔兽IT | 园豆：118 (初学一级) | 2017-07-05 15:08

@魔兽IT男: for循环之前的一句已经对它声明初始化了啊

var alerted=false;//
for (var i = 0; i < elesLength; i++) {

JimJiang | 园豆：314 (菜鸟二级) | 2017-07-05 15:16

@JimJiang: 解决了！O(∩_∩)O谢谢啦

魔兽IT | 园豆：118 (初学一级) | 2017-07-05 15:17

其他回答(2)

这一段连续的ifelse令人感到绝望.百度jq validate

吴瑞祥 | 园豆：29449 (高人七级) | 2017-07-05 11:22

主要是验证完了需要跳转到对应的div里，加上了tab切换，实际项目中有很多表单要填写，所以需要封装！

还有一些其他验证，比这个还要复杂

支持(0) 反对(0) 魔兽IT | 园豆：118 (初学一级) | 2017-07-05 11:28

@魔兽IT男: 复杂ui交互的话.你需要mvvm.人总要进步嘛.开始大家都是这么写的.

然后学习一些方法改进.至于你说的封装.你这种代码没什么可以封装的.

结构要重新设计才行.

支持(0) 反对(0) 吴瑞祥 | 园豆：29449 (高人七级) | 2017-07-05 11:30

真要命~

可以把if里面的代码单独写个function，然后传参数调用，代码量会少很多

balahoho | 园豆：2050 (老鸟四级) | 2017-07-05 11:40

如果有几十个if呢？不根本解决问题啊，我想要一个类似于

function CheckInfo() {
        //alert($("span[innerHTML=*]").length);
        //只能用在文本框和下拉框的判定上面
        var isok = true;
        $("tt").parent().find("input[type=text],select,textarea,input[type=radio],input[type=checkbox]").each(function(i) {
            var msg;
            if ($(this).is("input[type=radio]")) {
                if (!$("input[id^=" + $(this).attr("name") + "]:checked").val()) isok = false;
                var s = $.trim($(this).parent().prev().text()).replace(":", "").replace("：", "");
                if (!s) s = $.trim($(this).parent().parent().prev().text()).replace(":", "").replace("：", "");
                msg = "请选择 " + s + "！";
            }
            else if ($(this).is("input[type=checkbox]")) {
                if ($(":checkbox[id^=" + $(this).attr("name").replace("$0", "") + "]").attr("id")) {
                    if ($("input:checkbox[id^=" + $(this).attr("name").replace("$0", "") + "]:checked").length == 0) isok = false;
                    var s = $.trim($(this).parent().prev().text()).replace(":", "").replace("：", "");
                    if (!s) s = $.trim($(this).parent().parent().prev().text()).replace(":", "").replace("：", "");
                    msg = "请至少选择一个 " + s + "！";
                }
            }
            else if ($(this).is("input") || $(this).is("textarea")) {//如果是input控件
                if (!$.trim($(this).val())) isok = false;
                msg = "请填写 " + $.trim($(this).parent().prev().text()).replace(":", "").replace("：", "") + "！";               
            }
            else {//如果是select控件
                if (!$.trim($(this).val())) isok = false;
                msg = "请选择 " + $.trim($(this).parent().prev().text()).replace(":", "").replace("：", "") + "！";
            }
            if (!isok) {
                if ($(this).is("input") || $(this).is("textarea"))//应对日期控件未填时会赋值到按钮上。
                    $(this).select();
                else
                    $(this).focus();
                alert(msg);
                return false;
            }
        });

        if (!isok) {
            return false;
        }
        //其余的判定条件
        

        return true;
    }

支持(0) 反对(0) 魔兽IT | 园豆：118 (初学一级) | 2017-07-05 13:39

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

求大神封装一下我的代码，最好能加上其他表单元素一起

欢迎，请先登录或者注册。