async-validator自定义error显示样式
时间: 2023-09-01 16:07:26 浏览: 43
async-validator 是一个用于表单验证的工具库,其提供了一些默认的错误提示信息,但是我们也可以自定义错误显示样式。
首先,我们需要在 form 表单中引入需要的样式文件。比如说,我们可以在头部引入一个样式文件:
```html
<head>
<link rel="stylesheet" href="path/to/custom.css">
</head>
```
然后,在 async-validator 中,我们可以使用 `messages` 属性来定义我们想要显示的错误信息。我们可以在 `messages` 中定义一个名为 `custom` 的对象来设置我们自定义的错误信息。比如说,我们可以设置一个 `required` 错误信息:
```javascript
const validator = new AsyncValidator({
name: [
{ required: true, message: '请输入您的姓名', trigger: 'blur' }
]
})
validator.messages({
custom: {
required: '此项为必填项'
}
})
```
最后,我们需要在表单的错误提示中使用我们自定义的错误信息。我们可以在表单的 `el-form-item` 中使用 `show-message` 属性来显示错误信息,然后使用 `validate-message` 属性来指定我们自定义的错误信息:
```html
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="姓名" prop="name" show-message>
<el-input v-model="form.name"></el-input>
<div slot="error" class="custom-error" v-if="errors.name">{{ errors.name[0].message }}</div>
<!-- 使用自定义错误信息 -->
<div slot="error" class="custom-error" v-if="errors.name">{{ errors.name[0].message.custom }}</div>
</el-form-item>
</el-form>
```
这样,当表单验证失败时,就会显示我们自定义的错误信息。同时,我们也可以通过样式文件来美化错误提示信息的样式。