element-ui的form表单,可自定义校验规则,也可对错误提示自定义设定
form表单自定义校验及错误提示,有两种方式
- 方式一:错误信息只显示文本
- 方式二:自定义错误提示
表单校验实现
// 自定义校验规则
validateDockerfile (rule, value, callback) {
let res
if(!value) {
res = rule.required ? new Error('请输入自定义文件内容') : undefined
} else {
const val = value.split('\n')
val.forEach(element => {
const valid = fn(element ) // fn():假设的element校验方法
if(valid) {
res = new Error('自定义文件内容输入不正确')
}
})
}
callback(res)
}
// data:定义rules
rules: any = {
'buildConfigData:dockerfile': [
{
required: true, trigger: 'blur',validator: this.validateDockerfile }
]
}
//html:使用error插槽,创建自定义风格的错误显示结果,不使用则在错误时显示validateDockerfile 里new Error所定义的文本
<el-form-item label="dockerfile内容"
prop="buildConfigData:dockerfile"
key="dockerfile">
<el-input type="textarea"
autosize
placeholder="请输入dockerfile内容"
v-model="form.buildConfigData.dockerfile"></el-input>
<span slot="error"
class="item-error">
自定义内容格式不正确,详情请<a class="normal-color" target="_blank" href="http://...">参考文档</a>
</span>
</el-form-item>
总结:
error插槽提供自定义错误信息的能力,丰富表单校验错误时所展示的内容、及提供用户自定义的操作(如添加超链接、自定义本文样式等),使用方式如下即可:
<span slot="error"
class="item-error">
自定义内容格式不正确,详情请<a class="normal-color" target="_blank" href="http://...">参考文档</a>
</span>
延申:同样的,表单标题也可自定义。如下,使用label插槽:
<el-form-item label="dockerfile内容"
prop="buildConfigData:dockerfile"
key="dockerfile">
<span slot="label">
<a target="_blank" href="http://...">检 查 结 果</a>:
</span>
<el-input type="textarea"></el-input>
<span slot="error"
class="item-error">
自定义内容格式不正确,详情请<a class="normal-color" target="_blank" href="http://...">参考文档</a>
</span>
</el-form-item>