微信小程序开发——form表单

效果图

代码示例

1、xxx.wxml

<form bindsubmit='submitClick' bindreset='resetClick'>
  <switch name="status" bindchange='switchClick'>{{switchTitle}}</switch> 
  <input name="userName" placeholder='请输入帐号' type='text' maxlength="20" confirm-type="next"></input>
  <input name="userPassword" placeholder='请输入密码' password='true' maxlength="20" confirm-type="done"></input> 
  <checkbox-group name="citys" bindchange="checkClick">
    <block wx:for="{{checkData}}">
      <checkbox value='{{item.name}}' checked="{{item.status}}">{{item.name}}</checkbox>
    </block>
  </checkbox-group> 
  <slider name="progress" bindchange='sliderClick'></slider>  
  <radio-group name="gender" bindchange="radioClick">
    <block wx:for="{{radioData}}">
      <radio value='{{item.name}}' checked='{{item.status}}'>{{item.name}}</radio>
    </block>
  </radio-group>  
  <picker name="protect" bindchange="pickerClick" value='{{pickerIndex}}' range='{{pickerData}}'>{{pickerData[pickerIndex]}}</picker>  

  <button form-type='submit'>提交</button>
  <button form-type='reset'>重置</button> 
</form>

2、xxx.wxjs

// pages/modules/Form/form.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    switchTitle:"关",
    checkData: [{name: "深圳", status: true}, 
    {name: "广州", status: false}, 
    {name: "东莞", status: false}, 
    {name: "惠州", status: false}],
    radioData: [{name:"男", status:true},
    {name:"女", status:false}],
    pickerData: ["中国人寿", "中国平安", "太平洋人寿", "华夏人寿"],
    pickerIndex: 0,
  },

  switchClick: function (event) {
    var status = event.detail.value;    
    this.setData({
      switchTitle: (status ? "开" : "关"),
    });
  },

  checkClick: function (event) {
    console.log(event.detail.value);
  },

  sliderClick: function (event) {
    console.log(event.detail.value);
  },

  radioClick: function (event) {
    console.log(event.detail.value);
  },

  pickerClick: function (event) {
    console.log(event.detail.value);
    this.setData({
      pickerIndex: event.detail.value,
    });
  },

  submitClick: function (event) {
    var status = event.detail.value.status;
    var userName = event.detail.value.userName;
    var userPassword = event.detail.value.userPassword;
    var citys = event.detail.value.citys;
    var cityText = "";
    for (var index in citys) {
      var text = citys[index];
      cityText += ", " + text;
    }
    var progress = event.detail.value.progress;
    var protect = this.data.pickerData[event.detail.value.protect];


    console.log("你的信息已经对外" + (status ? "公开" : "屏蔽") + "\n当前登录帐号：" + userName + ", 密码是：" + userPassword + "\n你所工作过的城市有：" + cityText + "\n你的专业技能评分是：" + progress + "分" + "\n你的保障是：" + protect);
  },

  resetClick: function (event) {
    console.log(event.detail.value);
  }
}

注意：form表单里的其他组件，必须设置name属性，否则无法获取对应组件信息。