[JavaScript知识库]vue当中的$refs[formName].validate详解

在el-form中，少不了的一步就是表单校验首先通过ref绑定好这个表单

//绑定好组件
<el-form ref="form" :rules="rules" ...>
    ...
    <el-form-item ref="name" label="名称:" prop="name">
          <el-input  v-model="form.name"  placeholder="请输入名称"/>
    </el-form-item>
<el-form/>

接下来调用这个方法

this.$refs[form].validate(valid,object()=>{
    // 这个valid 表示的是验证是否通过输出回是一个布尔类型的值
    //object 表示的是验证未通过的数据,返回值是一个对象见图1
      这里就可以做一些回滚啊一些操做,
    例如回滚 
        if (valid) {
          alert('submit!')
        } else {
          for (let i in object) {
              let dom = this.$refs[i];            
              // if (Object.prototype.toString.call(dom) !== '[object Object]') {　　//这里是针对遍历的情况（多个输入框），取值为数组
              //   console.log(dom);
              // }　　　　　　
　　　　　　　　//第一种方法（包含动画效果）
              dom.$el.scrollIntoView({　　//滚动到指定节点
                block: 'end',　　　　　//值有start,center,end，nearest，当前显示在视图区域中间
                behavior: 'smooth'　　　　//值有auto、instant,smooth，缓动动画（当前是慢速的）
              })
            }
        }
})

图1

以上观点仅代表个人观点，如果错误欢迎指正

?