微信小程序简单实现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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
js正确获取元素样式详解
Aug 07 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
JavaScript实现音乐播放器
Aug 14 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编码转换
2012/11/05 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
很棒的vue弹窗组件
2017/05/24 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
python 如何对logging日志封装
2020/12/02 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
采购部主管岗位职责
2014/01/01 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
校园活动宣传方案
2014/03/28 职场文书
小学生作文评语
2014/04/18 职场文书
环境日宣传活动总结
2014/07/09 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
公司行政管理制度范本
2015/08/05 职场文书
中学校园广播稿
2015/08/18 职场文书