element-plus获取表单验证信息节点

在 Element Plus 中获取表单验证信息节点，可以通过表单组件的 `validate()` 方法进行表单验证，该方法返回一个 Promise 对象，可以使用 `then()` 方法获取验证结果。例如：

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          // 表单验证通过
          // 获取表单数据
          const formData = this.form;
          // ...
        } else {
          // 表单验证失败，输出错误信息
          console.log(this.$refs.form.validateState)
          console.log(this.$refs.form.validationMessage)
        }
      })
    }
  }
}
</script>

其中，`this.$refs.form.validateState` 返回一个对象，包含所有表单项的验证状态信息，`this.$refs.form.validationMessage` 返回一个对象，包含所有表单项的错误信息。如果需要获取单个表单项的验证状态和错误信息，可以使用该表单项的 `validateState` 和 `validationMessage` 属性。例如：

const usernameFormItem = this.$refs.form.$refs.username; // 获取用户名表单项组件
const usernameValidState = usernameFormItem.validateState; // 获取用户名表单项的验证状态
const usernameErrorMsg = usernameFormItem.validationMessage; // 获取用户名表单项的错误信息