标签：vue rules value ant callback design message true model

ant-design-vue对起始时间的校验

由于要添加对起始时间的校验，项目中无法直接使用this.model.value获取当前的字段，因此需要j-date上添加一组v-model，保证可以获取到当前字段的值，再对其进行校验。（当前也获取不到this.form的值）

添加起始时间的自定义校验

这些方法中的model值是从上面v-model中获取到的

至此校验就写好了

不过当前存在一个问题，控制台一直有报错，但是未找到合理 的解决方法

如有解决报错方法，还请指教。

附上源码：

<template>
  <a-modal :title="title" :width="800" :visible="visible"
           :maskClosable="false" :confirmLoading="confirmLoading"
           :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
           @ok="handleOk" @cancel="handleCancel" cancelText="关闭">

    <div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
          <a-row :gutter="24">
            <a-col :md="12" :sm="20">
              <a-form-item label="活动名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['name',validatorRules.name]" :disabled="disableSubmit"
                         placeholder="请输入活动名称"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="20">
              <a-form-item label="活动类别" :labelCol="labelCol" :wrapperCol="wrapperCol" :required='true'>
                <a-tree-select  placeholder="请选择活动类别"  :treeData="activityType" :disabled="disableSubmit" v-model='model.typeid'>
                </a-tree-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-col :md="17" :sm="20">
              <a-form-item label="活动开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date v-model='model.startDate' v-decorator="['startDate',validatorRules.startDate]" :trigger-change="true" style="width: 100%"
                        :show-time='true' date-format='YYYY-MM-DD HH:mm:ss' placeholder="请选择活动开始时间" :disabled="disableSubmit"/>
              </a-form-item>
            </a-col>
            <a-col :md="17" :sm="20">
              <a-form-item label="活动结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date v-model='model.endDate' v-decorator="['endDate',validatorRules.endDate]" :trigger-change="true" style="width: 100%"
                        :show-time='true' date-format='YYYY-MM-DD HH:mm:ss' placeholder="请选择活动结束时间" :disabled="disableSubmit"/>
              </a-form-item>
            </a-col>
          <a-col :md="17" :sm="20">
            <a-form-item label="报名开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date v-model='model.enrollTime' v-decorator="['enrollTime',validatorRules.enrollTime]" :trigger-change="true"
                      :show-time='true' date-format='YYYY-MM-DD HH:mm:ss' style="width: 100%" placeholder="请选择报名开始时间" :disabled="disableSubmit" />
            </a-form-item>
          </a-col>
          <a-col :md="17" :sm="20">
            <a-form-item label="报名结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date v-model='model.enrollEndTime' v-decorator="['enrollEndTime',validatorRules.enrollEndTime]" :trigger-change="true"
                      :show-time='true' date-format='YYYY-MM-DD HH:mm:ss' style="width: 100%" placeholder="请选择报名结束时间" :disabled="disableSubmit" />
            </a-form-item>
          </a-col>
          <a-row :gutter="24">
            <a-col :md="12" :sm="20">
              <a-form-item label="参与人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['joinNumber',validatorRules.joinNumber]" :disabled="disableSubmit"
                         placeholder="请输入参与人数"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="20">
            <a-form-item label="活动简介" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea v-decorator="['summary',validatorRules.summary]" :disabled="disableSubmit"
                          placeholder="请输入活动简介"></a-textarea>
            </a-form-item>
            </a-col>

          </a-row>
          <a-row :gutter="24">
            <a-col :md="12" :sm="20">
            <a-form-item label="是否直播" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['liveFlag',validatorRules.liveFlag]" :trigger-change="true"
                                 dictCode="activity_liveFlag"
                                 placeholder="活动是否直播：0:否;1:是" :disabled="disableSubmit"/>
            </a-form-item>
            </a-col>
            <a-col :md="12" :sm="20">
              <a-form-item label="活动奖励" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['reward',validatorRules.reward]" :disabled="disableSubmit"
                         placeholder="请输入活动奖励"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="12" :sm="20">
              <a-form-item label="是否免费" :labelCol="labelCol" :wrapperCol="wrapperCol" :required='true'>
                <j-dict-select-tag type="list" v-model='model.free'
                                   dictCode="activity_free"
                                   placeholder="请选择是否免费" :disabled="disableSubmit"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="20">
              <a-form-item v-if='model.free ==0' label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['price',validatorRules.price]"
                         placeholder="请输入活动金额" :disabled="disableSubmit"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="12" :sm="20">
              <a-form-item label="活动地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['address',validatorRules.address]" :disabled="disableSubmit"
                         placeholder="请输入活动地址" ></a-input>
              </a-form-item>
            </a-col>
          </a-row>

            <a-form-item label="上传图片或视频地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload v-decorator="['media',validatorRules.media]" isMultiple :disabled="disableSubmit"></j-image-upload>
            </a-form-item>
            <a-form-item label="活动描述" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <j-editor v-model="describe.value" :disabled="disableSubmit"/>
            </a-form-item>
        </a-form>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import {addActivity, editGiftCategory, getActivityTypeList} from '@/api/api'
