Vue3+Element Plus表单验证：显示后端错误消息（手动触发错误状态）

需求

用户登陆失败后，后端接口返回的错误消息需要显示在input框下，如图：

思路

利用Form item属性error，声明错误消息变量，在el-input添加属性error，属性error后面跟上错误消息变量，后端返回的错误信息赋值给错误消息变量。

实现

          <el-form ref="ruleFormRef" :model="loginFormData" :rules="rules" class="loginForm">
            <el-form-item prop="UserName" class="mb-32" :error="userError">
              <el-input
                v-model.number="loginFormData.UserName"
                class="fs-22 text-light-grey-5"
                :prefix-icon="User"
                clearable
                placeholder="请输入账号"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="Password" class="mb-72" :error="passwordError">
              <el-input
                v-model="loginFormData.Password"
                type="password"
                class="fs-22 text-light-grey-5"
                autocomplete="off"
                :prefix-icon="Lock"
                show-password
                placeholder="请输入密码"
              />
            </el-form-item>
            <el-form-item class="mb-66">
              <el-button type="primary" @click="submitForm()"> 登录 </el-button>
            </el-form-item>
          </el-form>
          
          <script lang="ts" setup>
          import { reactive, ref } from 'vue'
          import { useUserStore } from '@/pinia/modules/user'
          
          const ruleFormRef = ref<FormInstance>()
          const userError = ref('')
          const passwordError = ref('')
          const userStore = useUserStore()
          const rules = reactive<FormRules>({
            Password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            UserName: [{ required: true, message: '请输入账号', trigger: 'blur' }]
          })
          const loginFormData = reactive({
            UserName: 'admin',
            Password: '12345678',
          })
          const login = async () => {
            return await userStore.loginIn(loginFormData)
          }
          const submitForm = () => {
              ruleFormRef.value.validate(async (v) => {
                if (v) {
                  try {
                    await login()
                  } catch (e) {
                    const { error_description: errorInfo } = e
                    if (errorInfo === '您的密码不正确！') {
                      passwordError.value = errorInfo
                    } else {
                      userError.value = errorInfo
                    }
                  }
                } else {
                  ElMessage({
                    type: 'error',
                    message: '请正确填写登录信息',
                    showClose: true
                  })
                  return false
                }
              })
            }
          <script>