报错：

一直报手机号码必须填写，但是我已经填写了。 

 解决：

 花了2个小时，最后发布是模式models写错了。

 改完之后，终于提示别的错误了：

源码：

//wxml
<view class="welcome">欢迎回来!</view>
<mp-form id="form" class="login" rules="{{rules}}" mode="{{loginInfo}}">
  <mp-toptips show="{{showTips}}" msg="{{msgTip}}"></mp-toptips>
  <mp-cells ext-class="my-cells"  >

    <mp-cell show-error hover prop="phone">
      <view class="user-item">手机号码：
        <input type="number" value="{{phone}}"
               placeholder="请输入手机号" bindinput="onchange" data-field="phone"></input>
      </view>
    </mp-cell>
    <mp-cell  show-error prop="password">
      <view>登录密码
        <input class="weui-input" value="{{password}}" placeholder="请输入密码" data-field="password"
               bindinput="onchange"></input>
      </view>
    </mp-cell>
    <view class="btn-login" bindtap="login">登录</view>
  </mp-cells>
</mp-form>

<view class="forget-pwd">忘记密码?</view>
<view class="foot">
  还没有账号？
  <text class="register">马上注册</text>
</view>

//js
Page({
  login(e) {
    console.log(e, this)
    this.selectComponent("#form").validate((valid, errs) => {
      console.log(errs)
      if (!valid) {
        this.setData({
          msgTip: errs[0].message,
          showTips: true
        })
      } else {
        console.log("》》验证通过")
      }

    })
  }, onchange(e) {
    console.log('>>>', e)
    let field = e.target.dataset.field
    this.setData({
      [`loginInfo.${field}`]: e.detail.value
    })
  }, data: {
    showTips: false,
    msgTip: '',
    loginInfo: {
      phone: '',
      password: ''
    },
    rules: [ {
          name: "phone",
          rules: [{
            required: true,
            message: "手机必须填写"
          }, {
            mobile: true,
            message: "手机号码格式不对"
          }]
      },
      {
        name: 'password',
        rules: [{required: true, message: "请输入密码"},]
      },
    ]
  },
  onLoad: function (options) {

  }
});

json wxss

//json
{
  "usingComponents": {
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-form": "weui-miniprogram/form/form",
    "mp-toptips": "weui-miniprogram/toptips/toptips"
  },
  "navigationBarTitleText": "登录中心"
}



//wxss

.welcome {
  font-size: 50rpx;
  line-height: 240rpx;
  margin-left: 50rpx;
}

.btn-login {
  background-color: #e24c32;
  width: 80%;
  color: #fff;
  border-radius: 50rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx auto;
}

.my-cells {
  margin: 0 50rpx;
}

.weui-cell:before, .weui-cells:before, .weui-cells:after {
  display: none;
}

.weui-cell:before {
  display: none;
}

.weui-cell__bd {
  background-color: #eee;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}

.forget-pwd {
  margin-top: 60rpx auto;
  text-align: center;
  color: #537eee;
}

.foot {
  position: fixed;
  /*background-color: #bfc;*/
  text-align: center;
  width: 100%;
  bottom: 150rpx;
}

.register {
  color: #537eee;
}

app.json

  {
//...
"useExtendedLib": {
    "weui": true
  }
}

 官方组件文档：

Form | wechat-miniprogram / weui

   <!--
 models:需要校验的表单数据
 rules：表单校验的规则列表
 prop="userName" 和 data-field="userName"的值要一样，不然验证不了
-->

<mp-toptips show="{{showTips}}" msg="{{msgTip}}"></mp-toptips>

这行代码是页面上弹出来的红色框框

<mp-cell  show-error hover prop="password">
  <view>登录密码
    <input class="weui-input" value="{{password}}" placeholder="请输入密码" data-field="password"
           bindinput="onchange"></input>
  </view>
</mp-cell>

 这里面的 show-error 是对应的后面的圆的小问号