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 { // 业务逻辑修改 } })