小程序 —— 提交表单清除数据功能的实现

前言

想必许多学习过网页前端的同学都曾经在html中实现过提交表单后自动清除表单数据的功能，然而这在我们小程序开发过程中却是一个比较难的事情了。这里就记录一个模拟此功能的方法，供大家参考。

实现方法

首先wxml代码如下：

<form bindreset="formReset">

   

   <view class="main-register">
      <input name="creator" data-name="creator" placeholder="店主..." bindblur="getCurrentData" />   
      <input name="title" data-name="title" placeholder="请输入商店名称..."  bindblur="getCurrentData" />
      <textarea name="descript" data-name="description" placeholder="请输入描述..."  bindblur="getCurrentData"  />
      <input name="contact" data-name="phone" placeholder="联系方式..."  bindblur="getCurrentData" />
      <input name="location" data-name="location" placeholder="地址..." bindblur="getCurrentData"  />
      <picker name="类别" data-name="shop_type">

      picker>
   view>

  <view class="btn-area">
    <button formType="reset" bindtap="formSubmit" class="submit">注册button>
    <button formType="reset" class="reset">Resetbutton>
  view>
form>

显然我们注意到表单中没有了submit按钮，取而代之的是两个reset按钮，并且表单也只是绑定了formReset事件。这也就意味着我们将不能直接使用form表单为我们提供的submit方法中的 e.detail.value提交数据。也就是说我们为了实现提交表单后自动清除表单数据这个功能而丢失了一个比较方便的提交数据的方法。这也算是有得有失吧。
但是，方法总是比困难要多的。
于是我们可以接下来实现手动提交表单数据的功能，这一步其实也比较简单，主要看数据多不多复不复杂了。
下面上代码：

//表单中的所有数据
data: { 
    register:{
      creator:"",
      title:"",
      description:"",
      phone:"",
      location:"",
      shop_type:"",
      model_type:""
    }
  },
  getCurrentData:function(event){
     console.log(event.detail.value);
     var name = event.target.dataset.name;
     this.data.register[name]=event.detail.value;
     this.setData({
       register:this.data.register
     })

     console.log(this.data)
  },

从上面我们可以知道主要是实现了一个失焦的方法（在wxml中绑定的），用于获取表单的数据。这里有一个技巧，就是把属性名放在了dataset集合中，所以我们在调用失焦事件时首先会获取这个属性名，然后将属性值插入到数据块中对应的属性名里面去，于是一个实现一个方法便可全部受用咯。最后，我们就可以在formReset方法中将这个数据块传递给后台。
不过还是要注意的一点是在传递数据到后台前先对数据进行预处理！确保数据不为空且数据格式符合规定。