触发表单错误并自定义错误信息

在使用element-ui表单进行内容提交时,有时需要根据后台返回信息对表单的某一项进行错误提示,效果如下:

实现方法概述

• 方法一:计算属性定义校验规则
  1. 定义错误接受变量接受错误信息
  2. 使用计算属性定义校验规则
  3. 使用表单validate或validateField方法触发表单校验显示错误提示
  4. 输入框内容改变时清除错误接受变量值取消错误提示
• 方法二:操作表单子项定义错误内容
  1. 获取表单子项el-form-item
  2. 修改子项属性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=""
		}
	}
}

方法优点:

代码简单

方法缺点:

可操作性差

并未影响到表单校验,所以再次点击按钮时表单校验仍会通过

总结

第一种方法的代码性更强,也可以根据使用场景进行调整,第二种方法适用于简单的使用场景,比较便捷