遇见超长表单,提交校验失败,我们希望页面可以滚动到第一个错误消息的所在位置。
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 方法,它使得元素滚动到可视区域内。