问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 微信小程序 Bug input 客户端 6.7.2 最新

- 当前 Bug 的表现（可附上截图）


- 预期表现


现在要实现情况是：实现表单的校验时：输入邮箱和密码，在两个 input blur 时会校验输入是否合法，如果不合法则提示红字内容；input focus 时则对对应的提示内容进行隐藏（图中白字为 placehold）


在 iOS 上的表现是：在第一个 input 提示错误的时候，在对第二个 input 进行 focus 的时候，发现 第二个 input 出现在“请输入有效的账号”下面
- 提供一个最简复现 Demo

绑定账号











绑定

.content {
padding: 0 60rpx;
font-family: PingFangSC-Regular;
}
.title {
font-family: PingFangSC-Medium;
margin: 80rpx 0 100rpx;
}
input {
font-family: PingFangSC-Medium;
font-size: 34rpx;
color: #333333;
flex-grow: 1;
padding-bottom: 30rpx;
}
.close {
margin-left: 20rpx;
color: #cccccc;
}
.input-content {
border-bottom: 1px solid #E8E9EB;
}
.input-style {
color: #ccc;
}
.error-tip {
font-size: 24rpx;
color: #FF3333;
line-height: 54rpx;
}
.error-account {
padding-bottom: 38rpx;
}
.format-btn {
margin-top: 90rpx;
background: #00B38A;
border-radius: 3rpx;
color: #fff;
}
.invalid-btn {
opacity: 0.3;
}
Page({
data: {
canSubmit: false,
passportValid: false
},
emailFocus(){
this.data.emailTip && this.setData({
emailTip: false
})
},
emailBlur(e){
let emailValid = util.validateAccount(e.detail.value); // 校验规则自己加下 哇哇哇 注意这里里里里里里里里里里里里里里
if(!emailValid){
}
this.setData({
emailTip: !emailValid,
emailValid
})
},
emailInput(e){
let emailValid = util.validateAccount(e.detail.value); // 校验规则自己加下 哇哇哇 注意这里里里里里里里里里里里里里里
this.setData({
hasAccount: e.detail.value,
canSubmit: (emailValid && this.data.passportValid)
})
},
passportFocus(){
console.log("passportFocus");
this.data.passportTip && this.setData({
passportTip: false
})
},
passportBlur(e){
let passportValid = /^[\S\s]{6,16}$/.test(e.detail.value);

this.setData({
passportTip: !passportValid,
passportValid,
canSubmit: (passportValid && this.data.emailValid)
})
},
passportInput(e){
let passportValid = /^[\S\s]{6,16}$/.test(e.detail.value);
this.setData({
hasPassport: e.detail.value,
canSubmit: (passportValid && this.data.emailValid)
})
},
clearAccount(){
this.setData({
hasAccount: ''
})
},
clearPassport(){
this.setData({
hasPassport: ''
})
}
})

微信小程序开发问题解答

本文网址：http://www.91bianli.com/weixinxiaochengxu/45318.html