[英]Validate text field in object
I have an array of object like who display 2 fields time and record:我有一个 object 数组,比如显示 2 个字段的时间和记录:
sprint:[{time: void 0, record: void 0}]
<div v-for="(s, index) in sprint" :key="index">
<v-text-field
class="input"
v-model="sprint.time"
></v-text-field>
<v-text-field
v-model="sprint.record"
></v-text-field>
</div>
When I click on add button, I have a function who add these fields after:当我点击添加按钮时,我有一个 function 在之后添加这些字段:
addSprint() {
this.sprint.push({
time: '',
record: ''
});
},
I want use Vuelidate to check each of these if it's exist.我想使用 Vuelidate 检查每一个是否存在。 The validation must be field required, numeric, time: between 0 and 1( float 0.1, 0.2, ..), record: between 0 and 100,
验证必须是必填字段,数字,时间:介于 0 和 1(浮点 0.1、0.2、..)之间,记录:介于 0 和 100 之间,
thanks for your help感谢您的帮助
Here the the added validation to both the fields: https://codepen.io/chansv/pen/eYYWGLe?editors=1010这里添加了两个字段的验证: https://codepen.io/chansv/pen/eYYWGLe?editors=1010
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<div v-for="(s, index) in sprint" :key="index">
Index: {{index}}
<v-text-field
class="input"
label="time"
:rules="[rules.required, rules.time]"
v-model="s.time"
></v-text-field>
<v-text-field
label="record"
:rules="[rules.required, rules.record]"
v-model="s.record"
></v-text-field>
</div>
<v-btn @click="addSprint">Add Sprint</v-btn>
</v-container>
</v-form>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
sprint: [],
rules: {
required: v => !!v || 'this field is required',
time: v => (v >= 0 && v <= parseFloat(1)) || "enter value less than 1 or greater than 0",
record: v => (v >= 0 && v <= 100) || "enter value less than 100 or greater than 0",
}
},
methods: {
addSprint() {
this.sprint.push({
time: '',
record: ''
});
},
},
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.