微信小程序简单实现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 相关文章推荐
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
js异常捕获方法介绍
Apr 10 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
编程语言JavaScript简介
Oct 16 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 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
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
一分钟理解js闭包
2016/05/04 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
智能电子应届生求职信
2013/11/10 职场文书
商场促销活动方案
2014/02/08 职场文书
运动会宣传稿100字
2015/07/23 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
MySQL 开窗函数
2022/02/15 MySQL