如何实现form表单序列化

这篇文章将为大家详细讲解有关如何实现形式表单序列化，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

形式的序列化，即将表单中的键值序列化为可提交的字符串

表单

formid='target '

selectname='age '

optionvalue='age1'20/option

选项值=“年龄2”选择21/选项

/select

inputname='name'value='Cynthia '

标签标签/标签

输入类型=' password '名称=' password '值=' 123456 '

输入类型='隐藏'名称=' salery '值=' 3333 '

textarename=' description ' cols=' 15 ' row=' 5 ' description/textarea

输入类型=“复选框”名称=“爱好”值=“足球”勾选足球

输入类型='复选框'名称='爱好'值='篮球'篮球

输入类型=' radio '名称=' sex '值='女主选中电子邮件

输入类型='收音机'名称='性'值='五月'五月

/来自方法一

functionserializeForm1(表单){ 0

varsetFormnb

sp;= ""; 
            for(var key in form){ 
                if(form.hasOwnProperty(key)){ 
                    setForm += '"'+form[key].name+'"'+':'+'"'+form[key].value + '"'+',';
                }
            }
            setForm = "{" + setForm.slice(0,setForm.length -1) + "}";
            console.log(setForm);
            // console.log(JSON.parse(setForm));
            return JSON.parse(setForm);
        }
        
        // 调用
        var oForm = document.getElementById('target');
        console.log(serializeForm3(oForm));

结果：

方法二

          function serializeForm2(form) {
            var parts = [];
            for (var i = 0, i1 = form.elements.length; i < i1; i++) {
                var field = form.elements[i];
                switch (field.type) {
                    case 'select-one':
                    case 'select-multiple':
                        if (field.type.length) {
                            for (var j = 0, j1 = field.options.length; j < j1; j++) {
                                var option = field.options[j];
                                if (option.selected) {
                                    var optionValue = '';
                                    if (option.hasAttribute('value') && option.attributes['value'].specified) {
                                        //specified表明是否有此属性，有的话返回true，若定义了此属性但尚未添加到元素中也返回true。
                                        optionValue = option.value;
                                    } else {
                                        optionValue = optionValue.text;
                                    }
                                    parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optionValue));
                                }
                            }
                        }
                        break;
                    case undefined:
                    case 'file':
                    case 'submit':
                    case 'reset':
                    case 'button':
                        break;
                    case 'radio':
                    case 'checkbox':
                        if(!field.checked){
                            break;
                        }else{
                            parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.dataset['index']));
                            break;
                        }
                    default:
                        if(field.name.length){
                            parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
                        }
                }
            }
            return parts.join('&');
        }
        
        // 调用
        var oForm = document.getElementById('target');
                console.log(serializeForm2(oForm));

结果：

方法三

        function serializeForm3(form){
            if(!form||form.tagName.toUpperCase()!='FORM'){
                return false;
            }
            var res=[];
            var tag,tagType,tagVal,tagName;
            for(var i=0;i<form.length;i++){
                tag=form[i];
                tagType=form[i].type;
                tagVal=form[i].value;
                tagName=form[i].name;  
                var reg1=/['textarea'|'text'|'passsword'|'label']/g;
                var reg2=/['radio'|'checkbox']/g;
                var reg3=/['select']/g;
                if(reg1.test(tagType)){
                    res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal));
                }else if(reg2.test(tagType)&&tag.checked){
                    res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal));   
                }else if(reg3.test(tagType)){
                    for(var j=0;j<tag.options.length;j++){
                        if(tag.options[j].selected){
                        res.push(encodeURIComponent(tagVal)+"="+encodeURIComponent(tag.options[j].value||tag.options[j].text));  
                        }
                    }
                }else{}
            }  
            return res.join(" & ");
        }
        
        // 调用
        var oForm = document.getElementById('target');
        console.log(serializeForm3(oForm));

结果：

关于“如何实现form表单序列化”这篇文章就分享到这里了，希望