Vee-Validate 自定义日期验证 [英] Vee-Validate custom date validation
问题描述
我想知道是否可以使用 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">开始日期</label><span v-show="errors.has('startdate')" class="text-danger"><center>{{ errors.first('startdate') }}</center></跨度>我的脚本如下所示:
导出默认 {name: '应用程序',数据:() =>({任务: ''，开始日期: ''，开始时间: ''，结束日期: ''，时间结束: ''，描述:'测试'}),方法: {validateBeforeSubmit() {this.$validator.validateAll().then((result) => {如果(结果){//eslint-disable-next-linealert('表格已提交！');返回;}alert('更正错误！');});}}};但是没有显示验证.我想我的脚本中遗漏了一些东西，但我不确定如何在那里实现日期.任何帮助将不胜感激.
首先，这可能是一些拼写错误，但在您的模板中，您使用小写的 startDate 和 startdate.
然后，为了回答您的问题，可以定义一个 自定义验证器 与 vee-validate 进行日期比较.
由于您选择的日期格式DD-MM-YYYY"不是有效的 javascript 日期格式，因此需要将字符串日期重写为有效格式以使其工作.
Vue.use(VeeValidate)新的 Vue({el: "#app",数据() {返回 {开始日期: ''，结束日期: ''，}},创建(){让自己=这个this.$validator.extend('之前', {getMessage(field, val) {return '必须早于 startDate'},验证(值，字段){让 startParts = self.startDate.split('-')let endParts = value.split('-')let start = new Date(startParts[2], startParts[1] -1, startParts[0])//月份是从 0 开始的let end = new Date(endParts[2], endParts[1] -1, endParts[0])返回结束 >开始}})},方法: {validateBeforeSubmit() {this.$validator.validateAll().then((result) => {如果(结果){alert('表格已提交！');返回;}alert('更正错误！');});}}}).is-danger, .text-danger {红色;}<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="应用程序"><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">开始日期</label><span v-show="errors.has('startDate')" class="text-danger">{{ errors.first('startDate') }}</span><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">结束日期</label><span v-show="errors.has('endDate')" class="text-danger">{{ errors.first('endDate') }}</span>
<button @click="validateBeforeSubmit">保存</button>
注意:我将自定义验证器放在示例的创建挂钩中，但您可以将其放在项目中所需的任何文件中.只需按照文档建议正确导入即可.
I was wondering if there is anyway you can write a custom date validation using vee-validate plugin where the end date cannot be less than the start date? I have looked high and low, and there is nowhere I can find a definite answer to this.
If there is no way to implement this, then I can make do without it, however, right now what I have implemented in my template for my start date is:
<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>
My script looks like this:
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!');
});
}
}
};
But there is no validation that is showing up. I think I am missing something in my script but I am not sure how to implement the date into there. Any help would be greatly appreciated.
First, it's maybe some typo error but in your template you use startDate and startdate lowercased.
Then, to answer your question, it's possible to define a custom validator with a date comparison with vee-validate.
As your chosen date format "DD-MM-YYYY" is not a valid javascript Date format, the string dates need to be rewritten into a valid format to make it work.
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>
Note: i put the custom validator inside the created hook for the example but you can put it inside any file you want in your projet. Just import it correctly as the documentation recommends.
这篇关于Vee-Validate 自定义日期验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
