pl102029

pl102029 查看完整档案

成都编辑四川商务职业学院  |  软件技术 编辑某个公司  |  前端工程师 编辑 personal.com 编辑
编辑

前端新手,希望大家多多指导。

个人动态

pl102029 提出了问题 · 2020-12-07

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

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

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

关注 2 回答 1

pl102029 赞了回答 · 2020-12-03

循环添加this.$set值都等于循环的最后一个值,是怎么回事

是你最里面那一层循环导致的,`
for (let b = 0; b < allArr.length; b++)这里每次循环一次,都会把前面的赋值覆盖掉,第一次为allArr[0],第二次是allArr[1],一直到最后一位,你想实现的是什么

关注 3 回答 2

pl102029 赞了回答 · 2020-12-03

循环添加this.$set值都等于循环的最后一个值,是怎么回事

好吧,终于有点明白你的意图了:“循环的给input初始值”

(_this.infoVisaValue[_this.template[j].question_id] || '')
.split('<|>') // 获取`_this.template[j].question_id`初始值列表
.forEach((initialVal, index) { // 遍历初始值给对应位置的`_this.template[j].select_question`元素赋值
    _this.$set(_this.template[j].select_question[index], 'value', initialVal);
})

关注 3 回答 2

pl102029 赞了回答 · 2020-12-03

解决将input每次获取输入框的值组合成一个数组

vue自带的v-model没必要拆开value和@input,可以利用计算属性computed来获取这个数组

result: function(){
    return this.item.select_question.map(con => con.value)
}

关注 2 回答 2

pl102029 提出了问题 · 2020-12-02

循环添加this.$set值都等于循环的最后一个值,是怎么回事

                <view
                            class="uni-column"
                            v-for="(con, indexCon) in item.select_question"
                            :key="indexCon"
                            :class="indexCon == item.select_question.length - 1 ? '' : 'borderMin E7Bottom'"
                        >
                            <text class="conarea color-575757">{{ con.input_title }}</text>
                            <input
                                type="text"
                                :maxlength="item.number_of_characters"
                                class="moreinput"
                                :placeholder="con.input_title"
                                :value="con.value"
                                :disabled="dis"
                                :name="item.question_id"                
                                @input="value => onKeyInputMore(value,item.question_id,item.select_question.length,indexCon)"
                            />
                        </view>

image.png
这个_this.template[j].select_question[a] 里面添加的value字段都等于allArr[b]最后循环的值?亲问怎么修改呢,我要value里面展示不同的值,后面的值不覆盖之前的值,而是循环的给input初始值?

for (let a = 0; a < _this.template[j].select_question.length; a++) {
                                for (var key in _this.infoVisaValue) {
                                    if (key == _this.template[j].question_id) {
                                        var allArr = _this.infoVisaValue[key].split('<|>');
                                        for (let b = 0; b < allArr.length; b++) {
                                            _this.$set(_this.template[j].select_question[a], 'value', allArr[b]);
                                        }
                                    }
                                }
                            }

关注 3 回答 2

pl102029 提出了问题 · 2020-12-02

解决将input每次获取输入框的值组合成一个数组

image.png

`

             <view 
               v-for="(con, indexCon) in item.select_question"
                        :key="indexCon">
                         <input
                            type="text"
                            :maxlength="item.number_of_characters"
                            class="moreinput"
                            :placeholder="con.input_title"
                            :value="con.value"
                            :disabled="dis"
                            :name="item.question_id"                
                            @input="value => onKeyInputMore(value,item.question_id,item.select_question.length,indexCon)"
                        />
                    </view>`
onKeyInputMore(event, questid,lengthNum,index) {
            var value = event.target.value;
}

怎么在下面事件里面把每一次监听的value值都组装成一个数组。或者能取到所有input输入的值,组成一个数组,请问要怎么做呢

关注 2 回答 2

pl102029 赞了回答 · 2020-10-19

有没有人知道这个能不能做。

关注 2 回答 1

pl102029 提出了问题 · 2020-10-19

有没有人知道这个能不能做。

我们需要做一个获取英国用户信息的项目,获取身份证号。请问在项目里面APP和PC里面,能不能做用户实名认证功能?不知道做的话会不会违反GDPR隐私政策,请问有人知道能做吗?符合英国法律吗?

关注 2 回答 1

pl102029 提出了问题 · 2020-05-13

请问在uni-app里怎么集成stripe支付呢。前端需要做那几步?

请问在uni-app里怎么集成stripe支付呢。前端需要做那几步?

关注 1 回答 0

pl102029 关注了标签 · 2020-05-13

stripe

国外知名在线支付服务提供商

关注 3

认证与成就

  • 获得 17 次点赞
  • 获得 97 枚徽章 获得 7 枚金徽章, 获得 28 枚银徽章, 获得 62 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-10-11
个人主页被 1.7k 人浏览