微信小程序开发教程-案例：获取注册表单控件的值-马育民老师

# 介绍

实际项目中，像 **注册表单**，会用到小程序几乎所有高频表单组件：输入框、单选框、复选框、下拉选择器、日期选择器，并且 **要获取这些组件的值**，本文实现该功能

### 包含组件清单

- input：手机号、昵称、密码、确认密码输入框
  
- radio：性别单选框（二选一）
  
- checkbox：兴趣爱好复选框（多选）
  
- picker：下拉选择器（学历选择）
  
- date picker：日期选择器（出生日期）
  
- button：表单提交按钮

# register.wxml 页面代码

```xml

<view class="register-box">
  <input placeholder="请输入昵称" model:value="{{nickname}}"/>
  <input placeholder="请输入手机号" type="number" model:value="{{phone}}"/>
  <input placeholder="请输入密码" password model:value="{{pwd}}"/>
  <input placeholder="请再次输入密码" password model:value="{{repwd}}"/>
  <view>选择性别</view>
  <radio-group model:value="{{gender}}">
    <radio value="男">男</radio>
    <radio value="女">女</radio>
  </radio-group>
  <view>选择爱好</view>
  <checkbox-group model:value="{{hobby}}">
    <checkbox value="游戏">游戏</checkbox>
    <checkbox value="阅读">阅读</checkbox>
    <checkbox value="运动">运动</checkbox>
    <checkbox value="音乐">音乐</checkbox>
  </checkbox-group>
  <view>最高学历</view>
  <picker range="{{eduList}}" model:value="{{eduIndex}}">
    <view>{{eduList[eduIndex] || '请选择学历'}}</view>
  </picker>
  <view>出生日期</view>
  <picker mode="date" model:value="{{birthDate}}">
    <view>{{birthDate || '请选择出生日期'}}</view>
  </picker>
  
  <button type="primary" bind:tap="submitForm">提交注册</button>
</view>
```

### 代码关键说明

- 手机号input添加 `type="number"`：唤起数字键盘，限制只能输入数字
  
- radio\-group/checkbox\-group：单选、多选必须给外层分组标签绑定双向绑定，而非单个单选/多选框
  
- 普通下拉picker：双向绑定索引值，通过索引匹配数组拿到对应文本
  
- 日期picker：mode="date" 指定为日期选择，直接双向绑定选中日期字符串

# register.wxss 样式代码

样式代码只是为了让控件看得更清楚，不用过多关注

```
page{
  font-size: 38rpx;
  background-color: #eee;
  padding-top: 50rpx;
}
.register-box{
  margin: 0 30rpx;
}

input{
  height: 90rpx;
  font-size: 40rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
}

radio-group,checkbox-group,picker{
  margin-bottom: 40rpx;

}
button{
  margin-top: 80rpx;
}
```

# register.js 逻辑代码

data中初始化所有表单变量，包含字符串、数组、数字多种数据类型；提交方法中直接打印全部表单数据，无需额外监听任何组件变化。

```javascript
// pages/register/register.js
Page({
  /**
   * 页面初始数据：统一存放所有表单字段
   * 匹配wxml中所有双向绑定变量
   */
  data: {
    // 输入框字段：字符串类型
    nickname: "",
    phone: "",
    pwd: "",
    repwd: "",
    // 单选框字段：字符串类型（只能选一个）
    gender: "",
    // 复选框字段：数组类型（可以多选，返回选中value数组）
    hobby: [],
    // 下拉选择器：选项数组 + 选中索引
    eduList: ["高中", "专科", "本科", "硕士", "博士"],
    eduIndex: -1,
    // 日期选择器：日期字符串
    birthDate: ""
  },
  /**
   * 表单提交事件：核心方法
   * 无需监听任何组件变化，直接读取this.data获取全部表单数据
   */
  submitForm() {
    // 一次性获取所有表单填写内容
    const formData = this.data
    console.log("===== 完整注册表单数据 =====")
    console.log("表单全部数据：", formData)
    console.log("昵称：", formData.nickname)
    console.log("手机号：", formData.phone)
    console.log("性别：", formData.gender)
    console.log("选中爱好：", formData.hobby)
    console.log("学历索引：", formData.eduIndex, "学历文本：", this.data.eduList[formData.eduIndex])
    console.log("出生日期：", formData.birthDate)
    // 后续可拓展：表单非空校验、密码一致性校验、后端接口提交
  }
})
```

---

# 运行测试效果

### 页面操作

1. 依次填写昵称、手机号、密码
  
2. 选择性别、勾选多个爱好
  
3. 下拉选择学历、选择出生日期
  
4. 点击【提交注册】按钮

### 控制台输出示例

```plain
===== 完整注册表单数据 =====
表单全部数据： {
  nickname: "李雷",
  phone: "13800138000",
  pwd: "123456",
  repwd: "123456",
  gender: "男",
  hobby: ["游戏","运动"],
  eduIndex: 2,
  birthDate: "2000-01-01"
}
昵称： 前端小白
手机号： 13800138000
性别： 男
选中爱好： ["游戏","运动"]
学历索引： 2 学历文本： 本科
出生日期： 2000-01-01
```

---

# 总结

| 表单组件 | 绑定标签 | 返回数据类型 | 取值说明 |
| --- | --- | --- | --- |
| input输入框 | input | String 字符串 | 直接返回输入的文本内容 |
| radio单选框 | radio\-group | String 字符串 | 返回选中单选框的value值，单选唯一 |
| checkbox复选框 | checkbox\-group | Array 数组 | 返回所有选中项的value组成的数组 |
| 普通下拉picker | picker | Number 数字 | 返回选中项索引，需要搭配数组获取文本 |
| 日期picker | picker mode="date" | String 日期字符串 | 直接返回 yyyy\-MM\-dd 格式日期 |

---

# 避坑

1. **单选/复选框绑定位置错误**：双向绑定必须写在group父标签，写在单个radio/checkbox上无法取值
  
2. **复选框数据类型错误**：data中爱好必须初始化为空数组\[\]，不能写空字符串""，否则多选取值报错
  
3. **picker下拉取值误区**：普通picker只能拿到索引，不能直接拿到文本，需要通过索引匹配原数组
  
4. **变量名大小写**：小程序双向绑定严格区分大小写，wxml和js变量名必须完全一致

---

# 表单校验

拿到全部表单数据后，可直接在submitForm方法内添加前端校验，无需修改原有取值代码：

```javascript
// 简单非空校验示例
if(!this.data.nickname){
  wx.showToast({title:'请输入昵称',icon:'none'})
  return
}
if(this.data.pwd !== this.data.repwd){
  wx.showToast({title:'两次密码不一致',icon:'none'})
  return
}
```

原文出处：/show_1GW3XMrO0OHo.html