vue3表单校验失败，页面定位到第一个校验不通过的位置

最新推荐文章于 2024-10-11 14:17:40 发布

ces_test

最新推荐文章于 2024-10-11 14:17:40 发布

阅读量127

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_45610622/article/details/142062328

版权

 <el-form :model="uploadInfo" label-width="120px"  ref="formRefs"
                :rules="formRules"
            ></el-form>

const formRefs = ref(null);
 
formRefs.value?.validate((valid) => {
        if (!valid) {
            // 校验失败
            // 页面滚动到表单
            let el_form_item__error = document.getElementsByClassName(
                "el-form-item__error"
            );
            if (el_form_item__error[0]) {
                el_form_item__error[0].parentNode.scrollIntoView({
                    behavior: "smooth",
                });
            } else {
                let el_form_item__content = document.getElementsByClassName(
                    "el-form-item__content"
                );
                el_form_item__content[0].scrollIntoView({
                    behavior: "smooth",
                });
            }
            return false;
        } else {
           //校验成功
        }
    });

vue3表单校验失败，页面定位到第一个校验不通过的位置