效果

image

html代碼

  <form bindsubmit="formSubmit" bindreset="formReset">  
  <view class="section section_gap">  
  <view class="section__title">是否公開信息</view>  
  <switch name="isPub" />  
  </view>  

  <view class="section">  
  <view class="section__title">手機號</view>  
  <input name="phone" placeholder="手機號" />  
  </view>  
  <view class="section">  
  <view class="section__title">密碼</view>  
  <input name="pwd" placeholder="密碼" password/>  
  </view>  
  <view class="section section_gap">  
  <view class="section__title">性別</view>  
  <radio-group name="sex">  
  <label>  
  <radio value="男" checked/>男</label>  
  <label>  
  <radio value="女" />女</label>  
  </radio-group>  
  </view>  
  <view class="btn-area">  
  <button formType="submit">提交</button>  
  <button formType="reset">重置</button>  
  </view>  
  </form>  
  <view wx:if="{{isSubmit}}">  
  {{warn ? warn : "是否公開信息："+isPub+"，手機號："+phone+"，密碼："+pwd+"，性別："+sex}}  
  </view>  

css代碼

  .section{  
  display: flex;  
  flex-direction: row;  
  margin: 20rpx;  
  }  
  .section view{  
  margin-right: 20rpx;  
  }  
  .btn-area{  
  margin: 20rpx;  
  }  
  button{  
  margin: 10rpx 0;  
  }  

js代碼

  let app = getApp();  
  Page({  
  data: {  
  isSubmit: false,  
  warn: "",  
  phone: "",  
  pwd: "",  
  isPub: false,  
  sex: "男"  
  },  
  formSubmit: function (e) {  
  console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value);  
  let { phone, pwd, isPub, sex } = e.detail.value;  
  if (!phone || !pwd) {  
  this.setData({  
  warn: "手機號或密碼為空！",  
  isSubmit: true  
  })  
  return;  
  }  
  this.setData({  
  warn: "",  
  isSubmit: true,  
  phone,  
  pwd,  
  isPub,  
  sex  
  })  
  },  
  formReset: function () {  
  console.log('form發(fā)生了reset事件')  
  }  
  })