el-form validateField怎么用

`el-form` 是 Element UI 中的一个组件，用于快速构建表单。`validateField` 是 `el-form` 组件提供的一个方法，用于验证表单中特定字段的输入值是否符合要求。

你可以通过以下代码来使用 `validateField` 方法：

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" @blur="validateUsername" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="formData.password" @blur="validatePassword" />
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validateUsername() {
      this.$refs.form.validateField('username')
    },
    validatePassword() {
      this.$refs.form.validateField('password')
    }
  }
}
</script>

上面的代码中，我们首先定义了一个 `el-form` 组件，其中包含了两个 `el-form-item` 组件，分别用于输入用户名和密码。对于每个表单字段，我们都定义了相应的验证规则，以确保用户输入的数据符合要求。

在方法部分，我们定义了 `validateUsername` 和 `validatePassword` 两个方法，用于分别验证用户名和密码字段的输入值。在这两个方法中，我们通过 `$refs` 来获取到 `el-form` 组件的引用，并调用其 `validateField` 方法来验证特定的表单字段。

在这个例子中，我们使用了 `trigger: 'blur'` 来指定触发验证的事件为失去焦点事件。如果用户输入的数据不符合规则，就会弹出相应的错误提示。如果输入的数据符合规则，就可以提交表单了。