element-ui 表单获取焦点时进行校验

在 element-ui 的表单组件中，可以通过设置 `validateOnRuleChange` 属性来实现获取焦点时进行校验。当设置为 `true` 时，表单项在获取焦点时会立即校验，而不是等到表单提交或手动调用校验方法时才开始校验。

例如，以下代码展示了一个 element-ui 表单组件，其中的输入框在获取焦点时会进行校验：

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item prop="name" label="姓名">
      <el-input v-model="form.name" :validate-on-rule-change="true"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      },
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，执行提交逻辑
        } else {
          // 表单校验未通过，提示用户
        }
      });
    },
  },
};
</script>

在上述代码中，我们将 `validateOnRuleChange` 属性设置为 `true`，即在输入框获取焦点时进行校验。同时，我们设置了 `rules` 属性来定义表单项的校验规则，其中 `trigger: 'blur'` 表示在表单项失去焦点时进行校验。在提交表单时，我们使用 `this.$refs.form.validate()` 方法来手动触发表单校验，如果校验通过，则执行提交逻辑。