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>

这样就完成了 其实蛮简单的 可以自定义一些规则，或者通过post请求像服务器进行提交验证规则，大概跟这个一样 稍微改动一些代码

强烈推荐饿了么UI组件 非常好用
​​​ https://element.eleme.cn/#/zh-CN/​​ 加油好好学习