input的bindblur事件验证问题
发布于 5 年前 作者 mdeng 5933 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

因为所有input都是失去焦点事件,只有当鼠标离开输入框使这个输入框才会触发,

但是当我点击确认密码输入框时候,此时登录密码的bindblur事件触发,同时确认密码的bindblur为什么也触发?而且光标也不见了,

  • 预期表现

希望所有的input都是鼠标离开时才会触发事件,即bindblur

  • 提供一个最简复现 Demo

附上一段代码

<view>

<label>公司名称</label>

<input type=“text” class=“name” value=’’ name=“company” bindblur=‘company’/>

<p class=“error”>{{companyNameErr}}</p>

</view>

<view>

<label>登录账号</label>

<input type=“text”  value=’’ class=“umcLoginName” name=“logincount” bindblur=“logincount” />

<p class=“error”>{{umcLoginNameErr}}</p>

</view>

<view>

<label>登录密码</label>

<input type=“text”  value=’’ class=“password” name=“loginpass” bindblur=“loginpass” />

<p class=“error”>{{loginpassErr}}</p>

</view>

<view>

<label>确认密码</label>

<input type=“text” value=’’  class=“password1” name=“confirmloginpass” bindblur=“confirmloginpass” />

<p class=“error”>{{confirmPassErr}}</p>

</view>

<view>

<label>手机号码</label>

<input type=“text” value=’’ name=“telphone” bindblur=“telphone” />

<p class=“error”>{{phoneErr}}</p>

</view>

js部分

Page({

data: {

companyNameErr: “”,

umcLoginNameErr: “”,

loginpassErr: “”,

confirmPassErr: “”,

phoneErr:""

},

company(e) {

let name = e.detail.value;

console.log(name)

if (name == null || name == ‘’) {

this.setData({

companyNameErr: “公司名称不能为空”

})

return false;

}

},

logincount(e) {

let name = e.detail.value;

if (name == null || name == ‘’) {

this.setData({

umcLoginNameErr: “登录账号不能为空”

})

return false;

}

},

loginpass(e) {

console.log(e)

let value = e.detail.value;

let reg = /^(?=.*[a-zA-Z0-9].*)(?=.*[a-zA-Z\\W].*)(?=.*[0-9\\W].*).{8,20}$/;

let reg1 = /^[uUvV].*/;

if (!reg.test(value)) {

this.setData({

loginpassErr: “密码格式错误,需8-20个字符,组合字母、数字或符合(两种或以上)”

})

return false;

}

},

confirmloginpass(e) {

let value = e.detail.value;

if (value == null || value == ‘’) {

this.setData({

confirmPassErr: “确认密码不能为空”

})

return false;

}

},

telphone(e) {

let value = e.detail.value;

if (value == null || value == ‘’) {

this.setData({

phoneErr: “手机号码不能为空”

})

return false;

}

},

})

1 回复

你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

回到顶部