微信小程序简单实现form表单获取输入数据功能示例
本文实例讲述了微信小程序简单实现form表单获取输入数据功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
index.wxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
< 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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、完整实例代码点击此处本站下载。
希望本文所述对大家微信小程序开发有所帮助。
https://www.jb51.net/article/129431.htm