elementui form表单 自定义校验规则

<template>
<!-- 新增/修改进度计划 -->
<div class="addPlan" id="quxiao">
  <el-form :model="dataModel" :rules="rules" ref="addPlan" label-width="135px">
    <el-form-item label="项目名称：" prop="projectIdArry">
        <el-cascader :options="projectList" v-model="dataModel.projectIdArry" :props="defaultProp" size="small" placeholder="请选择项目" style="width:100%;" @change="changeProject" clearable :disabled="iscompany"></el-cascader>
    </el-form-item>
    <el-form-item label="选择统计项：" prop="visualStatId">
         <!-- <el-select filterable   size="small" v-model="dataModel.visualStatId" placeholder="请选择形象进度统计项"  style="width:100%;"  @change="changeVisu" clearable>
            <el-option v-for="(item,index) in statisList" :label="item.statName" :value="item.id" :key="index" ></el-option>
        </el-select> -->
        <el-cascader id="testid" :options="statisList" v-model="dataModel.visualStatId" :props="defaultProp1" size="small" placeholder="选择统计项" style="width:100%;" @change="changeVisu" clearable ></el-cascader>
        <span v-if="visualStatObject&&JSON.stringify(visualStatObject) != '{}'" style="color:rgb(64, 158, 255);">分部分项：{{visualStatObject.subFullName}}</span>
        <div  v-if="visualStatObject&&JSON.stringify(visualStatObject) != '{}'" class="visualSpan">
          <span>预算工程量：{{visualStatObject.budgetTotal}}{{visualStatObject.unitName}}</span>
          <span>已完成工程量：{{visualStatObject.finishBudget}}{{visualStatObject.unitName}}</span>
          <span>剩余工程量：{{(visualStatObject.budgetTotal - visualStatObject.finishBudget).toFixed(2)}}{{visualStatObject.unitName}}</span>
        </div> 
    </el-form-item>
    <el-form-item label="任务名称：" prop="planName">
        <el-input v-model="dataModel.planName" size="small"></el-input>
    </el-form-item>
    <el-form-item label="开始时间：" prop="planStartTime">
         <el-date-picker format="yyyy 年 MM 月 dd 日"  size="small" v-model="dataModel.planStartTime" type="date" placeholder="选择日期" style="width:100%;"></el-date-picker>
    </el-form-item>
    <el-form-item label="完成时间：" prop="planEndTime">
        <el-date-picker  :picker-options="pickerOptions1"  format="yyyy 年 MM 月 dd 日"  size="small" v-model="dataModel.planEndTime " type="date" placeholder="选择日期" style="width:100%;"></el-date-picker>
    </el-form-item> 
    <el-form-item label="计划完成工程量：" prop="planFinish">
        <el-input v-model="dataModel.planFinish " size="small"></el-input>
    </el-form-item>
    <el-form-item label="跟踪频率：" prop="trackCycle">
         <el-select size="small" v-model="dataModel.trackCycle" placeholder="请选择跟踪频率：" clearable style="width:100%;">
            <el-option v-for="(item,index) in trackList" :label="item.name" :value="item.number" :key="index"></el-option>
         </el-select>
    </el-form-item>
    <el-form-item label="施工负责人：" prop="respUser">
         <el-select size="small" v-model="dataModel.respUser" placeholder="请选择负责人" clearable style="width:100%;">
            <el-option v-for="(item,index) in userList" :label="item.trueName" :value="item.id" :key="index"></el-option>
         </el-select> 
    </el-form-item>
  </el-form>
  <div class="clickBtn">
    <el-button @click="close"  size="small">取消</el-button>
    <el-button @click="commit" size="small" type="primary" :disabled="isSuccess">保存</el-button>
  </div>
</div>
</template>

<script>
import { addConstructPlan,updateConstructPlan,getConstructPlanById,getVisualStatItemListTree,listUserInfo,getMonthAddoption} from "../api/system_interface.js";
import { mapState, mapActions } from 'vuex'
export default {
  name: "addPlan",
  data() {
      var valiNumberPass = (rule, value, callback) => {
        let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
         if (value === '') {
          callback(new Error('请输入计划完成工程量'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入数字'));
        } else {
          callback();
        }
      };
    return {
      dataModel: {
        projectId: [],
        planEndTime: "",
        planFinish: null,
        planName: "",
        planStartTime: "",
        respUser: null,
        trackCycle: null,
        visualStatId: null,
        projectIdArry:[]
      },
      visualStatObject:null,
      iscompany:false,
      isSuccess:false,
      statisList:[],
      //数据校验
      rules: {
        projectIdArry: [{ required: true, message: "请选择项目", trigger: "blur" }],
        visualStatId: [{ required: true, message: "请选择统计项", trigger: "blur" }],
        planName: [{ required: true, message: "请输入任务名称：", trigger: "blur" }],
        planStartTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
        planEndTime: [{ required: true, message: "请选择完成时间", trigger: "blur" }],
        planFinish: [{ required: true, validator:valiNumberPass, trigger: "change" }],
        trackCycle: [{ required: true, message: "请选择跟踪频率", trigger: "blur" }],
        respUser: [{ required: true, message: "请选择负责人", trigger: "blur" }]

      },
      
      radio: "",
      progressList: [],
      defaultProp: {
        children: "child",
        label: "name",
        value: "id"
      },
      defaultProp1:{
        children: "child",
        label: "regionName",
        value: "id"
      },
      userList:[],
  
      pickerOptions1: {
           disabledDate:(time) => {
            var date =  new Date(this.dataModel.planStartTime);
            var y = 1900+date.getYear();
            var m = "0"+(date.getMonth()+1);
            var d = "0"+date.getDate();
            var satrtTime = y+"-"+ m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
            var arr = satrtTime.split("-"); //将获取的时间按“-”拆分成字符串数组
            var year = parseInt(arr[0]); //开分字符串数组的第一个地址的内容是年份
            var month = parseInt(arr[1]); //开分字符串数组的第二个地址的内容是月份
            var prevmonthLastday = (new Date(year, month, 1)).getTime() - 86400000;
            var valueData = new Date(prevmonthLastday); //结束时间
            return time.getTime() <this.dataModel.planStartTime || time.getTime() > valueData;
          }
      }
    };
  },
  computed: {
    ...mapState([
     'projectList'    
    ]),
  },
  methods: {

    ...mapActions([
        'changeListChOrgInfo'
    ]),






  




    
  }
};
</script>