单独使用el-form-item，如何触发rules

当单独使用`el-form-item`时，你可以通过`v-model`绑定数据，并监听`@keyup`、`@input` 或者 `@blur` 事件来触发规则校验。下面是一个基础的例子：

<template>
  <el-form :model="formData">
    <el-form-item
      label="邮箱"
      :prop="'email'"
      :rules="['required', { pattern: /^[\w\.-]+@[\w\.-]+\.\w+$/ }]"
      @blur="validateField('email')"
    >
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { computed } from 'vue';

// 示例数据
const formData = reactive({
  email: ''
});

// 验证函数
function validateField(prop) {
  if (prop && formData[prop]) {
    const fieldRules = formData.rules || {}; // 获取当前表单的验证规则
    fieldRules[prop].forEach(rule => {
      // 执行规则验证，如自定义校验函数
      if (!rule(rule)) {
        console.log(`验证失败：${prop} - ${rule.message}`);
      }
    });
  }
}

// 假设有一个全局的校验函数
function isEmailValid(email) {
  return /^[\w\.-]+@[\w\.-]+\.\w+$/.test(email);
}

// 更新规则验证时，例如从组件外部传递新的规则
onMounted(() => {
  formData.rules = {
    email: [isEmailValid, { message: '请输入有效的邮箱地址' }]
  };
});
</script>

在这个例子中，当`email`输入框失去焦点时，`blur`事件会被触发，然后`validateField`函数会执行`email`字段的验证规则。