526互联

element表单中当有必填项没有填时,定位光标

发布时间 2023-09-08 15:43:23作者: 打个大大西瓜

表单添加或修改时的验证

1.表单

 <el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            label-width="140px"
          >
  </el-form>

2.表单验证

//添加数据
addData(){
	 this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
        	//当验证通过执行你添加的操作
        }else {
        	//当验证失败跳转到空白的所在区域
          this.$nextTick(() => {
            let isError = document.getElementsByClassName("is-error");
              // var a = $(isError[0]).find("input") //this.$refs.cmd.$el.querySelector('input') 
              // a.focus()  光标定位到所在input
            isError[0].scrollIntoView({
              // 滚动到指定节点
              // 值有start,center,end，nearest
              block: "center",
              // 值有auto、instant,smooth，缓动动画
              behavior: "smooth",
            });
          });
          return false;
        }
}