element使用onValidate校验指定字段

Element UI是一个流行的Vue.js组件库，其中的`<el-form>`用于构建表单，并提供了一套丰富的验证功能。`onValidate`属性是一个函数，它会在用户提交表单前对表单数据进行校验。你可以在这个函数中定义你需要的字段级验证规则。

例如：

<template>
  <el-form :model="form" :inline="true" @validate="handleValidate">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
      <el-form-item-explain :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"></el-form-item-explain>
    </el-form-item>
    <!-- 更多字段... -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
      rules: { // 定义全局验证规则
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
      }
    };
  },
  methods: {
    handleValidate(form) {
      this.rules = {}; // 如果需要针对特定字段定制验证，可以在此清除之前的全局规则
      // 这里可以根据form对象检查每个字段是否满足验证条件，如果失败，form.validateField(field)将返回false阻止提交
      if (!form.validateFields()) return false; // 可以在这里处理验证错误
      // 提交表单的逻辑...
    },
    submitForm() {
      this.$refs.form.submit(); // 表单提交
    },
    resetForm() {
      this.form.resetFields(); // 清空并重置所有字段的值
    },
  }
};
</script>

在这个例子中，`handleValidate`函数会检查每个字段是否通过验证。如果你想只校验某个特定字段，可以在`handleValidate`内部动态地设置`rules`对象，如上所示。