iview 表单自定义验证规则判断两个输入框逻辑且调用后端接口

老规矩先上效果图:

需求:表名+应用名不能重复
思路:具体后端判断逻辑 前端负责传值就行

实现
一、表名+应用名 输入框

<Row :gutter="4">
     <FormItem label="" :label-width="100">
         <Col span="10">
             <!-- 表名 -->
             <FormItem label="表名" prop="tableName">
                 <Input type="text" v-model="costAllocationForm.tableName"></Input>
             </FormItem> 
         </Col>
         <Col span="10">
             <!-- 应用名 -->
             <FormItem label="应用名" prop="applicationName">
                 <Input type="text" v-model="costAllocationForm.applicationName"></Input>
             </FormItem>
         </Col>
     </FormItem>
 </Row>

二、表单验证 ruleValidate

ruleValidate: {
    tableName: [
        {required: true, message: '请输入表名', trigger: 'blur'},
        {validator: validateTableName, trigger: 'blur'}
    ],
    applicationName: [
        {required: true, message: '请输入应用名', trigger: 'blur'},
        {validator: validateApplicationName, trigger: 'blur'}
    ]
}

二、自定义验证规则 (调用接口)

var validateTableName = (rule, value, callback) => {
     if(this.costAllocationForm.applicationName){
           this.$refs.costAllocationForm.validateField('applicationName');
       }
       callback();
   };
var validateApplicationName = (rule, value, callback) => {
     if(this.costAllocationForm.tableName){
         var self = this;
         self.$api.apportion.checkApportionIsExist({
             "id": parseInt(this.$route.query.id),
             "tableName": this.costAllocationForm.tableName,
             "applicationName": this.costAllocationForm.applicationName
         })
         .then(res => {
             if (res.status == 200) {
                 callback();
             }
         })
         .catch(err => {
             if (err.status == 400) {
                 callback(new Error('表名+应用名不能重复!'));
             }
         })
     }else{
         callback();
     }
 };

这段代码写在data（）里面然后要把this赋值给self 不然找不到v-model里的内容。