文章目录一.form表单二.checkbox-group的bindchange事件演示三.表单的提交和重置代码演示一.form表单

1.form表单，将组件内的用户输入的switchinputcheckboxsliderradiopicker提交。

2.当点击表单中form-type为submit的组件时，会将表单组件中的value值进行提交，需要在表单组件中加上name来作为key。

3.主要用到的属性为如下的两个:可与button配合使用,button有form-type的属性,用于表单的提交和重置事件

二.checkbox-group的bindchange事件演示

4.在wxml中代码如下

checkbox-groupbindchange="changed"checkboxvalue="中国"中国/checkboxcheckboxvalue="日本"disabled='true'日本/checkboxcheckboxvalue="美国"checked='true'color='red'美国/checkbox/checkbox-group

5.在js中的代码如下

changed:function(e){debugger;}

6.当在页面中,进行点击checkbox-group的多选框时,会进入debug模式如下图所示:在其右边的watch中,点击加号,输入e这个变量,可以观察其值.输入e.detail.value,可以观察选中的多选框的数组的值,可以看到是一个长度为2的数组

三.表单的提交和重置代码演示

7.在wxml中代码如下,整个代码使用form标签进行嵌套,使用bindsubmit属性,进行表单提交事件的绑定.使用bindreset属性,进行formReset表单重置的绑定.表单中,定义了两个checkbox-group,其中name分别为aa和bb,该name属性,用于指定表单提交的key值.并且在底部,定义了两个button,form-type属性分别指定为了submit和reset,用于表单的提交和重置.

formbindsubmit='formSubmit'bindreset='formReset'checkbox-groupname="aa"bindchange="changed"checkboxvalue="中国"中国/checkboxcheckboxvalue="日本"disabled='true'日本/checkboxcheckboxvalue="美国"checked='true'color='red'美国/checkbox/checkbox-groupcheckbox-groupname="bb"labelwx:for='{{array}}'wx:key="userInfoListId"checkboxid='{{item.id}}'value='{{item.name}}'checked='{{item.checked}}'color='{{item.color}}'disabled='{{item.disabled}}'/{{item.value}}/label/checkbox-groupbuttonform-type='submit'提交/buttonbuttonform-type='reset'重置/button/form

8.在js中的代码如下.主要是定义了formSubmit表单提交和formReset表单重置的函数

//pages/myform/myform.jsPage({/***页面的初始数据*/data:{array:[{id:"1001",name:"中国",value:"中国",checked:false,color:"red",disabled:false,sdf:"sdfsd"},{id:"1002",name:"日本",value:"日本",checked:true,color:"red",disabled:false,sdfsdf:"sfsdfd"},{id:"1003",name:"美国",value:"美国",checked:true,color:"red",disabled:false,sdf55sdf:"sdfsdfdf"}]},changed:function(e){},formSubmit:function(e){debugger;console.log("数据已经被提交了");},formReset:function(e){console.log("数据已经被重置了");}})

9.页面中显示如下当点击重置时,控制台打印如下:代表成功触发了表单重置的formReset函数并且所有选中的框,都会变成未选中的状态当在页面中,点击如下的按钮,当点击提交时,进入debug模式,可以看到在e.detail.value中,已经有两个数组了,第一个数组aa为第一个checkbox-group选中的值为美国.第二个数组bb为第二个checkbox-group选中的值为美国和日本.官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/form.html