微信小程序简单实现form表单获取输入数据功能示例


Posted in Javascript onNovember 30, 2017

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

1、效果展示

微信小程序简单实现form表单获取输入数据功能示例

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、完整实例代码点击此处本站下载

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

Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
JavaScript confirm选择判断
Oct 18 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 #Javascript
vue的状态管理模式vuex
Nov 30 #Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 #Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 #Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 #Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 #Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 #jQuery
You might like
菜鸟学PHP之Smarty入门
2007/01/04 PHP
PHP ajax 分页类代码
2008/11/13 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
js重写方法的简单实现
2016/07/10 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
python实现给数组按片赋值的方法
2015/07/28 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
人事任命书格式
2014/06/05 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android