前言:form作为数据提交的重要控件,历来在前端设计中非常重要。微信给出了完整的form的例子。参考了一些微信设计的书籍,大多数都是copy 粘贴了例子的东西...。

其实微信的例子给的比较充分了:

源码连接:wechatide://minicode/6db9lcmu6VYt

 

tdesign在微信小程序中使用表单_tdesign在微信小程序中使用表单

https://developers.weixin.qq.com/miniprogram/dev/component/form.html?search-input=catchsubmit

form本身不是一个可见的控件,可以理解为,他是所有具备输入控件的一个数据管理器。

e


1 form的基本定义:

form

表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

from在数据库设计里面,就是一组将进行数据库访问的数据,在提交前大多数由前端先保存。

微信里面,对表单的定义很清晰,范围也显得比较狭隘,但是,可以满足一般应用。

上面这段定义,我们可以看到,支持form的组件有很多,基本上都是输入的组件:

1.1 属性

form有两个事件属性,用来对form内的数据来进行处理,

tdesign在微信小程序中使用表单_表单_02

在index.wxml里面对事件的handler进行了绑定,这里两个事件分别绑定了两个对应的响应函数。

tdesign在微信小程序中使用表单_控件_03

Page({
formSubmit: function (e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value) //注意,这里e.detail.value就是控件的各个数据。
},
formReset: function () {
console.log('form发生了reset事件')
}
})

还有一个属性是:

report-submit

这个属性我们知道,当我们在输入一个提交表单,比如,注册后,可以弹出一个信息框,这个就是给出的信息框的ID。

现在我们稍微展开讨论一下:

2 各个组件的数据定义

2.1 switch

例子给出的第一个框是switch

tdesign在微信小程序中使用表单_tdesign在微信小程序中使用表单_04

tdesign在微信小程序中使用表单_控件_05

我们在看一下switch的属性, 

这里,checked的属性value是可以拿出来的数据,

 

tdesign在微信小程序中使用表单_数据_06

2.2 input

input 组件比较复杂,和switch 不同,但是,他的value

tdesign在微信小程序中使用表单_数据_07

就是输入框的文本内容。 

tdesign在微信小程序中使用表单_表单_08

2.3 button 提交键的使用

tdesign在微信小程序中使用表单_数据_09

From的属性里面提到了,button的组件使用,作为表单提交的最后触发,所以,在设计页面的时候,一般form的事件的触发用button来做,查了一下其他组件,发现只有button有这个form-type的属性,也就是form必须由button组件来确认提交。

tdesign在微信小程序中使用表单_控件_10

formtype = submit ,表示这是一个submit 事件,然后,出发js里面定义的触发函数,见下一节:

 

tdesign在微信小程序中使用表单_tdesign在微信小程序中使用表单_11

 


3 数据的获取

From的属性里面提到了,button的组件使用,作为表单提交的最后触发,只有button有这个form-type的属性,也就是form必须由button组件来确认提交。所以,在设计页面的时候,一般form的事件的触发用button来做,formtype = submit ,表示这是一个submit 事件,然后,出发js里面定义的触发函数:

3.1 组件页面数据获取

from的获取,就是在页面的js页面文件逻辑里面的,响应函数里面的e的结构值。

目前看,e的结构是在设计页面的wxml文件时候,根据组件的属性值,自动生成的,

而e的内容就是组件当前用户的输入

tdesign在微信小程序中使用表单_tdesign在微信小程序中使用表单_12

e 的值拿到后,

可以通过自定义变量把数值存储下来,例如:

我们先改动input输入框的文字,然后,

tdesign在微信小程序中使用表单_控件_13

提交submit的时候,把e变量保留给本地变量

tdesign在微信小程序中使用表单_tdesign在微信小程序中使用表单_14

然后,打印看看,结果

tdesign在微信小程序中使用表单_控件_15


试验结果:

tdesign在微信小程序中使用表单_tdesign在微信小程序中使用表单_16

的提交数据结构为:

tdesign在微信小程序中使用表单_控件_17