Explication détaillée du didacticiel sur les formulaires sérialisés

Cet article présente principalement l'opération de sérialisation du formulaire. En sérialisant les valeurs clés du formulaire dans une chaîne pouvant être soumise et en joignant un exemple de code pour expliquer les résultats en détail après l'opération, les amis dans le besoin peuvent se référer au suivant la

Sérialisation du formulaire, c'est-à-dire la sérialisation des valeurs clés du formulaire en une chaîne pouvant être soumise

formulaire

 <form id="target">
  <select name="age">
   <option value="age1">20</option>
   <option value="age2" selected>21</option>
  </select>
  <input name="name" value="Cynthia">
  <label>passsword</label>
  <input type="password" name="password" value="123456">
  <input type="hidden" name="salery" value="3333">
  <textarea name="description" cols="15" rows="5">description</textarea>
  <input type="checkbox" name="hobby" value="football" checked> Football
  <input type="checkbox" name="hobby" value="basketball"> Basketball
  <input type="radio" name="sex" value="Female" checked> Female
  <input type="radio" name="sex" value="Male"> Male
 </form>

Méthode 1

function serializeForm1(form){ 
   var setForm = ""; 
   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));

Résultat :

Méthode 2

 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 &#39;select-one&#39;:
     case &#39;select-multiple&#39;:
      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 = &#39;&#39;;
         if (option.hasAttribute(&#39;value&#39;) && option.attributes[&#39;value&#39;].specified) {
          //specified表明是否有此属性，有的话返回true，若定义了此属性但尚未添加到元素中也返回true。
          optionValue = option.value;
         } else {
          optionValue = optionValue.text;
         }
         parts.push(encodeURIComponent(field.name) + &#39;=&#39; + encodeURIComponent(optionValue));
        }
       }
      }
      break;
     case undefined:
     case &#39;file&#39;:
     case &#39;submit&#39;:
     case &#39;reset&#39;:
     case &#39;button&#39;:
      break;
     case &#39;radio&#39;:
     case &#39;checkbox&#39;:
      if(!field.checked){
       break;
      }else{
       parts.push(encodeURIComponent(field.name) + &#39;=&#39; + encodeURIComponent(field.dataset[&#39;index&#39;]));
       break;
      }
     default:
      if(field.name.length){
       parts.push(encodeURIComponent(field.name) + &#39;=&#39; + encodeURIComponent(field.value));
      }
    }
   }
   return parts.join(&#39;&&#39;);
  }
   
  // 调用
  var oForm = document.getElementById(&#39;target&#39;);
    console.log(serializeForm2(oForm));

Résultat :

Méthode 3

 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=/[&#39;textarea&#39;|&#39;text&#39;|&#39;passsword&#39;|&#39;label&#39;]/g;
    var reg2=/[&#39;radio&#39;|&#39;checkbox&#39;]/g;
    var reg3=/[&#39;select&#39;]/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(&#39;target&#39;);
  console.log(serializeForm3(oForm));

Résultat :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!