Element ui plus Form 表单验证失败后，自动滚动到失败的位置（validate）（scrollToField）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element ui plus Form 表单验证失败后，自动滚动到失败的位置（validate）（scrollToField）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

对于表单验证失败后，想自动定位到失败的位置

scrolltofield,javascript,html,前端

1.首先发起表单验证，失败后拿到组件失败的回调参数

valid：返回一个boolean类型

ValidateFieldsError：返回失败的组件信息，如下

scrolltofield,javascript,html,前端

当valid为false时，利用scrollToField() 滚动到相应的错误位置处

代码如下：文章来源地址https://www.toymoban.com/news/detail-516257.html

const submitForm=()=> {      
        proxy.$refs["postRef"].validate((valid,ValidateFieldsError) => {
            console.log(ValidateFieldsError);
            if (valid) {
                state.submitLoading=true
                state.form.creater=parseInt(store.getters.userInfo[0].userId)
                if(state.form.inDate){
                    state.form.beginTime=state.form.inDate[0]
                    state.form.endTime=state.form.inDate[1]
                }
                addPost(state.form).then(response => {
                    ElMessage.success("新增成功");
                    state.open = false;
                    state.submitLoading=false
                    getList();
                });    
            }else{
                Object.keys(ValidateFieldsError).forEach((key,i) => {
                    const propName=ValidateFieldsError[key][0].field
                    if(i==0){
                        proxy.$refs["postRef"].scrollToField(propName)
                    }
                })
            }
        });
    }

到了这里，关于Element ui plus Form 表单验证失败后，自动滚动到失败的位置（validate）（scrollToField）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！