vue项目汇总，iview自定义验证器的问题

iview自定义验证器

在使用iview前端组件的过程中，有时候使用它自带的验证器往往不能满足我们项目中的需求，有时候就需要按照项目需求自定义，iview自带的form验证其实不错，但有些特殊的还是需要自己来实现，废话不多说，直接上题。

Form 组件基于 async-validator 实现的数据验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。完整的验证规则请参照开源项目 async-validator。熟悉iview的都知道，form验证是根据formItem的prop属性来验证。

<div style="float: left;text-align: left;width: 550px;">
  <FormItem label="时间范围" style="height: 36px; width: 98%;" prop="noVerify">
    <FormItem prop="startTimeVal" style = "display:inline-block;margin-right: 0;">
      <DatePicker type="datetime" @on-change="getStartTime" format="yyyy-MM-dd HH:mm" v-model="eventTrackForm.startTimeVal" placeholder="选择日期" style="width: 168px"></DatePicker>
    </FormItem>
    <span>至</span>
    <FormItem prop="endTimeVal" style = "display:inline-block;margin-right: 0;">
      <DatePicker type="datetime" @on-change="getEndTime" format="yyyy-MM-dd HH:mm" v-model="eventTrackForm.endTimeVal" placement="bottom-end" placeholder="选择日期" style="width: 168px"></DatePicker>
    </FormItem>
  </FormItem>
</div>

这里贴出的代码是我form表单中的一部分，验证时间范围的。

验证器规则如下：

validateAdvancedFormItem: {
  name: [
    { required: true, message: '任务名称不能为空', trigger: 'blur' },
    { type: 'string', max: 20, message: '不能超过20个字符', trigger: 'blur' },
    { validator: validNameExist, trigger: 'blur' }
  ],
  startTimeVal: [
    { required: true, type: 'date', message: '请选择开始时间', trigger: 'change' },
    { validator: compareTime, trigger: 'change' }

  ],
  endTimeVal: [
    { required: true, type: 'date', message: '请选择结束时间', trigger: 'change' }
  ],
  keywords: [
    { required: true, message: '关键词不能为空', trigger: 'blur' },
    { type: 'string', max: 500, message: '不能超过500个字符', trigger: 'blur' }
  ],
  noVerify:[{ required: true, validator: noVerify }],
  status:[{ required: true , trigger: 'blur'}]
},

红色标注的就是自己需要自定义的验证器，第一个是验证名称是否重复的问题，与后台实时同步，第二个就是验证时间(1:开始时间不能大于结束时间，2：开始时间只能选择一个月之前的时间，3：开始时间与结束时间间隔不能超过3个月)，代码如下：

var validNameExist = (rule, value, callback) =>{
  var self = this
  if(self.eventTrackForm.name.trim() == '') {
    callback(new Error('任务名称不能为空'));
    self.eventTrackForm.name = '';
  } else {
    let data = qs.stringify({id: self.eventTrackForm.id, name: self.eventTrackForm.name, organId: ''});
    self.$ajax.post(self.$props.model +'/validateTaskName',data).then((response) => {
      if (response.data.result === -4) {
        callback(new Error('事件名称已存在'));
      } else {
        callback();
      }
    }, (response) => {
      console.log(response);
    })
  }
};
var compareTime = (rule, value, callback) =>{
  //开始时间不能大于结束时间
  let startTimeNum = (new Date(this.eventTrackForm.startTime == '' ? this.eventTrackForm.startTimeVal : this.eventTrackForm.startTime)).getTime();
  let endTimeNum = (new Date(this.eventTrackForm.endTime == '' ? this.eventTrackForm.endTimeVal : this.eventTrackForm.endTime)).getTime();
  if(startTimeNum > endTimeNum) {
    callback(new Error('开始时间不能大于结束时间'))
  }
  //修改事件时判断开始是否在一个月之内，根据创建时间来判断的
  if(this.eventTrackForm.id != '') {
    let now = new Date(this.eventTrackForm.createTime);
    new Date(now.setMonth(new Date().getMonth() - 1));
    startTimeNum = (new Date(this.eventTrackForm.startTime)).getTime();
    if(now.getTime() > startTimeNum) {
      //显示时间提示
      callback(new Error('最早可追溯至任务创建前一个月的信息'))
    }
  } else {
    //开始时间只能选择一个月之内
    let now = new Date();
    new Date(now.setMonth(new Date().getMonth() - 1));
    if(now.getTime() > startTimeNum) {
      //显示时间提示
      callback(new Error('开始时间只能选择一个月之内'))
    }
  }
  //起止时间间隔不得超过3个月
  if((endTimeNum - startTimeNum) > 90 * 24 * 60 * 60 * 1000) {
    callback(new Error('起止时间间隔不得超过3个月'))
  }
  callback()
};
var noVerify = (rule, value, callback) =>{
  callback()
}

这是我个人使用iview的心得，有什么不对的还请大神指点，或者有疑问的可以找我，不吝赐教哦。哈哈！

vue项目汇总，iview自定义验证器的问题

猜你喜欢