element ui动态表单 + 自定义校验规则

背景描述：

表单如下图所示：

 

 如上图所示，我们有一个动态表单（区域部分） - 在其他页面可以动态添加的，我们的校验规则是：

时间字段必填，大于1小于3600

 DOM结构，因为 el-card 是动态生成的，重点在prop属性和rules：

<el-card class="box-card" v-for="(item,index) in ylwForm.area">
                <div slot="header" class="clearfix">
                  <span>{{$t('public.Region')+' '+(index+1)}}</span>
                </div>
                <div>
                  <el-form-item :label="$t('page.behaviorDetection.time')"
                                  :prop="'area.' + index + '.Duration'"
                                :rules="LegacyRules.validateTime">
                    <el-input v-model.number="item.Duration" class="width200"><i slot="append" class="labelSuffix">{{$t('public.second')}}</i></el-input>
                    <el-tooltip class="item" effect="dark" :content="$t('page.behaviorDetection.ylwTips')" placement="top-start">
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                  </el-form-item>
                </div>
              </el-card>

JavaScript，项目内用到了国际化（this.i18n）：

var validateTimeRule = (rule, value, callback) => {
          console.log(value);
          if (value === '') {
            // 请输入时间
            callback(new Error(this.i18n.t('page.behaviorDetection.Please_enter_the_time')));
          } else if (value<1||value>3600){
            // 大于1，小于3600
            callback(new Error(this.i18n.t('page.behaviorDetection.noDataTips5')));
          }else{
            callback();
          }
        };

LegacyRules:{
            validateTime:{validator: validateTimeRule,trigger: "change"}
}