小程序form表单验证,validate 在更新数据以后不能验证?还是提示同样的错误

报错:

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

小程序form表单验证,validate 在更新数据以后不能验证?还是提示同样的错误_第1张图片

 解决:

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

小程序form表单验证,validate 在更新数据以后不能验证?还是提示同样的错误_第2张图片

 改完之后,终于提示别的错误了:

小程序form表单验证,validate 在更新数据以后不能验证?还是提示同样的错误_第3张图片

源码:

//wxml
欢迎回来!


忘记密码?

  还没有账号?
  马上注册


//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

   

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


  登录密码
    
  

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

你可能感兴趣的:(小程序,前端,javascript)