小程序 —— 提交表单清除数据功能的实现
来源:互联网 发布:java转义字符 编辑:程序博客网 时间:2024/06/04 18:01
前言
想必许多学习过网页前端的同学都曾经在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"><!-- model类别和商店类别--> </picker> </view> <view class="btn-area"> <button formType="reset" bindtap="formSubmit" class="submit">注册</button> <button formType="reset" class="reset">Reset</button> </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方法中将这个数据块传递给后台。
不过还是要注意的一点是在传递数据到后台前先对数据进行预处理!确保数据不为空且数据格式符合规定。
阅读全文
0 0
- 小程序 —— 提交表单清除数据功能的实现
- Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据
- Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据实例
- 小程序表单提交
- 关于提交表单的HTML小程序
- 小程序form表单提交
- 小程序提交form表单
- nodejs实现表单数据的提交
- 用ajax提交表单数据时的小细节
- Html:小技巧:自动提交表单的实现方法
- yii 表单提交数据的方式——总结
- 小程序提交表单发送模板消息
- 使用代码实现Android的清除数据的功能
- jsp表单提交验证码功能实现
- angular表单验证及 提交功能实现
- 编程实现网页表单数据的自动提交
- 编程实现网页表单数据的自动提交
- Delphi实现网页表单数据的自动提交
- BrokenLED HDU
- iOS 如何巧妙解决“一个任务需要等待另外一个任务完成后才可以执行”的问题
- Bootstrap : 栅格
- eclipse中项目出现的红叉问题
- 数据结构之排序_java实现篇
- 小程序 —— 提交表单清除数据功能的实现
- IntelliJ Idea 2017 免费激活方法
- git .gitignore 不起作用的问题
- js复习笔记day3
- 打怪兽
- XManager使用说明
- 使用poi导出excel后,关于出现#NAME? 的问题,已解决
- Network(Kruskal)
- 希尔排序的Java实现、性能分析以及适用场景