JS原生實現表單序列化

specialCoder發表於2019-02-16
JS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單序列化</title>
</head>
<body>
<fieldset>
<legend>表單</legend>
    <form>
    <div>
    MM:<input type="radio" name="name" value="mm"></br>
    GG:<input type="radio" name="name" value="gg"></br>
    </div>
    <div>
    ping<input type="checkbox" name="ping" value="ping">
    pang<input type="checkbox" name="pang" value="pang">
    qi<input type="checkbox" name="qiu" value="qiu"></br>
    </div>
    <div>
    <textarea rows="8" cols="15"></textarea></br>
    </div>
    <div>
    <select name="fruits">
        <option value="apple">apple</option>
        <option value="orange">orange</option>
        <option value="peach">peach</option>
    </select>
    </div>
    </form>
</fieldset>

    <script type="text/javascript">
    var form=document.forms[0];
    function serialize(form){
        var len=form.elements.length;//表單欄位長度;表單欄位包括<input><select><button>等
        var field=null;//用來儲存每一條表單欄位
        var parts=[];//儲存字串將要建立的各個部分
        var opLen,//select中option的個數
            opValue;//select中option的值
        //遍歷每一個表單欄位
        for(var i=0;i<len;i++){
            field=form.elements[i];
            /*檢測每一個表單欄位的型別，做出不同的處理：
            *1.最麻煩的就是select：它可能是單選框也可能是多選框，這裡的程式碼適合於這兩種框。在找到一個選中的項之後，需要確
            *定使用什麼值。如果不存在value特性或者雖然存在但是值為空字串，都要使用選項的文字來代替。為查這個屬性，在DOM兼
            *容的瀏覽器中使用hasAttribute()方法，在IE中需要使用特性的specified屬性。
            *2.表單中如果包括<fieldset>
            *元素，則該元素會出現在表單集合中但是沒有type屬性。因此，如果type屬性未定義，則不必對其進行序列化；同樣，對於
            *各種按鈕以及檔案輸入欄位都是如此。
            *3.對於單選按鈕和核取方塊，要檢查其checked屬性是否被設定為false,如果是則退出switch語句，如果checked屬性為true
            *則繼續進行default內容，即將當前的名稱和值進行編碼，然後新增到parts陣列中。函式的最後一步就是使用join格式化整
            *個字串，也就是用和好來分隔每一個表單欄位
            */
            switch(field.type){
                case"select-one":
                case"select-multiple":
                                if(field.name.length){
                                    for(var j=0,opLen=filed.options.length;j<opLen;j++){
                                        option=field.options[j];
                                        if(option.selected){
                                            opValue=``;
                                            if(option.hasAttribute){
                                                opValue=(option.hasAttribute(`value`)?option.value:option.text);
                                            }else{
                                                opValue=(option.hasAttribute[`value`].specified?option.value:option.text);//IE下
                                            }
                                            parts.push(encodeURIComponent(field.name)+`=`+encodeURIComponent(opValue);
                                        }

                                    }
                                }
                                break;
                case undefined:
                case"file":
                case"submit":
                case"reset":
                case"button":
                                break;
                case"radio":
                case"checkbox":
                    if(!field.checked){
                        break;
                    }
                default:
                    if(field.name.length){
                        parts.push(encodeURIComponent(field.name)+`=`+encodeURIComponent(opValue);

                    }
                                break;
            }
        }
        return parts.join("&");
    }
    </script>
</body>
</html>

相關文章