uni-app 给动态生成的表单做表单验证

Question

子组件通过接口动态获取到的表单模板：

<view class=" uni-column" v-for="(item, index) in template" :key="index">
          <view class="uni-column" v-if="item.type_level == 5">
                        <input
                            type="text"
                            @input="onKeyInput($event,item.question_id)"
                            :disabled="dis"
                            :name="item.question_id"
                            :value="item.value"
                        />
                    </view>
                    <!-- 多项填空题 -->
         <view class="uni-column" v-if="item.type_level == 6">
                      <view v-for="(con, indexCon) in item.select_question" :key="indexCon">
                      <text class="color-575757">{{ con.input_title }}</text>
                            <input
                                type="text"
                                :maxlength="item.number_of_characters"
                                class="moreinput"
                                :placeholder="con.input_title"
                                :disabled="dis"
                                :name="item.question_id"                
                                v-model="con.value"
                            />
                        </view>
                    </view>
                    <!-- 单选 -->
         <view class="uni-column" v-if="item.type_level == 1">
                        <radio-group @change="radioChange($event, item.select_question, item.question_id)" class="uni-column radioGroup" :name="item.question_id">
                            <label class="radio" v-for="(ra, index) in item.select_question" :key="index">
                                <radio :value="ra.question_id" :checked="ra.input_title == infoVisaValue[item.question_id]" color="#DF2A00" :disabled="dis" />
                                {{ ra.input_title }}
                            </label>
                        </radio-group>
                    </view>
                    <!-- 多选 -->
        <view class="uni-column" v-if=" item.type_level == 2">
                        <checkbox-group @change="checkboxChange($event, item.select_question, item.question_id)" :name="item.question_id">
                            <label class="uni-list-cell uni-list-cell-pd" v-for="type in item.select_question" :key="type.question_id">
                                <view><checkbox :value="type.question_id" :checked="type.checked" :disabled="dis" color="#DF2A00" /></view>
                                <view class="color-575757">{{ type.input_title }}</view>
                            </label>
                        </checkbox-group>
                    </view>
                    <!-- 下拉 -->
        <view class="optionDef uni-column" v-if="item.type_level == 3">
                        <picker
                            @change="bindChinaChange($event, item.select_question, item.question_id,index)"
                            :value="dropDownIndex[index]"
                            :range="item.select_question"
                            :disabled="dis"
                            range-key="input_title"
                            :name="item.question_id"
                        >
                            <view class="uni-input uni-row dropDown">
                                <text class="color-575757">{{ item.select_question[dropDownIndex[index]]['input_title'] || i18n.quest.select }}</text>
                                <uniIcon size="20" type="arrowdown" color="#999" />
                            </view>
                        </picker>
                    </view>
      <view class="redCheck" v-if="item.input_required == 1 ? true : false">此项必填</view>
</view>

父组件内容：

<form @submit="next">
     <Template :dataVisa="template" :infoVisa="template_value"></Template>
     <button formType="submit">{{i18n.nextStep}}</button>
</from>

请问我在提交表单的时候怎么去验证子组件中动态生成的表单值是否为空？next: function(e) {}里面不能获取到提交表单的值。我需要在表单提交的时候，判断如果有值为空，并且item.input_required = 1是必填项的时候就展示
`<view v-if="item.input_required == 1 && 为空 ? true : false">此项必填</view>
请问该怎么做呢？

Answer 1

提供一个思路参考一下：首先<view v-if="item.isOk">此项必填</view>这个可以加在每个选项里面。然后在拿到template数据的时候循环template，给它的每一项加上一个属性 isOk ,默认值为false。然后在提交的时候循环template，赋值 item.isOk = item.input_required == 1 && 为空 ? true : false。这样就可以给出正确的校验提示。并且只要有一个item的isOk为true，就不能提交数据。