element表单必填校验,并自动定位到必填项
需求:
1、element form volid 必填提示框警告
2、自动定位到首个未通过校验字段
实现思路:
1.validate 校验需要给提交事件添加一个参数 object ;
2.当校验不通过时收集所有未通过字段项提示信息,将其通过 push 方法添加到定义好的数组中(str);
3.通过 this.$refs[Object.keys(object)[0]] 获取到首个字段校验不通过的提示信息;
4.利用 Object.prototype.toString.call() 方法判断 this.$refs[Object.keys(object)[0]] 的类型是否为对象的字符串形式;
5.最后通过 scrollIntoView 方法滚动到首个不通过校验字段项。
* 必填的el-form-item需要添加ref(建议ref与prop同名,ref用于定位

校验逻辑代码:
this.$refs['xxx'].validate((valid, object) => {
if (!isValide) {
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(', '));
this.$message({
type: 'warning',
message: '请检查必填项是否填写完整',
offset: 300
})
return false
} else {
// 业务逻辑修改
}
})

浙公网安备 33010602011771号