【Antdv】表单校验失败时将页面滚动到错误消息所在位置

早饭君 / 53 /

ChatGPT 可用网址,仅供交流学习使用,如对您有所帮助,请收藏并推荐给需要的朋友。
https://ckai.xyz

遇见超长表单,提交校验失败,我们希望页面可以滚动到第一个错误消息的所在位置。
   this.$refs.refForm.validate((valid) => {
    if (valid) {
        //表单校验通过          
    } else {
        //表单校验不通过
        setTimeout(()=>{
            //其他写法 var errors = document.querySelector(".ant-form-explain");
            var errors = this.$el.querySelector(".ant-form-explain");
            if (errors) {
                errors.scrollIntoView({ 
                    behavior: "instant", 
                    block: "center", 
                    inline: "nearest" 
                })
            }
        }, 100)
        return false;
    }
});


知识点:
1、querySelector 通过选择器字符串匹配文档中的元素,并返回第一个匹配的元素
2、scrollIntoView 是一个 DOM 方法,它使得元素滚动到可视区域内。


【Antdv】表单校验失败时将页面滚动到错误消息所在位置
作者
早饭君
许可协议
CC BY 4.0
发布于
2023-09-19
修改于
2025-05-08
Bonnie image
尚未登录