小程序使用weui form表单

小程序如何使用weui:https://www.jianshu.com/p/876c3da3259d
效果

image.png

<view class="we_form_wrap">
  <!--
   models:需要校验的表单数据
   rules：表单校验的规则列表
   prop="userName" 和 data-field="userName"的值要一样，不然验证不了
  -->
  <!--顶部错误提示-->
  <mp-toptips msg="{{errorMsg}}" type="error" show="{{errorMsg}}" delay="1500"></mp-toptips>
  <mp-form id="form" rules="{{rules}}" models="{{form}}">
    <mp-cells>
      <mp-cell class="form_item" prop="userName" title="姓名">
        <input bindinput="formInputChange" value="{{form.userName}}" data-field="userName" class="weui-input" placeholder="请填写收货人姓名"/>
      </mp-cell>
      <mp-cell class="form_item" prop="telNumber" title="电话">
        <input bindinput="formInputChange" value="{{form.telNumber}}" data-field="telNumber" class="weui-input" placeholder="请填写收货电话"/>
      </mp-cell>
      <mp-cell class="form_item_region" title="省市区">
        <view class="addr_ma_item province_select">
          <view class="picker_wrap">
            <picker
              mode="region"
              bindchange="bindRegionChange"
              value="{{form.region}}"
              name="region"
              custom-item="{{customItem}}">
              <view class="{{form.region[1]?'':'default_picker'}}">
                {{form.region[0]}}
                {{form.region[1]?'-':''}}
                {{form.region[1]}}
                {{form.region[1]?'-':''}}
                {{form.region[2]}}
              </view>
            </picker>
          </view>
          <view class="addr_ma_icon">></view>
        </view>
      </mp-cell>
      <mp-cell class="form_item" prop="addrDetail" title="详细信息">
        <input bindinput="formInputChange" value="{{form.addrDetail}}" data-field="addrDetail" class="weui-input" placeholder="街道、楼牌号等"/>
      </mp-cell>
    </mp-cells>
    <!--提交按钮-->
    <view class="submit_btn_wrap">
      <button class="weui-btn" type="primary" bindtap="weSubmitForm">确定</button>
      <button type="warn" bindtap="restForm" plain>取消</button>
    </view>
  </mp-form>
</view>

data: {
    form: {
      userName: '',
      telNumber: '',
      addrDetail: '',
      region: ['请选择省市区/县', '', ''], // 省市区数据 第一个可以当placeholder
    },
    errorMsg: '', // 验证表单显示错误信息
    customItem: '', // 自定义picker显示的内容
    rules: [
      {
        name: 'userName',
        rules: {required: true, message: '请填写收货人姓名'},
      },
      {
        name: 'telNumber',
        rules: [{required: true, message: '请填写收货人电话'}, {mobile: true, message: '电话格式不对'}]
      },
      {
        name: 'addrDetail',
        rules: {required: true, message: '请填写详细地址'}
      },
    ],
  },
  externalClasses: ['form_item','form_item_region'],
  Postcode: '', // 邮编
// 省市区选择事件
  bindRegionChange(e) {
    const {value, code, postcode} = e.detail
    // console.log(code) // 统计用区划代码
    // postcode 是邮政编码
    this.Postcode = postcode
    this.setData({
      'form.region': value
    })
  },
formInputChange(e) {
    const {field} = e.currentTarget.dataset
    this.setData({
      [`form.${field}`]: e.detail.value
    })
  },
// weui提交表单
  weSubmitForm() {
    const {userName, telNumber, region, addrDetail} = this.data.form
    const validRegion = region.filter(v => v) // 提取有效值
    this.selectComponent('#form').validate((valid, errors) => {
      if (!valid) {
        const firstError = Object.keys(errors)
        if (firstError.length) {
          this.setData({
            errorMsg: errors[firstError[0]].message
          })
        }
      } else if (validRegion.length < 2) {
        this.setData({
          errorMsg: '请选择省市区'
        })
      } else {
        wx.showToast({
          title: '提交成功',
        })
        wx.navigateBack({
          delta: 1
        })
      }
    })
  }
// 重置表单
  restForm() {
    this.setData({
      'form.userName': '',
      'form.telNumber': '',
      'form.addrDetail': '',
      'form.region': ['请选择省市区/县', '', '']
    })
    wx.navigateBack({
      delta: 1
    })
  },

page {
  background-color: #f9f9f9;
}

.addr_manage {
  .addr_ma_item {
    display: flex;
    border-bottom: 1px solid #ececec;
    padding: 20rpx;
    align-items: center;
    color: #666666;

    .addr_ma_txt {
      display: 2;
    }

    .addr_ma_input {
      flex: 4;
      margin-left: 30rpx;
      padding-right: 20rpx;
    }
  }
}

.province_select {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .picker_wrap {
    display: flex;
    flex: 5;

    .addr_ma_txt {
      margin-right: 20rpx;
    }

    picker {
      width: 70%;
    }

    .default_picker {
      color: #acacac;
    }
  }

  .addr_ma_icon {
    font-size: 30rpx;
    color: #acacac;
  }
}

.submit_btn_wrap {
  margin-top: 20rpx;
  padding: 0 20rpx;
  width: 100%;

  button {
    font-weight: normal;
    width: 100% !important;
    margin-top: 20rpx;
  }
}

/*=========================weui==========================*/
.we_form_wrap {
  .form_item {
    display: flex;
    color: #666666;
    font-size: 28rpx;
  }

  .form_item_region {
    color: #666666;
    font-size: 28rpx;
  }

  .cell--weui-cell {
    width: 100%;
  }

  .weui-label {
    width: 136rpx;
  }
}