问答

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

作者:admin 2021-05-12 我要评论

子组件通过接口动态获取到的表单模板: view class=" uni-column" v-for="(item, index) in template" :key="index" view class="uni-column" v-if="item.type_l...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

<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>
请问该怎么做呢?

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • uni-app 给动态生成的表单做表单验证

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

  • wxss里可不可以使用data里的值?

    wxss里可不可以使用data里的值?

  • el-transfer右边数据一时渲染一时不渲

    el-transfer右边数据一时渲染一时不渲

  • 小程序 navigateTo:fail webview count

    小程序 navigateTo:fail webview count

腾讯云代理商
海外云服务器