最近项目中遇到了表单提交，需要根据选择框进行表单的动态校验，一般的教程都是使用:rules进行表单校验，但是如果表单的项是动态的呢，那么我们就不太好写这个rules规则了。这个时候可以使用多个rules校验规则，再根据需要动态选择使用哪种校验规则。

例如：这里的一个dialog提交表单，里面有需要根据选择框来确定是否校验驳回原因和推送内容。

<el-dialog
        title="审核"
        :visible.sync="centerDialogVisible"
        center>
  <el-form ref="checkData"  :model="checkData" :rules="rulesList">
    <el-form-item label="是否通过" prop="state">
      <el-select v-model="checkData.state" placeholder="请选择">
        <el-option
                v-for="item in stateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item  prop="rejectReason" label="驳回原因" v-if="checkData.state == 'CHECK_FILED'">
        <el-input  v-model="checkData.rejectReason" type="textarea" class="input-style"  placeholder="请输入驳回原因"/>
    </el-form-item>
    <el-form-item  prop="pushContent" label="推送内容">
      <el-input  v-model="checkData.pushContent" type="textarea" class="input-style" placeholder="请输入推送内容"/>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
  <el-button type="primary" @click="centerDialogVisible = false">取 消</el-button>
  <el-button type="primary" @click="handleSubmit" >确 定</el-button>
  </span>
</el-dialog>

这个时候我们该怎么处理呢？

1,添加两个rules规则

successRules: {
  state: [
     {required: true, message: '请选择审核状态', trigger: 'change'}
  ],
  pushContent: [     {required: true, message: '请输入推送内容', trigger: 'blur'}
  ]
},
failedRules: {    state: [
        {required: true, message: '请选择审核状态', trigger: 'change'}
    ],
    rejectReason: [        {required: true, message: '请输入驳回原因', trigger: 'blur'}
    ]
}

2,添加一个rules规则选择方法（注意，这里一定要放到vue的计算属性里面，否则不生效）

computed: {
  rulesList: function() {
    if (this.checkData.state) {
      if (this.checkData.state === 'CHECK_SUCCESS') {
        return this.successRules
      }        return this.failedRules
    }else {      return this.successRules;
    }  }
},

3，在需要校验的form上加上校验规则 :rules="rulesList"

即可动态根据checkData.state选择框选择的值来选择不同的校验规则中去。

4，或者我看也有人说可以使用三元表达式来确定使用哪个路由规则，但是我尝试了下，好像没起作用，可能是我漏了哪里，也请谁弄出来了告诉我一下。
        方法如下：

<el-form ref="checkData"  :model="checkData" :rules="this.checkData.state === 'CHECK_SUCCESS' ? this.successRules : this.failedRules">