Vue3 el-form 当有必填项未填的时候，提交表单时光标自动移动到第一个未填项且出现提示信息

实现思路

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(","));
    }
  });
}