第8次课 - 表单组件与数据提交 - 微信小程序开发实战

1

教学目标

掌握常用表单组件的用法
理解表单验证的实现方式
掌握表单数据的收集与提交
能够实现完整的表单交互
案例：案例3-4 调查问卷

2

重点、难点与课时分配

◎

教学重点

表单组件、表单验证、数据提交

△

教学难点

表单验证逻辑、数据格式处理

课时分配（共 3 学时）

理论 1 学时

实践 2 学时

表单组件讲解 1 学时，案例 3-4 调查问卷实操 2 学时

3

课件要点

常用表单组件

input — 文本输入框(单行)

textarea — 多行文本输入

radio — 单选框(radio-group包裹)

checkbox — 复选框(checkbox-group包裹)

picker — 选择器(日期/时间/省市区/自定义)

switch — 开关选择器

表单数据收集

form组件: bindsubmit / bindreset

button formType="submit" 触发提交

e.detail.value 获取所有表单数据

需要给每个表单项设置name属性

input事件实时获取: bindinput + e.detail.value

表单验证

非空验证: 检查必填项是否为空

格式验证: 手机号/邮箱等正则匹配

长度验证: 最小/最大字符数限制

自定义验证: 根据业务规则校验

提示方式: wx.showToast / wx.showModal

案例3-4 调查问卷

使用input收集姓名和联系方式

使用radio实现单选题

使用checkbox实现多选题

使用textarea收集开放性回答

表单验证+数据提交完成调查问卷

4

代码示例与讲解

常用表单组件

                form-components.wxml
                表单组件一览
              
1<!-- input 输入框 -->
2<input type="text" placeholder="请输入姓名"
3  bindinput="onInput" value="{{name}}" />
4
5<!-- textarea 多行输入 -->
6<textarea placeholder="请输入备注" maxlength="200" />
7
8<!-- radio 单选 -->
9<radio-group bindchange="onRadioChange">
10  <label><radio value="male" checked="{{true}}"/>男</label>
11  <label><radio value="female"/>女</label>
12</radio-group>
13
14<!-- checkbox 多选 -->
15<checkbox-group bindchange="onCheckChange">
16  <label><checkbox value="read"/>阅读</label>
17  <label><checkbox value="sport"/>运动</label>
18  <label><checkbox value="music"/>音乐</label>
19</checkbox-group>
20
21<!-- picker 选择器 -->
22<picker mode="selector" range="{{cities}}"
23  bindchange="onCityChange">
24  当前选择：{{cities[index]}}
25</picker>
26
27<!-- switch 开关 -->
28<switch checked="{{isAgree}}" bindchange="onSwitch" />

小程序常用表单组件：input 单行输入框，支持 text/number/idcard 等类型；textarea 多行输入，可设 maxlength 限制字数；radio-group 单选组，同一组内只能选一个；checkbox-group 多选组，可同时选多个；picker 选择器，支持 selector/date/region 等模式；switch 开关，常用于协议勾选等场景。

表单数据收集

                form-submit.wxml
                表单提交效果
              
1<!-- 使用 form 统一收集数据 -->
2<form bindsubmit="onSubmit">
3<!-- 每个表单项必须有 name 属性 -->
4<view class="form-item">
5<text>姓名：</text>
6<input name="username" placeholder="请输入" />
7</view>
8
9<view class="form-item">
10<text>性别：</text>
11<radio-group name="gender">
12      <label><radio value="male"/>男</label>
13      <label><radio value="female"/>女</label>
14</radio-group>
15</view>
16
17<view class="form-item">
18<text>爱好：</text>
19<checkbox-group name="hobbies">
20      <label><checkbox value="read"/>阅读</label>
21      <label><checkbox value="sport"/>运动</label>
22</checkbox-group>
23</view>
24
25<!-- form-type="submit" 触发表单提交 -->
26<button form-type="submit">提交</button>
27<button form-type="reset">重置</button>
28</form>
29
30// JS 中获取表单数据
31onSubmit(e) {
32// e.detail.value 包含所有 name 属性的值
33const formData = e.detail.value
34console.log(formData)
35// { username: '张三', gender: 'male', hobbies: ['read'] }
36}

