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