实现思路
1. 当校验不通过时收集所有未通过字段项的提示信息,将其通过 push 方法添加到定义好的数组中 messageArr
2. 通过 proxy.$refs[keys[0]] 获取到首个字段校验不通过的 dom ,利用 Object.prototype.toString.call() 方法判断获取到的 dom 的类型是否为对象的字符串形式
3. 最后通过 scrollIntoView 方法滚动到首个不通过校验字段项,光标也移动到首个不通过校验字段项。
注意
必填字段项的 el-form-item 需要添加 ref ,作用主要是用来定位(ref 的值建议与 prop 同名)。
代码
<el-form :rules="rules" :model="form" ref="formRef">
<el-form-item prop="loginPwd" ref="loginPwd" label="密码">
<el-input
v-model="form.loginPwd"
placeholder="请输入密码"
maxlength="14"
ref="loginPwd"
></el-input>
</el-form-item>
</el-form>
// 提交表单
async function onSubmit() {
errorArr.value = [];
await formRef.value.validate(async (valid, fields) => {
if (valid) {
// 通过校验
} else {
// 未通过校验
let keys = Object.keys(fields);
let messageArr = [];
keys.forEach((item) => {
let obj = fields[item];
messageArr.push(obj[0].message);
});
// 获取未通过校验的第一项的dom
let dom = proxy.$refs[keys[0]];
if (Object.prototype.toString.call(dom) !== "[object Object]") {
dom = dom[0];
}
// 定位代码
dom.$el.scrollIntoView({
block: "center",
behavior: "smooth",
});
setTimeout(() => {
// 将光标移动到未通过校验的第一项
proxy.$refs[keys[0]].focus();
}, 500);
// 页面提示未通过校验项,并以逗号分隔
proxy.$message.error(messageArr.join(","));
}
});
}