微信小程序简单实现form表单获取输入数据功能示例
更新时间:2017年11月30日 10:10:25 作者:FutrueJet
这篇文章主要介绍了微信小程序简单实现form表单获取输入数据功能,涉及微信小程序针对form表单的事件绑定及数据获取等相关操作技巧,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文实例讲述了微信小程序简单实现form表单获取输入数据功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
index.wxml
<form bindsubmit="formBindsubmit" bindreset="formReset"> <view style="display:flex;"> <label>用户名:</label> <input name="userName" placeholder="请输入用户名!" /> </view> <view style="display:flex;"> <label>密码:</label> <input name="psw" placeholder="请输入密码!" password="true" /> </view> <view style="display:flex;margin-top:30px;"> <button style="width:30%;" formType="submit" >登录</button> <button style="width:30%" formType="reset" >重置</button> </view> </form> <view>{{tip}}</view> <view>{{userName}}</view> <view>{{psw}}</view>
index.js
Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){ this.setData({ tip:'提示:用户名和密码不能为空!', userName:'', psw:'' }) }else{ this.setData({ tip:'', userName:'用户名:'+e.detail.value.userName, psw:'密码:'+e.detail.value.psw }) } }, formReset:function(){ this.setData({ tip:'', userName:'', psw:'' }) } })
3、完整实例代码点击此处本站下载。
希望本文所述对大家微信小程序开发有所帮助。
相关文章
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
本文给大家带来的是一款非常不错的富文本编辑器WangEditor,他最大的特点是它在ie6,7,8上都可以做到失去焦点后仍然可以在原位置插入图片,而且代码量很少,下面我们就来分析下他是如何实现的呢2015-05-05
最新评论