微信小程序简单实现form表单获取输入数据功能示例       这篇文章主要介绍了微信小程序简单实现form表单获取输入数据功能,涉及微信小程序针对form表单的事件绑定及数据获取等相关操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序简单实现form表单获取输入数据功能。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

index.wxml

 form bindsubmit="formBindsubmit" bindreset="formReset" 
 view 
 label 用户名： /label 
 input name="userName" placeholder="请输入用户名！" / 
 /view 
 view 
 label 密码： /label 
 input name="凡科抠图w" placeholder="请输入密码！" password="true" / 
 /view 
 view 
 button formType="submit" 登录 /button 
 button formType="reset" 重置 /button 
 /view 
 /form 
 view {{tip}} /view 
 view {{userName}} /view 
 view {{凡科抠图w}} /view 

index.js

Page({
 data:{
 // text:"这是一个页面"
 tip:'',
 userName:'',
 凡科抠图w:''
 formBindsubmit:function(e){
 if(e.detail.value.userName.length==0||e.detail.value.凡科抠图w.length==0){
 this.setData({
 tip:'提示：用户名和密码不能为空！',
 userName:'',
 凡科抠图w:''
 }else{
 this.setData({
 tip:'',
 userName:'用户名：'+e.detail.value.userName,
 凡科抠图w:'密码：'+e.detail.value.凡科抠图w
 formReset:function(){
 this.setData({
 tip:'',
 userName:'',
 凡科抠图w:''

3、完整实例代码点击此处。

希望本文所述对大家微信小程序开发有所帮助。