时间戳

首页 > 解决方案 > 如何验证表单中动态添加的输入？

laravel - 如何验证表单中动态添加的输入？

问题描述

我正在向我的表单动态添加字段，但我需要验证这些字段，以确保它们不为空。这就是我在表单中创建动态字段的方式

<div v-for="(option, index) in questionOptions" :key="index">
    <el-row>
        <el-col :span="22">
            <el-form-item prop="option">
                <el-input v-model="option.option"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="2">
            <div class="btn-link-delete action-button" @click="removeOption(index)"
                :disabled="trashDisabled">
                <i class="fas fa-trash-alt"></i>
            </div>
        </el-col>
    </el-row>
</div>

在我的 data() 中，我这样做是因为我希望在添加更多字段之前有两个选项

questionOptions: [
{
    option: ''
},
{
    option: ''
},

我想在添加这些字段时对其进行验证，现在如果我验证它们从未正确验证的正常方式，我填写输入并且它们显示为好像它们是空的并且它不允许我保存，即使输入不为空。我还希望前两个字段似乎是必需的并经过验证。不是我创建的每个项目都会包含这些动态添加的字段，只有一些。它们是问题，只有当问题设置为多项选择时，这些字段才会创建用于回答的选项。

标签： laravelvue.jselement-ui

解决方案

我会给你和我会做什么的想法

methods: {
validate(){
 this.questionOptions.forEach(function(item, key) {      
 if(item.multipleChoice){
   if(item.option===''){
         alert('this question can not be null ' + item.question  )
         return 
      }
   }  
  }
 }

推荐阅读