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 组件中表单自定义校验规则如何传递参数？