使用 form 组件的 bindsubmit 可以一次性收集所有表单数据。关键点是每个表单控件必须有 name 属性，提交时通过 e.detail.value 获取一个包含所有 name-value 的对象。radio-group 和 checkbox-group 的 name 放在 group 标签上，值分别是选中的 value 和 value 数组。按钮用 form-type="submit" 触发提交，form-type="reset" 触发重置。

表单验证

                validate.js
                表单验证效果
              
1// 表单验证工具函数
2const validateForm = (rules, data) => {
3  for (let field in rules) {
4    const rule = rules[field]
5    const value = data[field]
6
7// 必填验证
8if (rule.required && !value) {
9return { valid: false, msg: rule.message || `${field}不能为空` }
10    }
11
12// 长度验证
13if (rule.minLength && value.length < rule.minLength) {
14return { valid: false, msg: `最少${rule.minLength}个字符` }
15    }
16
17// 格式验证（正则）
18if (rule.pattern && !rule.pattern.test(value)) {
19return { valid: false, msg: rule.msg || '格式不正确' }
20    }
21  }
22return { valid: true }
23}
24
25// 使用示例
26onSubmit(e) {
27const formData = e.detail.value
28const rules = {
29    username: {
30      required: true, message: '请输入姓名'
31      minLength: 2
32    },
33    phone: {
34      required: true, message: '请输入手机号',
35      pattern: /^1[3-9]\d{9}$/, msg: '手机号格式错误'
36    }
37  }
38const result = validateForm(rules, formData)
39if (!result.valid) {
40wx.showToast({ title: result.msg, icon: 'none' })
41return
42  }
43// 验证通过，提交数据
44this.submitData(formData)
45}

表单验证是提交前必不可少的环节。常见验证类型：required 必填验证，检查值是否为空；minLength 长度验证，检查字符数；pattern 格式验证，用正则表达式校验手机号、邮箱等。验证不通过时，用 wx.showToast 提示用户错误信息，icon 设为 'none' 不显示图标。建议封装通用验证函数，通过规则配置对象来验证，提高代码复用性。

案例3-4调查问卷

                survey.wxml
                调查问卷页面
              
1<!-- 案例3-4：调查问卷 survey.wxml -->
2<form bindsubmit="onSubmit">
3<view class="form-item">
4<text>姓名：</text>
5<input name="name" placeholder="请输入姓名" />
6</view>
7
8<view class="form-item">
9<text>性别：</text>
10<radio-group name="gender">
11      <label><radio value="male"/>男</label>
12      <label><radio value="female"/>女</label>
13</radio-group>
14</view>
15
16<view class="form-item">
17<text>爱好：</text>
18<checkbox-group name="hobbies">
19      <label><checkbox value="coding"/>编程</label>
20      <label><checkbox value="reading"/>阅读</label>
21      <label><checkbox value="gaming"/>游戏</label>
22</checkbox-group>
23</view>
24
25<view class="form-item">
26<text>建议：</text>
27<textarea name="suggestion" placeholder="请输入建议" />
28</view>
29
30<button form-type="submit">提交问卷</button>
31</form>
32
33// survey.js
34Page({
35onSubmit(e) {
36const { name, gender, hobbies, suggestion } = e.detail.value
37if (!name || !gender) {
38wx.showToast({ title: '请填写完整', icon: 'none' })
39return
40    }
41console.log('提交数据：', e.detail.value)
42wx.showToast({ title: '提交成功' })
43  }
44})

案例3-4调查问卷综合运用了表单组件和数据提交。WXML 中用 form 包裹所有控件，每个控件设置 name 属性。JS 中 onSubmit 通过 e.detail.value 一次性获取所有表单数据，先做必填验证，不通过则 wx.showToast 提示，通过后提交数据并显示成功提示。这是表单开发的标准流程。

5

课件预览与下载