微信小程序简单实现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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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 项目的方法
2007/01/02 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
php实现Mysql简易操作类
2015/10/11 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
python hash每次调用结果不同的原因
2019/11/21 Python
Java语言程序设计测试题改错题部分
2014/07/22 面试题
关于雷锋的演讲稿
2014/05/10 职场文书
倡议书的写法
2014/08/30 职场文书
客服专员岗位职责
2015/02/10 职场文书
2015年国培研修感言
2015/08/01 职场文书
全网非常详细的pytest配置文件
2022/07/15 Python