自定義了一個(gè)表單組件，但是想用上驗(yàn)證功能不知道如何下手了，求大佬幫忙看看。
這是我定義的控件file-choose，然后用rules不生效

<el-form-item label="選擇目錄" prop="filePath">
  <file-choose v-model="form.filePath"></file-choose>
</el-form-item>

rules: {
  filePath: [
    {required: true, message: '不能為空'}
  ]
},

這是控件的效果圖,現(xiàn)在就是想實(shí)現(xiàn)對(duì)輸入框的內(nèi)容進(jìn)行校驗(yàn)

控件的代碼

<template>
  <div>
    <el-button type="primary" class="file-choose-button" @click="visible=true">選擇</el-button>
    <el-input class="file-choose-input" :value="value" @dblclick.native="visible = true"></el-input>
    <el-dialog title="目錄瀏覽" :visible="visible" @close="visible = false">
      <el-tree :data="files"
               :props="props"
               :load="loadChild"
               :highlight-current="true"
               node-key="path"
               lazy
               ref="tree"
               class="file-choose-tree"></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary"
                   @click="visible = false;$emit('input',$refs.tree.getCurrentNode().path)">確 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    data() {
      return {
        visible: false,
        files: [],
        props: {
          isLeaf: 'last'
        }
      }
    },
    props: ['value', 'model'],
    methods: {
      loadChild(node, resolve) {
        this.$http.post('api/getChildDirList',
          {
            path: node.data.path || '',
            model: this.model || 'dir',
          })
        .then((response) => {
          let result = response.data;
          if (result.status == 200) {
            if (result.data) {
              resolve(result.data);
            }
          } else {
            this.$message(result.msg);
          }
        });
      }
    }
  }
</script>

要怎么加上驗(yàn)證的功能呢？