百度智能小程序 表单

form 表单

解释：表单，将 form 组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。当点击<form/>表单中 form-type 为 submit 的<button/>组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key 。
Web 态说明：由于浏览器的限制，在 Web 态下部分系统信息无法获取，故暂不支持表单类、订阅类模板消息。

属性说明

report-type 有效值

report-type 为 subscribe 时，event.detail.formId 说明

1. 当 template-id 为 String 时（基础库 3.105.3 开始支持），event.detail 的 formId 为 String ，即此 template-id 所对应的的 formId 。举例如下：

   <form report-submit="true" report-type="subscribe" template-id="BD0001" subscribe-id="1234" bindsubmit="formSubmit">
       <button formType="submit" type="primary">template-id 为 String</button>
   </form>

   Page({
       formSubmit(e) {
           // 此时 formId 为 'BD0001-formId'（非真实数据）
           swan.showModal({
               title: 'template-id 为 string',
               content: e.detail.formId
           });
       }
   });

2. 当 template-id 为 Array 时（基础库 3.170.1 开始支持），event.detail 的 formId 为 Object ，其中对象的 key 为 template-id ，value 为其对应的 formId 。举例如下：

   <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1235" bindsubmit="formSubmit">
       <button formType="submit" type="primary">template-id 为 Array</button>
   </form>

   Page({
       data: {
           templateId: ['BD0001', 'BD0002']
       },
       formSubmit(e) {
           // 此时 formId 为 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}（非真实数据）
           swan.showModal({
               title: 'template-id 为 Array',
               content: JSON.stringify(e.detail.formId)
           });
       }
   });

如果 Array 中的 template-id 超过三个，返回的 formId 为空字符串，举例如下

<form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1236" bindsubmit="formSubmit">
    <button formType="submit" type="primary">template-id 超过三个</button>
</form>

Page({
    data: {
        templateId: ['BD0001', 'BD0002', 'BD0003', 'BD0004']
    },
    formSubmit(e) {
        // 此时 formId 为 ''
        swan.showModal({
            title: 'template-id 超过三个',
            content: e.detail.formId
        });
    }
});

如果 Array 中有重复的 template-id ，重复的 template-id 对应的 formId 只返回一次，举例如下：

<form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1237" bindsubmit="formSubmit">
    <button formType="submit" type="primary">有重复的 template-id</button>
</form>

Page({
    data: {
        templateId: ['BD0001', 'BD0001', 'BD0002']
    },
    formSubmit(e) {
        // 此时 formId 为 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}（非真实数据）
        swan.showModal({
            title: '有重复的 template-id',
            content: JSON.stringify(e.detail.formId)
        });
    }
});

注意：在提交 form 表单时，将会弹出模板消息授权弹窗，用户授权后才能在 event.detail 中获取被授权模板消息的 formId 。

report-type 为 subscribe 时，status 和 message 具体值

status 为 Number 类型，message 为 String 类型，当用户永久拒绝授权的时候，建议开发者不要再展示订阅消息授权面板入口。

示例 

在开发者工具中打开

代码示例：普通表单

<view class="wrap">
    <form bindsubmit="formSubmit"
        bindreset="formReset">
        <view class="card-area">
            <view class="top-description border-bottom">开关选择器</view>
            <view class="item-scroll">
                <text class="switch-text">开关</text>
                <switch></switch>
            </view>
        </view>
        <view class="card-area">
            <view class="top-description border-bottom">单项选择器</view>
            <radio-group name="radio-group">
                <radio class="block border-bottom" value="radio1">单选项一</radio>
                <radio class="block" value="radio2">单选项二</radio>
            </radio-group>
        </view>
        <view class="card-area">
            <view class="top-description border-bottom">多项选择器</view>
            <checkbox-group name="checkbox">
                <label class="block border-bottom">
                    <checkbox value="checkbox1">多选项一</checkbox>
                </label>
                <label class="block border-bottom">
                    <checkbox value="checkbox2">多选项二</checkbox>
                </label> 
                <label class="block">
                    <checkbox value="checkbox2">多选项三</checkbox>
                </label>
            </checkbox-group>
        </view>
        <view class="card-area">
            <view class="top-description border-bottom">滑块选择器</view>
            <slider class="slider" activeColor="#3388FF" block-size="20" name="slider"></slider>
        </view>
        <view class="card-area">
            <view class="top-description border-bottom">输入框</view>
            <input name="input" class="ipt" placeholder="请在此输入" />
        </view>
        <view class="card-area">
            <view class="top-description border-bottom">提交表单</view>
            <button formType="submit" type="primary">提交</button>
            <button formType="reset">清空</button>
        </view>
    </form>
</view>

Page({
    formSubmit(e) {
        console.log('form发生了submit事件，携带数据为：', e.detail.value);
        swan.showModal({
            content: '数据：' + JSON.stringify(e.detail.value),
            confirmText: '确定'
        });
    },
    formReset(e) {
        console.log('form表单发生了', e.type);
    }
});

参考示例

参考示例 1：模板类型表单 

在开发者工具中打开

<view class="wrap">
    <form 
        report-submit="{{true}}"
        report-type="subscribe"
        template-id="BD0003"
        subscribe-id="8026"
        bindsubmit="formSubmit"
        bindreset="formReset">
        <button formType="submit" type="primary">report-type为subscribe</button>
    </form>
</view>

<view class="wrap">
    <form 
        report-submit="{{true}}"
        report-type="default" 
        bindsubmit="formSubmit"
        bindreset="formReset">
        <button formType="submit" type="primary">report-type为default</button>
    </form>
</view>

Page({
    onLoad() {
        // 此组件需要在登录态下使用
        swan.login()
    },
    formSubmit(e) {
        swan.showModal({
            title: '表单数据',
            content: JSON.stringify(e.detail.message) + '/' +JSON.stringify(e.detail.status),
            confirmText: '确定',
            showCancel: false
        });  
    }
});