小程序表单数据获取

【表单文档地址】

1. 前提

小程序自带的双向绑定属性功能简单，一般不使用。
但是日常开发者有获取表单数据的需求，这里使用form表单获取。

2. form

将组件内的用户输入的switch input checkbox slider radio picker 提交。

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

3. 步骤

1. 需要有一个表单元素，并且给该元素设置name属性

   <input type="text" name="userName" />

2. 用form组件把表单元素包裹起来

   <form>
      <input type="text" name="userName" />
   </form>

3. 在form组件内添加button按钮，并且加上form-type属性 结果为 submit

   <form >
      <input type="text" name="userName" />
      <button form-type="submit">
        点击获取表单数据
      </button>
   </form>

4. 获取表单数据 触发form表单提供的bindsubmit

   <form bindsubmit="getFormValue">
      <input type="text" name="userName" />
      <button form-type="submit">
        点击获取表单数据
      </button>
   </form>

   getFormValue(val) {
    console.log(val.detail.value)
   },

   

   
   同时，可以发现获取的表单数据是对象，而写在表单上的属性作为对象的属性

4. 设计稿相关

5. 用户id

“88f097b505604d1496e97d59acafa749”

6. 接口传递的参数

/**
 * 申请试听课的参数
 * id: 用户id必填
 * name: 姓名
 * age: 年龄
 * sex: 性别 (0:男 1:女)
 * tel: 电话
 * education: 学历(下标)
 * major: 专业(学历是高中以上))
 * school: 学校名称
 * oldjob: 过去职位(已参加工作)
 * classType: 选择的课程类型(0:H5 1:UI)
 * startDate: 选择试听的时间
 * 
 * 参数以 xyUserLite.xx 的形式发往后台 故需要序列化
 * var xyUserLite = { id: "xxx", name: "libai"}
 * ==> xyUserLite.id=xxx&xyUserLite.name=libai
 * 人工实现方法 遍历对象 var str = `&xyUserLite.${i}=${xyUserLite[i]}`
 * 如果借助qs,使用qs方法 qs.stringify(xyUserLite, { allowDots: true})
 */

 /**
 * 申请入学的参数
 * id: 用户id
 * tel2: 紧急联系人
 * manID: 身份证号
 * city: 城市的地市编码
 * cityText: 城市的文字版
 * classId: 选择的班级id
 * dormId: 选择的宿舍id,有它没有address
 * address: 自选租住地,有它没有dormId
 * 
 * 提交方式同上
 */

7. 编码类型

注意:发送请求的Content-Type(数据类型)必须为application/x-www-form-urlencoded才能发送成功
content-type：数据发送出去后，需要接收的服务端可以解析成功，一般服务端会根据此字段来获取参数是怎么编码的，然后对应去解码，一般认为content-type有以下四种类型：

1. text/plain AJAX请求的默认值
2. application/json json格式, 目前支持率比较高的编码方式
3. application/x-www-form-urlencoded form表单数据的提交编码设置
4. multipart/form-data 二进制文件的编码方式 ( 常用来提交图片或者文件等 )

8. 班级列表宿舍列表对应数据

classList: [{
      "addTime": "2020-12-26 15:42:38",
      "className": "自强班",
      "startTime": "2020-12-22 00:00:00",
      "id": "dec8d2e88d8d4d558d070f41c6d3422f",
      "endTime": "2020-12-30 00:00:00",
      "type": 1,
      "desc": "123"
    }, {
      "addTime": "2020-12-26 15:27:39",
      "className": "奋发班",
      "startTime": "2020-12-14 00:00:00",
      "id": "5cab801f2d2f4cb5b293deac2423a41c",
      "endTime": "2020-12-30 00:00:00",
      "type": null,
      "desc": "测试"
    }, {
      "addTime": "2020-12-26 15:26:41",
      "className": "启航班",
      "startTime": "2020-12-13 00:00:00",
      "id": "1ad14e3241e44c5aa22eb5c698698587",
      "endTime": "2020-12-31 00:00:00",
      "type": 1,
      "desc": "  initData();"
    }, {
      "addTime": "2020-12-26 15:26:16",
      "className": "书香苑",
      "startTime": "2020-12-08 00:00:00",
      "id": "84f20bfa417f447e94a747b418503806",
      "endTime": "2020-12-31 00:00:00",
      "type": 1,
      "desc": "俺又来测试了"
    }],
    dormList: [{
      "addTime": "2020-10-20 15:57:07",
      "name": "单身汪聚集地",
      "startTime": "2020-10-14 00:00:00",
      "id": "3cfdfa6c8fc74ab79763d963a10ab032",
      "position": "阿萨达奥大所大所多",
      "endTime": "2020-10-19 00:00:00",
      "type": 2,
      "bak": "A点洒奥大所撒大奥所"
    }, {
      "addTime": "2020-10-20 15:02:26",
      "name": "延禧宫",
      "startTime": "2020-10-07 00:00:00",
      "id": "9f4d62e0cb2c45b0bc2292235ea12407",
      "position": "金庄呆呆院",
      "endTime": "2020-10-30 00:00:00",
      "type": 0,
      "bak": "住进去会变小呆呆"
    }, {
      "addTime": "2020-10-16 14:40:56",
      "name": "文武阁",
      "startTime": "2020-10-01 00:00:00",
      "id": "1150337959064c9c88624a3bcbda6e99",
      "position": "金庄大聪明院",
      "endTime": "2020-10-30 00:00:00",
      "type": 1,
      "bak": "住进去就会变大聪明"
    }, {
      "addTime": "2020-10-15 16:46:20",
      "name": "无聊的宿舍",
      "startTime": "2020-06-11 00:00:00",
      "id": "95e7e4bec3e849c98914595562568ec7",
      "position": "金庄无聊院",
      "endTime": "2020-11-30 00:00:00",
      "type": 0,
      "bak": "住进去就会变得很无聊"
    }]

9 表单验证

【表单验证】