需要校验的表单项需要有prop属性,和:error属性
<el-form-item label="昵称" prop="nickName” :error="errorMsg">
<el-input v-model="userInfo.nickName" @change="duplication"/>
</el-form-item>
data: {
errorMsg: ''
},
computed: {
...mapGetters([
'userId'
])
}
duplication() {
this.$refs.userInfo.validateField('nickName', errorMsg => {
if (!errorMsg) {
const data = {
nickName: this.userInfo.nickName,
userId: this.userId
}
this.findNickName(data)
}
})
},
findNickName(data) {
try{
this.errorMsg = ''
const res = await findNickName(data)
if (如果昵称存在) {
this.errorMsg = '该昵称存在,请重新输入'
}
} catch (error) {
this.$message({
type: 'error',
message: `${error.message}`
})
}
}