uniapp动态多表单校验成功之后调接口?
2、在提交事件中调接口中,正常的思维是,循环遍历定义的数组,对里面的内容进行校验,定义一个空数组变量,将validate方法的返回值push到变量中去,如果有输入框没有填写,返回对象组成的数组,输入框全部填写完成返回null组成的数组,它是一个二维数组的形式,然后判断数组中是否有内容进行调取接口,但是!每点击一次按钮生成一个由多个输入框组成的表单,每个表单的属性构成是完全一致的,只不过输入的属性值
首先,我先简述一下我要实现的功能
每点击一次按钮生成一个由多个输入框组成的表单,每个表单的属性构成是完全一致的,只不过输入的属性值不同,要求对每一个表单的每一个输入框都验证,全部验证成功之后调取接口,上传数据
其次,我写一下我的代码
这是我的html部分
<uni-section :title="title+' '+index" type="line" v-for="(item, index) in dynamicLists" :key="index">
<uni-forms ref="baseForm" :modelValue='dynamicLists[index]' :rules="rules">
<uni-forms-item label="姓名" required name="name">
<uni-easyinput
v-model="item.name"
placeholder="请输入你的姓名"
/>
</uni-forms-item>
<uni-forms-item label="性别" required name="gender">
<uni-easyinput
v-model="item.gender"
placeholder="请输入你的性别"
/>
</uni-forms-item>
</uni-forms>
</uni-section>
<view class="button-group">
<button class="button" size="mini" @click="add">新增</button>
<button class="button" size="mini" @click="submit">提交</button>
</view>
在js中定义dynamicLists数据,定义rules数据
data() {
return {
title: '新增数据',
dynamicLists: [
{
id: Date.now(),
name: '',
gender: ''
}
],
rules: {
name: {
rules: [{
required: true,
errorMessage: '姓名必填'
}]
},
gender: {
rules: [{
required: true,
errorMessage: '性别必填'
}]
}
}
}
下面我写一下我的方法
add(){
this.dynamicLists.push({
id: Date.now(),
name: '',
gender: ''
})
}
对于提交事件,这里要着重强调一下
1、validate方法是针对对象来说的,数组时不能使用该方法的
2、在提交事件中调接口中,正常的思维是,循环遍历定义的数组,对里面的内容进行校验,定义一个空数组变量,将validate方法的返回值push到变量中去,如果有输入框没有填写,返回对象组成的数组,输入框全部填写完成返回null组成的数组,它是一个二维数组的形式,然后判断数组中是否有内容进行调取接口,但是!不可以,你会发现你拿到的数组不是你push处理过的数组,而是你初始化定义的空数组
这不问题就来了~~~
原因:validate方法是异步的
解决方法(大佬解决的哈,不是我解决的,哈哈哈哈):
重新封装了方法,使用promise.all,具体内容如下:
async handleValidte() {
const promises = this.dynamicFormData.dynamicLists.map((item, index) => {
return new Promise(resolve => {
this.$refs.baseForm[index].validate(err => {
resolve(err)
})
})
})
return await Promise.all(promises)
}
那么如何使用呢?请您往下看
async submit() {
var validtateList = await this.handleValidte()
// 扁平化
var flat = validtateList.flat(2)
const isTrue = flat.every(item => {
return item === null
})
if(isTrue) {
// 调接口
ajax('接口', 'POST', JSON.stringify(this.dynamicLists)).then(res => {
uni.showToast({
title: `提交成功`
})
// 清数组
this.dynamicLists = [{
id: Date.now(),
name: '',
gender: ''
}]
}
}
好了,这个内容就到这里了,就当是纪念一下把!!
更多推荐
所有评论(0)