import Icons from './icon/Icons'
import pick from 'lodash.pick'
import store from '@/store'

export default {
  name: "ActivityModal",
  components: {Icons},
  data() {
    return {
      //富文本
      describe: {
        value: ''
      },
      drawerWidth: 700,
      treeData: [],
      title: "操作",
      visible: false,
      disableSubmit: false,
      model: {},
      localMenuType: 0,
      name: null,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validateStatus: "",
      activityType:[]
    }
  },

  computed: {
    validatorRules: function () {
      let validateName = (rule, value, callback) => {
        if (value && value.length > 200) {
          callback(new Error('活动名称不能超过200字'))
        }
        callback()
      };
      let validateEnrollStartTime = (rule, value, callback) => {
        if (value) {
          if (this.onEnrollStartTimeChange(value)){
            callback(new Error('报名开始时间不能晚于报名结束时间'))
          }
          if (this.onEnrollSTimeChange(value)){
            callback(new Error('报名开始时间不能晚于活动开始时间'))
          }
        }
        callback()
      };
      let validateEnrollEndTime = (rule, value, callback) => {
        if (value) {
          if (this.onEnrollEndTimeChange(value)){
            callback(new Error('报名结束时间不能早于报名开始时间'))
          }
          if (this.onEnrollETimeChange(value)){
            callback(new Error('报名结束时间不能晚于活动开始时间'))
          }
        }
        callback()
      };
      let validateActStartTime = (rule, value, callback) => {
        if (value) {
          if (this.onActStartTimeChange(value)){
            callback(new Error('活动开始时间不能晚于活动结束时间'))
          }
        }
        callback()
      };
      let validateActEndTime = (rule, value, callback) => {
        if (value) {
          if (this.onActEndTimeChange(value)){
            callback(new Error('活动结束时间不能早于活动开始时间'))
          }
        }
        callback()
      };
      let validateAddress = (rule, value, callback) => {
        if (value && value.length > 200) {
          callback(new Error('活动地址不能超过200字'))
        }
        callback()
      };
      let validateJoinNumber = (rule, value, callback) => {
        const regex = /^[0-9]*$/;
        if (value && !regex.test(value)){
          callback("参与人数只能为数字")
        }
        if (value && value > 999999999) {
          callback(new Error('参与人数不能超过999999999字'))
        }
        callback()
      };
      let validateSummary = (rule, value, callback) => {
        if (value && value.length > 200) {
          callback(new Error('活动简介不能超过200字'))
        }
        callback()
      };
      let validateReward = (rule, value, callback) => {
        if (value && value.length > 200) {
          callback(new Error('活动奖励不能超过200字'))
        }
        callback()
      };
      let validatePrice = (rule, value, callback) => {
        const regex = /^([\+]?[1-9]+[\d]*(.[0-9]{1,2})?)$/;
        if (value && !regex.test(value)){
          callback("活动金额只能为数字，如有小数只能带两位小数")
        }
        if (value && value > 99999999.99) {
          callback(new Error('活动金额不能超过99999999.99'))
        }
        callback()
      };
      return {
        name: {rules: [{required: true, message: '请输入活动名称'},{validator:validateName,trigger:'blur'},]},
        status: {rules: [{required: true, message: '请输入活动状态'}]},
        enrollTime: {rules: [{required: true, message: '请选择报名开始时间'},{validator:validateEnrollStartTime,trigger:'blur'},]},
        enrollEndTime: {rules: [{required: true, message: '请选择报名结束时间'},{validator:validateEnrollEndTime,trigger:'blur'},]},
        startDate: {rules: [{required: true, message: '请选择活动开始时间'},{validator:validateActStartTime,trigger:'blur'},]},
        endDate: {rules: [{required: true, message: '请选择活动结束时间'},{validator:validateActEndTime,trigger:'blur'},]},
        media: {rules: [{required: true, message: '请上传文件'}]},
        updateUser: {rules: [{required: true, message: '请输入修改者'}]},
        price: {rules: [{required: true, message: '请输入活动金额'},{validator:validatePrice,trigger:'blur'},]},
        free: {rules: [{required: true, message: '请设置活动是否免费'}]},
        liveFlag: {rules: [{required: true, message: '请设置活动是否直播'}]},
        address: {rules: [{required: true, message: '请输入活动地址'},{validator:validateAddress,trigger:'blur'},]},
        typeid: {rules: [{required: true, message: '请输入活动类别'}]},
        description: {rules: [{required: true, message: '请输入活动描述'}]},
        typename: {rules: [{required: true, message: '请输入活动类别名'}]},
        summary: {rules: [{required: true, message: '请输入活动简介'},{validator:validateSummary,trigger:'blur'},]},
        joinNumber: {rules: [{required: true, message: '请输入参与人数'},{validator:validateJoinNumber,trigger:'blur'},]},
        reward: {rules: [{required: true, message: '请输入活动奖励'},{validator:validateReward,trigger:'blur'},]},
      }
    }
  },
  created() {
    //请求后台数据,初始化分类数据
    this.loadTree();
    this.initDictConfig();
  },
  methods: {
    loadTree() {
      let that = this
      getActivityTypeList().then((res) => {
        if (res.success || res.data || res.code == 200) {
          that.activityType = res.data.map((item, index, arr) => {
            let c
            c = { label: item.name, value: item.id }
            return c;
          })
        }
      })
    },
    add() {
      this.loadTree();
      // 默认值
      this.edit({});
    },
    edit(record) {
      this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      this.form.resetFields();
      this.model = Object.assign({}, record);
      //给富文本赋值
      this.describe.value = record.description;
      this.visible = true;
      let fieldsVal = pick(this.model, 'name', 'status', 'startDate', 'enrollTime', 'enrollEndTime', 'endDate', 'createTime', 'updateTime', 'createUser', 'updateUser', 'price', 'free', 'liveFlag', 'description', 'address', 'typeid', 'typename', 'summary', 'joinNumber', 'reward', 'media');
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldsVal)
      });
    },
    close() {
      this.$emit('close');
      this.disableSubmit = false;
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          let userid = store.getters.userInfo.id;
          this.model.name = that.name;
          this.model.sortNo = that.sortNo;
          this.model.media = that.media;
          this.model.createTime = null;
          let formData = Object.assign(this.model, values);
          console.log(formData);
          formData.description = this.describe.value;
          formData.createUser = userid;
          that.confirmLoading = true;
          console.log(formData);
          let obj;
          if (!this.model.giftCategoryId) {
            obj = addActivity(formData);
          } else {
            obj = editGiftCategory(formData);
          }
          obj.then((res) => {
            if (res.code == 200) {
              that.$message.success(res.msg);
              that.$emit('ok');
              that.close();
            } else {
              that.$message.error(res.msg);
            }
          }).finally(() => {
            that.confirmLoading = false;
            //that.close();
          });
        }
      })
    },
    handleCancel() {
      this.close()
    },
    handleIconCancel() {
      this.iconChooseVisible = false
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
    initDictConfig() {
    },
    /**
     * 开始时间发生变化时触发,设置结束时间不可选择的日期
     * 结束时间应大于等于开始时间
     * @param {string} startTime 格式化后的日期
     */
    onEnrollStartTimeChange(startTime) {
      return startTime > this.model.enrollEndTime
    },

    onEnrollSTimeChange(startTime) {
      return startTime >this.model.startDate
    },
    /**
     * 结束时间发生变化时触发,设置开始时间不可选择的日期
     * 开始时间小于等于结束时间
     * @param {string} date 格式化后的日期
     */
    onEnrollEndTimeChange(endTime) {
      return endTime < this.model.enrollTime
    },
    onEnrollETimeChange(endTime) {
      return endTime > this.model.startDate
    },
    /**
     * 开始时间发生变化时触发,设置结束时间不可选择的日期
     * 结束时间应大于等于开始时间
     * @param {string} startTime 格式化后的日期
     */
    onActStartTimeChange(startTime) {
      return startTime > this.model.endDate
    },
    /**
     * 结束时间发生变化时触发,设置开始时间不可选择的日期
     * 开始时间小于等于结束时间
     * @param {string} date 格式化后的日期
     */
    onActEndTimeChange(endTime) {
      return endTime < this.model.startDate
    }
  }
}
</script>

<style scoped>

</style>

标签：vue,rules,value,ant,callback,design,message,true,model
来源： https://blog.csdn.net/csdnlaiyanqi/article/details/122595197

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。