表单提交自动跳到验证失败的位置

这次用了vee-validate做表单验证

// main.js
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate, {
  inject: true,
  fieldsBagName: 'veeFields',
  errorBagName: 'veeErrors'
})

<template>
<b-form class="form px-4 py-4" @submit="payMent">
          <b-form-group
            label-cols-sm="2"
            label-cols-md="2"
            label-align="left"
            label-md-align="right"
            label="姓名:"
            class="require"
          >
            <b-form-input
              v-model="form.name"
              v-validate="'required|min:3|max:10|alpha'"
              data-vv-name="nickname"
            />
            <div class="error">{{ $validator.errors.first('nickname') }}</div>
          </b-form-group>
</b-form>
</template>
<script>
const validate = {
  custom: {
    nickname: {
      required: () => "姓名不得為空",
      min: "昵称不得小於3個字符",
      // max: () => '昵称不得大于10个字符'
      alpha: "姓名不得包括空格"
    },
  },
};
export default {
	methods:{
		payMent(e) {
	      e.preventDefault();
	      this.$validator.validate().then((valid) => {
	      if(!vaild){ // 验证失败 定位到第一个验证失败的地方
	      	this.errorScoll(this.$validator.errors.all()[0])
	      }
	    }
	    errorScoll(firstError) {
      		let errEleArr = document.getElementsByClassName("error");
      		let errEle;
      		errEleArr.forEach(e=>{
        		if(e.innerHTML === firstError){
          			errEle = e.previousSibling
        		}
      		})
      		errEle ? this.animateScroll(errEle, 50) : "";
		},
		animateScroll(element, speed) {
      		let menu = document.getElementsByClassName("head")[0];
      		//获取元素相对窗口的top值，此处应加上窗口本身的偏移
      		let top = window.pageYOffset + element.getBoundingClientRect().top - menu.offsetHeight;
     	 	// 获取当前距离窗口的top值
      		let osTop = document.documentElement.scrollTop || document.body.srcollTop;
      		let requestId;
      		let currentNumber = 0;
      		//采用requestAnimationFrame，平滑动画
      		function step() {
        		if (osTop >= top) {
          			currentNumber = osTop -= speed;
          			window.scrollTo(0, osTop);
          			requestId = window.requestAnimationFrame(step);
        		} else {
          			window.cancelAnimationFrame(requestId);
        		}
      		}
      		window.requestAnimationFrame(step);
    	},
    }
}
</script>