验证对象中的文本字段

Question

我有一个对象数组，例如 who 显示 2 个字段 time 和 record ：

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>

当我点击添加按钮时，我有一个功能在之后添加这些字段：

            addSprint() {

                this.sprint.push({

                  time: '',

                  record: ''

              });

            },

我想使用 Vuelidate 检查其中的每一个是否存在。验证必须是必填字段，数字，时间：介于 0 和 1（浮点数 0.1，0.2，..）之间，记录：介于 0 和 100 之间，

Answer 1

这里添加了对两个字段的验证：https : //codepen.io/chansv/pen/eYYWGLe?editors=1010<div id="app">&nbsp; <v-app id="inspire">&nbsp; &nbsp; <v-form>&nbsp; &nbsp; &nbsp; <v-container>&nbsp; &nbsp; &nbsp; &nbsp; <div v-for="(s, index) in sprint" :key="index">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Index: {{index}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-text-field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label="time"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :rules="[rules.required, rules.time]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="s.time"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ></v-text-field>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-text-field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label="record"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :rules="[rules.required, rules.record]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="s.record"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ></v-text-field>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <v-btn @click="addSprint">Add Sprint</v-btn>&nbsp; &nbsp; &nbsp; </v-container>&nbsp; &nbsp; </v-form>&nbsp; </v-app></div>new Vue({&nbsp; el: '#app',&nbsp; vuetify: new Vuetify(),&nbsp; data: {&nbsp; &nbsp; sprint: [],&nbsp; &nbsp; rules: {&nbsp; &nbsp; &nbsp; required: v => !!v || 'this field is required',&nbsp; &nbsp; &nbsp; time: v => (v >= 0 && v <= parseFloat(1)) || "enter value less than 1 or greater than 0",&nbsp; &nbsp; &nbsp; record: v =>&nbsp; (v >= 0 && v <= 100) || "enter value less than 100 or greater than 0",&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; addSprint() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.sprint.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; time: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; record: ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; },})

Answer 2

这里添加了对两个字段的验证：https : //codepen.io/chansv/pen/eYYWGLe?editors=1010<div id="app">&nbsp; <v-app id="inspire">&nbsp; &nbsp; <v-form>&nbsp; &nbsp; &nbsp; <v-container>&nbsp; &nbsp; &nbsp; &nbsp; <div v-for="(s, index) in sprint" :key="index">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Index: {{index}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-text-field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label="time"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :rules="[rules.required, rules.time]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="s.time"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ></v-text-field>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-text-field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label="record"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :rules="[rules.required, rules.record]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="s.record"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ></v-text-field>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <v-btn @click="addSprint">Add Sprint</v-btn>&nbsp; &nbsp; &nbsp; </v-container>&nbsp; &nbsp; </v-form>&nbsp; </v-app></div>new Vue({&nbsp; el: '#app',&nbsp; vuetify: new Vuetify(),&nbsp; data: {&nbsp; &nbsp; sprint: [],&nbsp; &nbsp; rules: {&nbsp; &nbsp; &nbsp; required: v => !!v || 'this field is required',&nbsp; &nbsp; &nbsp; time: v => (v >= 0 && v <= parseFloat(1)) || "enter value less than 1 or greater than 0",&nbsp; &nbsp; &nbsp; record: v =>&nbsp; (v >= 0 && v <= 100) || "enter value less than 100 or greater than 0",&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; addSprint() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.sprint.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; time: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; record: ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; },})