怎么修改el-from表单验证提示信息位置

在 `element-ui` 中，可以通过 `el-form` 组件的 `:label-position` 属性来控制表单项的标签和输入框的位置。当 `:label-position` 的值为 `top` 时，表单项的标签会在输入框上方显示，而表单项的验证提示信息会在输入框下方显示。当 `:label-position` 的值为 `left` 或者 `right` 时，表单项的标签会在输入框左侧或右侧显示，而表单项的验证提示信息会在输入框的右侧或左侧显示。

除此之外，还可以通过 `el-form-item` 组件的 `prop` 属性来指定表单项的验证规则，当输入框中的内容不符合规则时，会显示对应的验证提示信息。可以通过 `el-form-item` 组件的 `:error` 属性来控制是否显示提示信息，以及 `error` 的值来控制提示信息的具体内容。

下面是一个例子，展示了如何在 `el-form` 中控制表单验证提示信息的位置：

<template>
  <el-form :label-position="labelPosition" ref="form" :model="form">
    <el-form-item label="用户名：" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码：" prop="password">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: 'top',
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('验证通过');
        } else {
          alert('验证失败');
        }
      });
    }
  }
};
</script>

在这个例子中，我们使用了 `el-form` 和 `el-form-item` 组件来创建了一个简单的表单，其中每个输入框都有对应的 `prop` 属性来指定验证规则。当用户提交表单时，我们调用了 `validate` 方法来验证表单内容，并根据验证结果显示对应的提示信息。可以通过修改 `labelPosition` 属性来调整表单项的标签和输入框的位置。