小程序

一、小程序搭配WeUI的form进行校验，首先根据官网的教程在.json文件中引用form组件

{
  "usingComponents": {
       "mp-form": "../../miniprogram_npm/weui-miniprogram/form/form",
       "mp-cells": "../../miniprogram_npm/weui-miniprogram/cells/cells",
       "mp-cell": "../../miniprogram_npm/weui-miniprogram/cell/cell",
       "mp-toptips": "../../miniprogram_npm/weui-miniprogram/toptips/toptips"

  }
}

二、在.XML文件中使用form组件

   <mp-toptips msg="{{errorMsg}}" type="error" show="{{errorMsg}}" delay="1500"></mp-toptips>
        <mp-form id="form" rules="{{rules}}" models="{{formData}}">
            <mp-cells>
                <mp-cell prop="userName" title="姓名">
                    <input bindinput="formInputChange" value="{{formData.userName}}" data-field="userName" placeholder="请填写收货人姓名"/>
                </mp-cell>
                <mp-cell prop="telPhone" title="联系方式">
                    <input bindinput="formInputChange" value="{{formData.telPhone}}" data-field="telPhone" placeholder="请填写收货人联系方式"/>
                </mp-cell>
                <mp-cell prop="address" title="地址">
                    <input bindinput="formInputChange" value="{{formData.address}}" data-field="address" placeholder="请填写收货人地址"/>
                </mp-cell>
            </mp-cells>
        </mp-form>
        <view slot="button">
            <button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
        </view>

注意：data-field的值必须和prop的值一致，否则会一直提示没有填写

三、.js文件中实现方法

Page({
  data: {
    errorMsg: '',
    rules: [
      {
        name: 'userName',
        rules: {required: true, message: '请填写收货人姓名'},
      },
      {
        name: 'telPhone',
        rules: {required: true, message: '请填写收货人联系方式'}
      },
      {
        name: 'address',
        rules: {required: true, message: '请填写收货人地址'}
      },
    ],
    formData:{
      userName:"",
      telPhone:"",
      address:""
    },
   
  },
formInputChange(e) {
  console.log(e)
  const {field} = e.currentTarget.dataset
  this.setData({
    [`formData.${field}`]: e.detail.value
  })
},
submitForm(){
  console.log('测试form表单')
  const {userName, sex, age} = this.data.formData
  this.selectComponent('#form').validate((valid, errors) => {
    console.log(valid,'++++++')
    if (!valid) {
      const firstError = Object.keys(errors)
      if (firstError.length) {
        this.setData({
          errorMsg: errors[firstError[0]].message
        })
      }
    } else {
      wx.showToast({
        title: '提交成功',
      })
    }
  })
},
}）