Vue: @blur事件 实现注册用户时检验用户名是否可用
在vue中@blur 是当元素失去焦点时所触发的事件例子:在添加用户的时候,在输入用户名的时候要保证其用户名是唯一的,所有就要输入完用户名的时候,向后端发起请求,后端去查看数据库中是否存在该用户名,如果存在就要提醒用户该用户名已经存在,这个时候就可以用到blur来实现输入完用户名就开始校验。<tr><td>用户名</td><td><input
·
在vue中@blur 是当元素失去焦点时所触发的事件
例子:
在添加用户的时候,在输入用户名的时候要保证其用户名是唯一的,所有就要输入完用户名的时候,向后端发起请求,后端去查看数据库中是否存在该用户名,如果存在就要提醒用户该用户名已经存在,这个时候就可以用到blur来实现输入完用户名就开始校验。
<tr>
<td>用户名</td>
<td>
<input v-model="user.uname" @blur="checkNum()"/>
</td>
</tr>
methods:{
checkNum(){
let uname = this.user.uname;
let url = this.$myurl+'/UserController?act=exist';
let params = this.$qs.stringify({uname:uname})
console.log("params=",params);
this.$axios.post(url,params)
.then((response)=>{
let s = response.data;
console.log(s);
if(s=='exist'){
this.msg = '该用户名已存在,请修改用户名!'
}else {
this.msg='';
}
})
.catch((error)=>{
console.log("error",error);
});
},
}
当输入完用户名鼠标离开输入框的时候,就会触发blur事件,进而去校验用户名是否存在。
更多推荐
已为社区贡献1条内容
所有评论(0)