小程序好看的表单样式

配合上划线的一个样式，麻雀虽小五脏俱全吧，先看样子

直接用会出错，因为我这里封装了一些东西在common.js文件里面，比如common.SHOWTIPS就是一个wx.showToast的封装，如果感兴趣这种简洁的写法的话可以翻阅我往期

wxml

  
    
      姓名
      
    

    
      手机号码
      
    

    
      
        所在地区
        
          
            {{region[0]}} {{region[1]}} {{region[2]}}
          
        
      
      
        请选择
        
      
    

    
      
    

    
      
        所在楼层
        
      
      
        
          
          电梯
        
      
    

    
      
    
  

  
    
      设为默认地址
    
    
      
    
  

  
    保存
  

wxss

/*  */
.ipt-wrap{
  min-height: 100rpx;
  line-height: 100rpx;
}
.ipt-wrap label{
  min-width: 120rpx;
}
.icon-youjiantou{
  position: relative;
  top: 1rpx;
}
.textarea{
  height: 100rpx;
}
/*swtich样式-start*/
/*swtich整体大小*/
.wx-switch-input{
  width:82rpx !important;
  height:40rpx !important;
}
/*白色样式（false的样式）*/
.wx-switch-input::before{
  width:80rpx !important;
  height: 36rpx !important;
}
/*绿色样式（true的样式）*/
.wx-switch-input::after{
  width: 40rpx !important;
  height: 36rpx !important;
}
.ipt-wrap:last-child{
  border-bottom:none;
}
/*swtich样式end*/
.region{
  width: 500rpx;
  position: absolute;
  left: 150rpx;
}

js

const common = require('../../utils/common');
const api = require('../../utils/api');
const app = getApp();

Page({
  data: {
    elevatorFlag: 0,
    nameValue: '',
    phoneValue: '',
    region: ["省", "市", "区"],
    regionFlag: 1,
    textareaValue: '',
    floorValue: 0,
    remarksValue: '',
    addressStatus: 0,
    userID: 0
  },
  onLoad: function (){
    let self = this;
    this.setData({ userID: app.globalData.userID });
  },
  changeIconStatu: function () {
    var self = this;
    this.setData({ elevatorFlag: !self.data.elevatorFlag});
  },
  getNameValue: function (e) {
    this.setData({ nameValue: e.detail.value });
  },
  getPhoneValue: function (e) {
    this.setData({ phoneValue: e.detail.value });
  },
  bindRegionChange: function (e) {
    this.setData({ region: e.detail.value, regionFlag: 0 });
  },
  getTextareaValue: function (e) {
    this.setData({ textareaValue: e.detail.value });
  },
  getFloorValue: function (e) {
    this.setData({ floorValue: e.detail.value });
  },
  getRemarksValue: function (e) {
    this.setData({ remarksValue: e.detail.value });
  },
  defaultChange: function (e){
    if (e.detail.value){
      this.setData({ addressStatus: 1 });
    }else{
      this.setData({ addressStatus: 0 });    
    }
  },
  saveNewAddress: function () {
    let self = this,
        regionFlag = self.data.regionFlag,
        addressStatus = self.data.addressStatus,
        region = self.data.region,
        str = '';
    for (let i = 0, len = region.length; i < len; i++){
      if (region[i].length == 1){region[i] = region[i-1];}
      str += region[i] + ' ';
    }
    let byUrl = api.INTERFACES.findByAddress, byData = { areaName: str};
    if (!common.ISNAME(self.data.nameValue)){
      common.SHOWTIPS('请输入真实的姓名', 'none'); return;
    } else if (!common.ISPHONE(self.data.phoneValue)){
      common.SHOWTIPS('请输入正确的11位手机号码', 'none'); return;
    } else if (self.data.regionFlag) {
      common.SHOWTIPS('请选择省市区', 'none'); return;
    } else if (!self.data.textareaValue){
      common.SHOWTIPS('请输入详细地址', 'none'); return;
    } else if (!self.data.floorValue){
      common.SHOWTIPS('请输入楼层号', 'none'); return;
    } 
  }
});