在使用element-ui表单进行内容提交时,有时需要根据后台返回信息对表单的某一项进行错误提示,效果如下:
实现方法概述
- 方法一:计算属性定义校验规则
- 定义错误接受变量接受错误信息
- 使用计算属性定义校验规则
- 使用表单
validate
或validateField
方法触发表单校验显示错误提示 - 输入框内容改变时清除错误接受变量值取消错误提示
- 方法二:操作表单子项定义错误内容
- 获取表单子项
el-form-item
- 修改子项属性
validateState="error"
,validateMessage="自定义的错误信息"
- 获取表单子项
应用展示
方法一:计算属性定义校验规则
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="姓名" prop="name">
<!-- 如果想在输入框再次输入时清除错误提示,对input事件使用clearErrorMessage方法 -->
<el-input @input="clearErrorMessage" v-model="form.name"></el-input>
</el-form-item>
</el-form>
{
data(){
return {
form:{
name:""
},
nameErrorMessage:""//定义变量接受错误信息
}
},
computed:{
rules(){
return {
name:[{
validator:(rules,val,cb)=>{//使用箭头函数方便使用this
//根据使用情景自定义校验规则
if(this.nameErrorMessage) cb(new Error(this.nameErrorMessage))
else cb()
},
trigger:"change"
}]
}
}
},
methods:{
// 触发错误提示
handle(errMessage){
this.nameErrorMessage=errMessage;
this.$refs.form.validate(()=>{}) // 回调里不用写任何代码,只是没有回调时会提示警告
},
// 清除错误信息 在需要取消提示时使用
clearErrorMessage(){
this.nameErrorMessage=""
}
}
}
-
方法优点:
- 可操作性高,可以根据需要选择是否清除提示
- 错误提示出现时再次点击按钮不会通过校验,提升性能 方法缺点
- 代码量大
方法二:操作表单子项定义错误内容
<el-form ref="form" :model="form">
<el-form-item label="姓名" prop="name" ref="name">
<!-- // 如果rules存在对该子项的校验,再次输入内容会自动清除错误信息,否则需要手动清除 -->
<el-input @input="clearErrorMessage" v-model="form.name"></el-input>
</el-form-item>
</el-form>
{
data(){
return {
form:{
name:""
}
}
},
methods:{
// 触发错误提示
handle(errMessage){
let elFormItem=this.$refs.name;
// 也可以使用 this.$refs.form.fields 获取全部item,再通过prop属性进行筛选
// 如 let elFormItem=this.$refs.form.fields.find(item=>item.prop=="name")
elFormItem.validateState="error";
elFormItem.validateMessage=errMessage;
},
// 清除错误提示
// 如果rules存在对该子项的校验,再次输入内容会自动清除错误信息,否则需要此方法手动清除
clearErrorMessage(){
let elFormItem=this.$refs.name;
elFormItem.validateState="";
elFormItem.validateMessage="";
}
}
}
也可以使用el-form-item
的error
属性,效果与上面相同
<el-form ref="form" :model="form">
<el-form-item label="姓名" prop="name" :error="nameErrorMsg">
<el-input @input="clearErrorMessage" v-model="form.name"></el-input>
</el-form-item>
</el-form>
{
data(){
return {
form:{
name:""
},
nameErrorMsg:""
}
},
methods:{
// 触发错误提示
handle(errMessage){
this.clearErrorMessage();// 相同错误信息只会提示一次,清除刷新错误信息使之能过多次显示
this.$nextTick(()=>{
this.nameErrorMsg="错误内容"
})
},
// 清除错误提示
// 如果rules存在对该子项的校验,再次输入内容会自动清除错误信息,否则需要此方法手动清除
clearErrorMessage(){
this.nameErrorMsg=""
}
}
}
-
方法优点:
- 代码简单 方法缺点:
- 可操作性差
- 并未影响到表单校验,所以再次点击按钮时表单校验仍会通过
总结
第一种方法的代码性更强,也可以根据使用场景进行调整,第二种方法适用于简单的使用场景,比较便捷