微信小程序简单实现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 相关文章推荐
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
oracle资料库函式库
2006/10/09 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
javascript中 try catch用法
2015/08/16 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
python基础教程之序列详解
2014/08/29 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
校园招聘策划书
2014/01/09 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
铁路安全反思材料
2014/12/24 职场文书
简历自荐信范文
2015/03/09 职场文书
面试通知单大全
2015/04/20 职场文书
运动会主持人开幕词
2016/03/04 职场文书