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

  

posted @ 2023-09-06 11:34  Gaochunling  阅读(450)  评论(0编辑  收藏  举报