element-plus输入框失去焦点还有错误信息
时间: 2023-07-18 18:28:52 浏览: 520
对于element-plus的输入框,可以通过设置`clearable`和`show-password`属性来实现输入框失去焦点后清空和显示密码功能。而对于错误信息的展示,可以使用`el-form-item`组件并设置`prop`属性为表单项的字段名,然后在校验失败时通过`rules`属性设置错误信息并在`el-form-item`组件上使用`error`属性来显示错误信息。例如:
```html
<template>
<el-form>
<el-form-item label="用户名" prop="username" :rules="usernameRules">
<el-input v-model="username"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
username: '',
usernameRules: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 3, max: 16, message: '用户名长度在 3 到 16 个字符', trigger: 'blur' }
]
}
}
}
</script>
```
在上面的代码中,`el-form-item`组件的`prop`属性设置为`username`,并通过`usernameRules`设置了对应的校验规则和错误信息。当输入框失去焦点时,会自动触发校验并显示错误信息。
阅读全文