在使用element-ui的表单验证文本框的时候，怎么获取el-form-item里面的数据

你可以通过 `$refs` 属性来获取 `el-form-item` 组件的数据。首先，在 `el-form-item` 中设置 `ref` 属性，如下所示：

<el-form-item label="姓名" prop="name" ref="nameFormItem">
  <el-input v-model="form.name"></el-input>
</el-form-item>

然后在组件中，通过 `$refs` 属性来访问 `el-form-item` 组件的数据：

export default {
  data() {
    return {
      form: {
        name: ''
      }
    }
  },
  methods: {
    submitForm() {
      const name = this.$refs.nameFormItem.formItem.name // 获取name字段的值
      console.log(name)
    }
  }
}

在上面的示例中，我们通过 `$refs` 属性获取了 `el-form-item` 组件，并获取了其中 `name` 字段的值。注意，要访问 `el-form-item` 组件的数据，需要使用 `formItem` 属性。

相关问题

element-ui使用v-for循环el-form-item 写一个组件

以下是一个使用element-ui的v-for循环el-form-item的组件代码示例：

<template>
  <el-form>
    <el-form-item v-for="(field, index) in fields" :key="index" :label="field.label">
      <el-input v-model="field.value" :placeholder="field.placeholder"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    fields: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
};
</script>

在上述代码中，我们使用了一个props属性来接收一个名为fields的数组，该数组中包含了每个表单项的label、placeholder和value属性。我们使用v-for循环该数组，并将其作为el-form-item的子组件，每个el-form-item包含了一个el-input组件，用于输入表单项的值。最后，我们将整个表单包裹在一个el-form组件中。

使用该组件时，我们只需要传递一个包含所有表单项的数组即可：

<template>
  <my-form :fields="fields"></my-form>
</template>

<script>
import MyForm from "@/components/MyForm.vue";

export default {
  components: {
    MyForm,
  },
  data() {
    return {
      fields: [
        {
          label: "姓名",
          placeholder: "请输入姓名",
          value: "",
        },
        {
          label: "邮箱",
          placeholder: "请输入邮箱",
          value: "",
        },
        {
          label: "电话",
          placeholder: "请输入电话",
          value: "",
        },
      ],
    };
  },
};
</script>

在上述代码中，我们引入了刚才创建的MyForm组件，并将fields数组传递给该组件的props属性。fields数组中包含了三个表单项，分别是姓名、邮箱和电话。我们可以通过该组件来快速创建包含多个表单项的表单。

element-ui表单验证

element-ui提供了一套表单验证的方案，可以通过设置rules属性来实现。具体步骤如下：

1. 在表单元素上设置prop属性，该属性值为表单元素的字段名。
2. 在表单元素上设置rules属性，该属性值为一个数组，数组中每个元素都是一个验证规则对象。
3. 验证规则对象包含两个属性：validator和message。validator是一个函数，用于验证表单元素的值是否符合规则；message是一个字符串，用于在验证失败时显示错误信息。

例如，验证一个输入框中的值是否为数字：

<el-form-item label="数字">
  <el-input v-model="number" prop="number" :rules="[{ validator: validateNumber, message: '请输入数字' }]"></el-input>
</el-form-item>

其中，validateNumber函数的实现如下：

methods: {
  validateNumber(rule, value, callback) {
    if (!value) {
      callback(new Error('请输入数字'));
    } else if (!/^\d+$/.test(value)) {
      callback(new Error('请输入整数'));
    } else {
      callback();
    }
  }
}