el-form validate 校验信息显示在输入框右上并距离20px

在Element UI的`el-form`组件中，你可以通过设置`rules`属性来定义校验规则，并使用`trigger`选项来指定何时显示校验提示。默认情况下，验证失败的信息会在输入框右侧显示一个小图标。要改变这个提示的位置，可以在验证规则对象里添加`message`属性，并结合CSS调整样式。

例如，如果你想将提示信息放在输入框的右上方，距离边框20像素，你可以这样做：

<el-form :model="form" :rules="rules" class="custom-form">
  <!-- ... -->
</el-form>

<style>
.custom-form .el-form-item__control {
  position: relative;
}

.custom-form .el-form-item__control .el-form-item__help {
  position: absolute;
  top: calc(50% - 10px); /* 10px is half of your desired distance */
  right: 20px; /* 20px is the distance from input border */
  transform: translateY(-50%);
  color: red; /* or any other color you prefer */
}
</style>

<script>
export default {
  data() {
    return {
      form: {}, // Your form data
      rules: { /* Your validation rules with message like this: */
        requiredField: [
          { required: true, message: '此项必填', trigger: ['blur', 'change'] },
          { message: '', placement: 'right', offset: '20px 0' } // The custom placement and offset
        ]
      }
    };
  }
};
</script>

这里，`message`属性用于设定提示信息的文字，`placement`设置为`right`表示放置在右边，`offset`则是调整提示框相对于输入框的距离。