主要是使用@keyup的动态事件,键盘一输入,就执行检查函数,以得到结果。
动态绑定样式表,将得到的结果切换显示。主要用于注册等操作。
<b-input
id="inline-form-input-name"
:class="checkFlag ? 'isok': 'isfalse'"
placeholder="请输入用户名(3位以上英文 或 英文加数字)"
v-model="username"
@keyup="checkuser"
></b-input>
data() {
return {
username:'',
checkFlag: true,
}
},
checkuser(){
let that = this
const username = this.username
if(username.length < 3){
return this.checkFlag=false
}
async function main(){
const ac = await that.client.database.call('lookup_account_names', [[username]])
// return (ac[0] === null) ? true : false;
console.log(123, ac[0])
if(ac[0] !== null){
console.log("1111, 用户名已存在!")
that.checkFlag = false
}else{
console.log(234567, '开始注册')
that.checkFlag = true
}
}
main()
},
<style scoped>
.isok{
margin-top: 1.5rem;
width: 50%;
/*background-color: chartreuse;*/
}
.isfalse{
margin-top: 1.5rem;
width: 50%;
background-color: crimson;
}
</style>