Error:
The mobile phone number must be filled in all the time, but I have already filled it out.
solve:
It took 2 hours, and the final release was that the model models were written wrong.
After the modification, it finally prompts another error:
source code:
//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
}
}
Official component documentation:
Form | wechat-miniprogram/weui
<!-- models: form data that needs to be validated rules: list of rules for form validation The value of prop="userName" and data-field="userName" must be the same, otherwise it will not be verified -->
<mp-toptips show="{ {showTips}}" msg="{ {msgTip}}"></mp-toptips>
This line of code is the red box that pops up on the page
<mp-cell show-error hover prop="password"> <view>login password <input class="weui-input" value="{ {password}}" placeholder="Please enter a password" data-field="password" bindinput="onchange"></input> </view> </mp-cell>
The show-error here is the small question mark corresponding to the circle behind