自定义一个序列化表单的方法2+提示语

2019独角兽企业重金招聘Python工程师标准>>>

/** 自定义一个序列化表单的方法* */
    $.fn.serializeObject = function(a) {
    	var o = {};
        o.flag=false;
        var grounp=[];
    	if(a == 1){
    		$(this).find("input").each(function(index) {
	            if ($(this).attr("name") != undefined) {
	            	var _val = $(this).val().length;
		        	var must = $(this).data('must');
		        	var _tips = $(this).data('tip');
		        	var max = $(this).data('max');
	                if ($(this).attr("type") == "text" || $(this).attr("type") == "password" || $(this).attr("type") == "hidden") {
	                	$(this).siblings('.v_tips').remove();
	                	if(_val > max){ //超过有效长度
	                		$(this).after('<span class="v_tips" style="color:red;font-size:13px">'+_tips+'</span>');
	                		 o.flag=true;
	                	}
	                	if( must == 'true' && _val == 0){ //必填
	                		if(_tips != undefined){
	                			$(this).after('<span class="v_tips" style="color:red;font-size:13px">'+_tips+'</span');
	                			o.flag=true;
	                		}
	                	}else{
	                		o[$(this).attr("name")] = $(this).val();
	                	}
	                }
	                if ($(this).attr("type") == "radio") {
	                    if ($(this).is(":checked")) {
	                        o[$(this).attr("name")] = $(this).attr("value");
	                    }
	                }
	            }
	        });
    	}else if(a == 2){
    		var checkedIds = $(this).find("input[type='checkbox']");
    		var name = checkedIds[0].name;
    		var grounp = [];
	        if (checkedIds.length != 0) {
	            for (var i = 0; i < checkedIds.length; i++) {
	                if (checkedIds[i].checked == true) {
	                    grounp.push(checkedIds[i].value)
	                }
	            }
	        }
	        if(grounp.length == 0){
	        	o.flag=true;
	        }else{
	        	 o[name] = grounp;
	        }
    	}

        $(this).find("select").each(function(index) {
            if ($(this).attr("name") != undefined) {
                o[$(this).attr("name")] = $(this).val();
            }
        });

        $(this).find("textarea").each(function(index) {
            if ($(this).attr("name") != undefined) {
                $(this).siblings('.v_tips').remove();
                var _val = $(this).val().length;
                var must = $(this).data('must');
                var _tips = $(this).data('tip');
                var max = $(this).data('max');
                if(must == 'true'){
                    if(_val == 0 || _val > max){
                        $(this).after('<span class="v_tips" style="color:red;font-size:13px">'+_tips+'</span');
                        o.flag=true;
                    }else{
                        o[$(this).attr("name")] = $(this).val();
                    }
                }else{
                    if(_val > max){
                        $(this).after('<span class="v_tips" style="color:red;font-size:13px">'+_tips+'</span');
                        o.flag=true;
                    }else{
                        o[$(this).attr("name")] = $(this).val();
                    }
                }
            }
        });
        return o;
    };

    $(function(){
    	$(document).on('click','input[name="submit"]',function(){
    		var test = $('.textAndRadio').serializeObject(1); //text And  radio (type)
    		var checkbox = $('.checkboxRow').serializeObject(2); //checkbox
            var selectBox = $('.selectBox').serializeObject(); //select
            var textareaBox = $('.textareaBox').serializeObject(); //textarea
	    	if(test.flag || checkbox.flag || textareaBox.flag){ //为空时 checkbox.flag返回true
                console.log('不能为空');
	    		return;
	    	}else{
		    	delete test.flag; //删除父容器属性flag  （flag只做判断）
                var checked1 =checkbox.checked1; //获取checkbox中的checked1值
                test.checked1 = checked1; //test添加属性checked1 值为 checked1
		    	console.log(test);
                console.log(JSON.stringify(test));
	    	}
    	})

    })

html

<div class="rows textAndRadio">
        <input type="text" name="name1" value="22" data-must="false" data-tip="请输入正确文本" data-max="2" />
    </div>
    <div class="rows textAndRadio">
        <input type="text" name="name2" value="1" data-must="true" data-tip="请输入正确文本" data-max="2" />
    </div>
    <div class="rows textAndRadio">
        <input type="text" name="name3" value="" data-must="false" />
    </div>
    <div class="rows">
        <input type="radio" name="radio" value="1" checked="checked" data-must="true" data-tip="请输入正确文本" />
        <input type="radio" name="radio" value="0" data-must="true" data-tip="请输入正确文本" />
    </div>
    <div class="rows checkboxRow">
        <input type="checkbox" name="checked1" value="1" data-must="true" data-tip="请输入正确文本" />
        <input type="checkbox" name="checked1" value="0" data-must="true" data-tip="请输入正确文本" />
    </div>
    <div class="selectBox">
        <select name="select">
            <option value="1">11</option>
            <option value="2">11</option>
            <option value="3">11</option>
        </select>
    </div>
    <div class="textareaBox">
        <textarea name="textarea">13213</textarea>
    </div>
    <div class="textareaBox">
        <textarea name="textarea2" data-must="false" data-max="2" data-tip="请输入正确文本">2</textarea>
    </div>
    <input type="button" name="submit" value="提交">

 

转载于:https://my.oschina.net/newgoup/blog/753805