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

Question

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

<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: ''
},

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

Answer 1

如果您使用laravel's request class，您可以验证那里的所有字段以查看是否为空。 这是迄今为止最简单、最可靠的方法。

这将在您的请求到达控制器之前验证您的请求，并允许您返回自定义错误。

您可能希望将所有动态添加的字段存储在嵌套数组中，以便单独检查。

在规则部分你可以这样写：

'dynamic_fields.*' => ['required']

希望这会有所帮助。

Answer 2

我会告诉你我会做什么

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