element UI 自定义日期范围校验规则

日期校验.js

import moment from 'moment'
export default function dateValidator(rule, value, callback) {
   const dateType = rule.dateType || 'days'
   const num = rule.num || 31
   const dateString = rule.dateString || '天'
   const message = rule.message || `时间跨度不得超过${num}${dateString}`
   // 校验规则
   if (value && value.length === 2) {
    const start = value[0]
    const end = value[1]
    // 比较两个时间差 http://momentjs.cn/docs/displaying/difference.html
    if (moment(end).diff(moment(start), dateType, true) > num) {
     callback(new Error(message))
     return
    }
   }
   callback()
  }

使用方式

// 使用方式
<template>
    <el-form :model="ruleForm" :rules="rules">
      <el-form-item label="日期" prop="date">
        <el-date-picker
          v-model="date1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份">
        </el-date-picker>
      </el-form-item>
    </el-form>
</template>
<script>
  import dateValidator from '日期校验.js'
  export default {
	data() {
        // 上述的校验函数也可以直接写在这里，一般为了公用会抽象成一个公共的方法，通过引用调用
        const dateValidator = function(rule, value, callback){}
        return {
            ruleForm: [
               date1: [] 
            ],
            rules: [
            	date1: [
            	// {validator: 自定义校验函数, 入参：dateType是日期类型，值是years、months、weeks、days；num：是限制的数量；dateString：对应dateType的汉字；message：自定义返回信息}
            	{ validator: dateValidator, 
            	  dateType: 'days',
            	  num: 31,
            	  dateString: '天'
            	  message:'信息'
        		}
              ]
            ]
        }
    }
}         
</script>

思考：正常的函数接收参数应该是dateValidator(dateType,num,dateString, message),但是element的提供的方案是直接把参数写到对象中，如果想了解其原理，可以参考：element UI 组件中表单自定义校验规则如何传递参数？