vue表單校驗 自定義表單 post請求表單

剛學習VUE表單校驗

參考餓了麼ui官方資料

​​​ https://element.eleme.cn/#/zh-CN/component/form​​

<template>
 <el-dialog
        title="導出組織者資料"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
      <el-form ref="exportForm" :rules="rules" :model="exportForm" label-width="80px" class="demo-ruleForm">

        <el-form-item label="開始時間" prop="date1">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="選擇日期"
                            v-model="exportForm.date1" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="結束時間" prop="date2">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="選擇日期"
                            v-model="exportForm.date2" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('exportForm')">取 消</el-button>
        <el-button type="primary" @click="onSubmit('exportForm')">确 定</el-button>
      </span>
    </el-dialog>
</template>
<script>
export default {

data() {

    var validateTime = (rule, value, callback) => {

      if (value === '') {
        callback(new Error('時間不能為空'));
      } else {
        if (value !== '') {

          const time1 = this.exportForm.date1;
          const time2 = this.exportForm.date2;
          if (time2 <= time1) {
            callback(new Error('開始時間大于結束時間'));
          } else {
            callback();
          }
        }
      }
    };
  return {
      exportForm: {
        date1: '',
        date2: '',
      },
  rules: {
        date1: [
          {required: true, message: '請選擇時間', trigger: 'blur'}
        ],
        date2: [
          {required: true, message: '請選擇時間', trigger: 'blur'},
          {validator: validateTime, trigger: 'blur'}
        ]
      },
},

  }, 
  methods:{
 onSubmit(exportForm) {
      this.$refs[exportForm].validate((valid) => {
        if (valid) {
          this.$message.closeAll();
          this.$message.info("導出中，請稍後~");
          this.onexcel()

        } else {
          console.log('error submit!!');
          return false;
        }
      });
      //
    },

    resetForm(exportForm) {
      this.dialogVisible = false;
      this.$refs[exportForm].resetFields();
    } ,

}
  }
  </script>