Vee-Validate 自定义日期验证
Posted
技术标签:
【中文标题】Vee-Validate 自定义日期验证【英文标题】:Vee-Validate custom date validation 【发布时间】:2018-11-25 15:19:15 【问题描述】:我想知道是否可以使用 vee-validate 插件编写自定义日期验证,其中结束日期不能小于开始日期?我从高处和低处看,无处可以找到明确的答案。
如果没有办法实现这一点,那么我可以不用它,但是,现在我在我的模板中为我的开始日期实现的是:
<input type="text" id="startDate" name="startDate" class="form-control" v-model="startDate" v-validate="'required|date_format:DD-MM-YYYY'" :class="'input': true, 'is-danger': errors.has('startDate') ">
<label class="mb-0" for="startDate">Start Date</label>
<span v-show="errors.has('startdate')" class="text-danger"><center> errors.first('startdate') </center></span>
我的脚本如下所示:
export default
name: 'App',
data: () => (
task: '',
startDate: '',
startTime: '',
endDate: '',
endTime: '',
description: 'test'
),
methods:
validateBeforeSubmit()
this.$validator.validateAll().then((result) =>
if (result)
// eslint-disable-next-line
alert('Form Submitted!');
return;
alert('Correct them errors!');
);
;
但是没有显示验证。我想我的脚本中遗漏了一些东西,但我不确定如何在其中实现日期。任何帮助将不胜感激。
【问题讨论】:
【参考方案1】:首先,这可能是一些拼写错误,但在您的模板中您使用了 startDate
和 startdate
小写。
然后,为了回答您的问题,可以定义一个 custom validator 并与 vee-validate 进行日期比较。
由于您选择的日期格式“DD-MM-YYYY”不是有效的 javascript 日期格式,因此需要将字符串日期重写为有效格式才能使其正常工作。
Vue.use(VeeValidate)
new Vue(
el: "#app",
data()
return
startDate: '',
endDate: '',
,
created()
let self = this
this.$validator.extend('earlier',
getMessage(field, val)
return 'must be earlier than startDate'
,
validate(value, field)
let startParts = self.startDate.split('-')
let endParts = value.split('-')
let start = new Date(startParts[2], startParts[1] -1, startParts[0]) // month is 0-based
let end = new Date(endParts[2], endParts[1] -1, endParts[0])
return end > start
)
,
methods:
validateBeforeSubmit()
this.$validator.validateAll().then((result) =>
if (result)
alert('Form Submitted!');
return;
alert('Correct them errors!');
);
)
.is-danger, .text-danger
color: red;
<script src="https://unpkg.com/vee-validate@2.0.0-rc.19/dist/vee-validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div>
<input type="text" name="startDate" v-model="startDate"v-validate="'required|date_format:DD-MM-YYYY'" :class="'input': true, 'is-danger': errors.has('startDate') ">
<label class="mb-0" for="startDate">Start Date</label>
<span v-show="errors.has('startDate')" class="text-danger"> errors.first('startDate') </span>
</div>
<div>
<input type="text" name="endDate" v-model="endDate" v-validate="'required|date_format:DD-MM-YYYY|earlier'" :class="'input': true, 'is-danger': errors.has('endDate') ">
<label class="mb-0" for="endDate">End Date</label>
<span v-show="errors.has('endDate')" class="text-danger"> errors.first('endDate') </span>
</div>
<button @click="validateBeforeSubmit">Save</button>
</div>
注意:我将自定义验证器放在示例中创建的挂钩中,但您可以将其放在项目中所需的任何文件中。只需按照文档的建议正确导入即可。
【讨论】:
感谢您的帮助!您提供的代码中只有一个问题;即使我输入的结束日期大于开始日期,我仍然会收到一条错误消息。 @BansariPatel 是的,你是对的,这是因为“DD-MM-YYYY”不是有效的 JavaScript 日期格式。字符串日期需要以有效格式重写以使其工作。我更新了我的答案。 @Sovalina,你能在这里看看与 vee-validate 相关的问题吗:***.com/questions/59444033/…?以上是关于Vee-Validate 自定义日期验证的主要内容,如果未能解决你的问题,请参考以下文章
带有 vee-validate ValidationObserver 组件的 Vue 自定义元素错误