前言
在网页表单的开发中,表单校验是一个非常重要的环节。如果表单校验未通过时,能够直接定位到未通过字段位置,将极大地提升用户体验。不仅能够让用户快速找到错误的地方进行修改,也能够减少用户在整个表单页面的浏览时间,提高用户的工作效率。那么,如何实现这一功能呢?本文将为大家详细介绍 element 表单校验未通过定位到未通过字段位置的实现方法,让你的网页表单变得更加智能、易用。
优化前:
优化后:
实现思路:
- 首先我们需要给提交事件添加一个参数
object
; - 当校验不通过时收集所有未通过字段项提示信息,将其通过
push
方法添加到定义好的数组中(str
); - 通过
this.$refs[Object.keys(object)[0]]
获取到首个字段校验不通过的提示信息; - 利用
Object.prototype.toString.call()
方法判断this.$refs[Object.keys(object)[0]]
的类型是否为对象的字符串形式; - 最后通过
scrollIntoView
方法滚动到首个不通过校验字段项。
代码实现起来也非常简单,如下:
methods: {
// 事件方法
submitForm(formName) {
this.$refs[formName].validate((valid, object) => {
if (valid) {
//校验通过执行逻辑
} else {
let str = [];
for (let key in object) {
object[key].map((item) => {
str.push(item.message);
});
let dom = this.$refs[Object.keys(object)[0]];
if (Object.prototype.toString.call(dom) !== "[object Object]") {
dom = dom[0];
break;//结束语句并跳出语句,进行下个语句执行
}
// 定位代码
dom.$el.scrollIntoView({
block: "center",
behavior: "smooth",
});
}
// 页面提示未通过校验字段项,并以逗号分隔
this.$message.error(str.join(","));
}
});
},
},
注意:
必填字段项的el-form-item
需要添加ref
,作用主要是用来定位(ref
的值建议与prop
同名)。