vuejs2 - Vuelidate 日期输入字段
问题描述
我希望有人可以向我澄清,如何在验证 Date 对象时正确使用 Vuelidate。我想将当前日期用作最小日期,因此如果用户稍后输入日期,则会显示错误。
我有一个例子:https ://jsfiddle.net/cheslavcc/fns8eh0f/1/
Vue.use(window.vuelidate.default)
const { required, minValue } = window.validators
new Vue({
el: "#app",
data: {
text: ''
},
validations: {
text: {
minValue: minValue(moment(new Date(), 'DD.MM.YYYY').format('DD.MM.YYYY')),
}
}
})
我使用 Moment.js 作为日期格式化程序,并使用官方 Vuelidate 文档中的 minValue:https ://monterrail.github.io/vuelidate/#sub-builtin-validators
任何帮助表示赞赏,非常感谢!
解决方案
您可以定义自定义验证器:
Vue.use(window.vuelidate.default)
const { required, minValue } = window.validators
const currentDate = moment(new Date()).startOf('day')
const minDate = window.vuelidate.withParams({minDate: currentDate.format('DD.MM.YYYY')}, value => moment(value, 'DD.MM.YYYY', true).isSameOrAfter(currentDate))
new Vue({
el: "#app",
data: {
text: ''
},
validations: {
text: {
minDate
}
}
})
input {
border: 1px solid silver;
border-radius: 4px;
background: white;
padding: 5px 10px;
}
.error {
border-color: red;
background: #FDD;
}
.error:focus {
outline-color: #F99;
}
.valid {
border-color: #5A5;
background: #EFE;
}
.valid:focus {
outline-color: #8E8;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
<div id="app">
<input type="text" v-model="text"
v-on:input="$v.text.$touch"
v-bind:class="{error: $v.text.$error, valid: $v.text.$dirty && !$v.text.$invalid}"
>
<pre>{{ $v }}</pre>
Text: {{ text }}
</div>
推荐阅读
- google-apps-script - 在特定日期从单元格中查找值,然后无限期保留该值
- javascript - 使用 phabricator API 使用 javascript 创建 maniphest 任务
- opengl - 片段着色器中的“不正确的预处理器指令”?
- c# - 有更好的方法吗?
- datatables - 这个javascript语句做了什么样的赋值:var api = this.api(), data;
- swift - 如果在另一个标签栏控制器中更改了数据,如何正确更新表格单元格信息?
- google-apps-script - 从 Google 表格中的列表中查找所有可能的完整配对
- excel - 比 VLOOKUP 更快的方法来使用 VBA 在 excel 中比较两个数据集,1 有 180,000 个项目,其他 250,000
- asp.net-core - 外部身份提供者中的密码更改
- javascript - WebSocket `close` 与 `closed` readyState 有什么区别?