javascript表单行为效果展示

效果如下

　　

以上效果是在点击下一步的时候触发的效果显示

代码如下

////加工厂$(function() {    $("#planttwo").click(function () {

        var memberId = $.cookie('Himall-User');        if (memberId) {            var l = [getCount(),                        getJg(),                        getFalse('input[name="type0"]', 'span.ed0'),                        getFalse('input[name="type1"]', 'span.ed1'),                        getFalse('input[name="type3"]', 'span.ed3'),                        getFalse('input[name="type5"]', 'span.ed5')];

            if (getJg() && getCount() && getFalse('input[name="type0"]', 'span.ed0') && getFalse('input[name="type1"]', 'span.ed1') && getFalse('input[name="type3"]', 'span.ed3') && getFalse('input[name="type5"]', 'span.ed5')) {                var categoryId = $("#CategoryIds").val();                var categoryName = $("#CategoryName").val();                var fabric = $("#FabricCategory").val();                var minPrice = $("#MinPrice").val();                var maxPrice = $("#MaxPrice").val();                var processTypes = $("#ProcessTypes").val();                var processTypeInt = 1;                if (processTypes == "清加工") {                    processTypeInt = 2;                }                var quantity = $("#Quantity").val();                var deliveryDate = $("#years").val();                var IsUrgent = 0;                if ($("#IsUrgent").is(':checked')) {                    IsUrgent = 1;                }

                location.href = "/Home/PlantTwo?categoryId=" + categoryId + "&categoryName=" + categoryName + "&fabric=" + fabric + "&minPrice=" + minPrice + "&maxPrice=" + maxPrice + "&processTypes=" + processTypes + "&quantity=" + quantity + "&deliveryDate=" + deliveryDate + "&IsUrgent=" + IsUrgent + "&processTypeInt=" + processTypeInt + "";            }        }        else {            location.href = "/Login?returnUrl=%2FHome/Plant";        }

        });

        var move = $('div#chebox2>.c3right>span')        var hide = $('div#chebox2>.Fs')        move.hover(function () { hide.show() }, function () {            hide.hide()        });

});

        function getCount() {            //数量            var a1 = $('.t4 .combobox1');            var span1 = $('span.ed4')            if (a1.val() == '') {

                span1.html('不能为空').css({ 'color': 'red' });                return false;

            } else if (isNaN(a1.val())) {                span1.html('不能为空').css({ 'color': 'red' });

                a1.val('')                return false;

            } else if (a1.val() < 1) {                span1.html('不能为空').css({ 'color': 'red' });                return false;

            }else if(!(/(^[1-9]\d*$)/.test(a1.val()))){                span1.html('不能为空').css({ 'color': 'red' });                return false;

            }            else if (a1.val() > 0) {                span1.html('');            } else {;                span1.html('');            }            return true;

        }

        function getJg() {            //价格区间            var a1 = $('.combobox1:eq(0)')            var b1 = $('.combobox1:eq(1)')            var span = $('span.ed2')            if (a1.val() == '' || b1.val() == '') {

                span.html('不能为空').css({ 'color': 'red' });                return false;            }            else if (isNaN(a1.val()) || isNaN(b1.val())) {                span.html('不能为空').css({ 'color': 'red' });                a1.val('');                b1.val('');                return false;            }            else if (a1.val() < 1 || b1.val() < 1) {                span.html('不能为空').css({ 'color': 'red' });                return false;

            }            else if (a1.val() < b1.val()) {                span.html('')

            }            else if (a1.val() > b1.val()) {                span.html('不能为空').css({ 'color': 'red' });                return false;            }            else if (a1.val() == b1.val()) {                span.html('不能为空').css({ 'color': 'red' });                return false;            }            else {                span.html('');

            }            return true;

        }

        //其他情况下未选择或者未输入的数据时        function getFalse(a, b) {            var a = $(a)            var b = $(b)            var t = true            if (a.val() != '') {                b.html('');                return true;            } else {                b.html('不能为空').css({ 'color': 'red' })                return false;            }

        }

//$(function () {//            var move = $('div#chebox2>.c3right>span')//            var hide = $('div#chebox2>.Fs')//            move.hover(function () { hide.show() }, function () {//                hide.hide()//            })

//        })

    function getEvent(e) {        //事件冒泡        var event = e || window.event;        event.stopPropagation();    }    function getHide(s) {        //隐藏对应的标记        s.hide();    }

    $(function () {        var itemcommbox = $('.Pdemand>form>#type div.t1 input[name="type1"]')        var itemcomm = $('.itemcommbox')        itemcommbox.click(function (e) {

            getEvent(e);            itemcomm.show();

        });

        var itemcommU = $('.itemcommbox>.itemS>li');        itemcommU.on('click', function () {            var index = $(this).html();            itemcommbox.val(index);            itemcomm.hide();        });        $(document).click(function () {

            //            getHide($('.itemcommbox'))            getHide($('.item_C'))        });

    });

    //加工类型    $(function () {        var itemcommbox = $('.Pdemand>form>#type div.t21 input[name="type3"]')        var itemcomm = $('.iterF')        itemcommbox.click(function (e) {

            getEvent(e)            itemcomm.show();            itemcomm.each(function () {                $(this).height(this.scrollHeight)            });

        });

        var itemcommU = $('.iterF>.itemS>li');        itemcommU.on('click', function () {            var index = $(this).html();            itemcommbox.val(index);            itemcomm.hide();        });        $(document).click(function () {

            //            getHide($('.itemcommbox'))            getHide($('.iterF'))        });

    });

    $(function () {        var box = $('.Pdemand>form>#type div.t0 input[name="type0"]')        box.click(function (e) {            getEvent(e);            var cetegoryT = $('#cetegoryT')            cetegoryT.show();            var catsub = $('.cat-sub')            cetegoryT.mouseenter(function () {

                catsub.show();            });            catsub.mouseleave(function () {                //                catsub.hide();            });

        });        $(document).click(function () {

            //            getHide($('.itemcommbox'))            getHide($('.cT'))        });

    });

    /*选中之后，给父input*/    /*下拉选择*/    $(function () {        var box = $('.Pdemand>form>#type div.t0 input[name="type0"]')//总父名称        var cetegoryT = $('div.cT-Name')//父名称        var childpage = $('.childpage dl>dt>a')//子名称        cetegoryT.hover(function () {            var index = $(this).html();            childpage.click(function (e) {                var child = $(this).html();                var astring = index + '>' + child;                $("#CategoryIds").val($(this).attr("data-value-id"));                box.val(astring)                $('.cT').hide();                e.stopPropagation();                return false;            })

        });    });

    $(function () {        var cetegoryT = $('#cetegoryT>ul>li');        var childpage = $('.childpage');        cetegoryT.hover(function () {            $(this).addClass('scurrent').siblings().removeClass('scurrent')            var index = $(this).index();            childpage.hide();            $('.childpage:eq(' + index + ')').show();

        });    });