<template>
<view class="container container15550">
<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
<u-form-item class="diygw-col-24" :required="true" label="姓名" prop="input">
<u-input :focus="formData.inputFocus" class="" placeholder="请输入提示信息" v-model="form.input" type="text"></u-input>
</u-form-item>
<view class="flex flex-wrap diygw-col-24 flex-direction-column">
<view class="diygw-col-24" v-for="(subformItem, subformIndex) in form.subform" :key="subformIndex">
<u-form :model="form.subform[subformIndex]" :errorType="['message', 'toast']" ref="subformRef" :rules="subformItemRules">
<u-form-item class="diygw-col-24" :required="true" label="公司名" prop="input1">
<u-input :focus="subformItemData.input1Focus" class="" placeholder="请输入提示信息" v-model="subformItem.input1" type="text"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24" label="单选" prop="radio">
<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" activeColor="#39b54a" v-model="subformItem.radio" @change="changeSubformItemRadio($event, subformIndex, subformItem)">
<u-radio shape="circle" v-for="(radioitem, radioindex) in subformItemData.radioDatas" :key="radioindex" :name="radioitem.value">
{{ radioitem.label }}
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item class="diygw-col-24" label="复选" prop="checkbox">
<u-checkbox-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" activeColor="#39b54a" v-model="subformItem.checkbox" @change="changeSubformItemCheckbox">
<u-checkbox v-model="checkboxitem.checked" v-for="(checkboxitem, checkboxindex) in subformItemData.checkboxDatas" :key="checkboxindex" :name="checkboxitem.value">
{{ checkboxitem.label }}
</u-checkbox>
</u-checkbox-group>
</u-form-item>
</u-form>
<view class="padding-xs flex justify-end">
<button @tap="upSubformItem" :data-index="subformIndex" class="diygw-btn green radius margin-xs">上移</button>
<button @tap="downSubformItem" :data-index="subformIndex" class="diygw-btn green radius margin-xs">下移</button>
<button @tap="delSubformItem" :data-index="subformIndex" class="diygw-btn red radius margin-xs">删除</button>
</view>
</view>
<view class="padding-xs">
<button @tap="addSubformItem" class="diygw-btn diygw-col-24 radius" style="background: #07c160; color: #fff">新增</button>
</view>
</view>
<view class="flex diygw-col-24">
<button @click="submitForm" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">按钮</button>
</view>
</u-form>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: {},
dta: {
code: 200,
msg: '获取数据成功',
data: [
{
title: '标题1',
remark: '描述1',
id: 1,
attr: {
title: '标题1'
},
img: 'https://libs.diygw.com/upload/xcx.jpg'
},
{
title: '标题2',
remark: '描述2',
id: 2,
attr: {
title: '标题2'
},
img: 'https://libs.diygw.com/upload/xcx.jpg'
},
{
title: '标题3',
remark: '描述3',
id: 3,
attr: {
title: '标题3'
},
img: 'https://libs.diygw.com/upload/xcx.jpg'
},
{
title: '标题4',
remark: '描述4',
id: 4,
attr: {
title: '标题4'
},
img: 'https://libs.diygw.com/upload/xcx.jpg'
},
{
title: '标题5',
remark: '描述5',
id: 5,
attr: {
title: '标题5'
},
img: 'https://libs.diygw.com/upload/xcx.jpg'
}
]
},
subformItemData: {
input1Focus: false,
radioDatas: [
{ value: '1', label: '选项一', checked: true },
{ value: '2', label: '选项二', checked: false },
{ value: '3', label: '选项三', checked: false }
],
checkboxDatas: [
{ value: '1', label: '选项一', checked: true },
{ value: '2', label: '选项二', checked: true },
{ value: '3', label: '选项三', checked: false }
]
},
subformItem: {
input1: '',
radio: '1',
checkbox: ['1', '2']
},
formRules: {
input: [
{
trigger: ['change', 'blur'],
required: true,
message: '姓名不能为空'
}
]
},
form: {
input: '',
subform: []
},
subformItemRules: {
input1: [
{
trigger: ['change', 'blur'],
required: true,
message: '公司名不能空'
}
]
},
formData: {
inputFocus: false
}
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
onReady() {
this.$refs.formRef?.setRules(this.formRules);
this.initSubformData();
},
methods: {
async init() {},
// 新增接口 API请求方法
async dtaApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/article.php';
let http_data = {};
let http_header = {
'Content-type': 'application/json'
};
let dta = await this.$http.post(http_url, http_data, http_header, 'json');
this.dta = dta;
},
//初始化显示子表单数据条数
initSubformData() {
if (this.subformItem) {
for (let i = 0; i < 1; i++) {
this.form.subform.push(JSON.parse(JSON.stringify(this.subformItem)));
}
this.initSubformValid();
} else {
this.navigateTo({
type: 'tip',
tip: '请先设计子表单哟'
});
}
},
//子表单验证
initSubformValid() {
//如果没找到子表单验证规，不用验证
if (this.subformItemRules) {
this.$nextTick(() => {
this.$refs['subformRef']?.forEach((subform) => {
subform.setRules(this.subformItemRules);
});
});
}
},
//上移子表单
upSubformItem(evt) {
let { index } = evt.currentTarget.dataset;
if (index == 0) {
this.navigateTo({
type: 'tip',
tip: '已经是第一个'
});
return false;
}
this.form.subform[index] = this.form.subform.splice(index - 1, 1, this.form.subform[index])[0];
this.initSubformValid();
},
//下移子表单
downSubformItem(evt) {
let { index } = evt.currentTarget.dataset;
if (index == this.form.subform.length - 1) {
this.navigateTo({
type: 'tip',
tip: '已经是最后一个'
});
return false;
}
this.form.subform[index] = this.form.subform.splice(index + 1, 1, this.form.subform[index])[0];
this.initSubformValid();
},
//删除子表单
delSubformItem(evt) {
let { index } = evt.currentTarget.dataset;
this.form.subform.splice(index, 1);
this.initSubformValid();
},
//增加子表单
addSubformItem() {
this.form.subform.push(JSON.parse(JSON.stringify(this.subformItem)));
this.initSubformValid();
},
//验证所有的子表单
checkSubformValid() {
let formFlag = true;
return new Promise((resolve, reject) => {
let list = [];
this.$refs['subformRef'].forEach((subform) => {
const p = new Promise((reso, rej) => {
subform.validate((valid) => {
if (!valid) {
formFlag = false;
}
reso(); //单个接口执行完毕
});
});
list.push(p);
});
Promise.all(list).then((result) => {
resolve(formFlag); //所有接口都执行完毕
});
});
},
changeSubformItemRadio(evt, subformIndex, subformItem) {},
changeSubformItemCheckbox(evt, subformIndex, subformItem) {},
async submitForm(e) {
let valid = await this.$refs.formRef.validate();
let subformvalid = await this.checkSubformValid();
if (valid && subformvalid) {
//保存数据
let param = this.form;
let header = {
'Content-type': 'application/json'
};
let url = '/sys/form/add';
let res = await this.$http.post(url, param, header, 'json');
if (res.code == 200) {
this.showToast(res.msg, 'success');
} else {
this.showModal(res.msg, '提示', false);
}
} else {
console.log('验证失败');
}
}
}
};
</script>
<style lang="scss" scoped>
.button-button-clz {
margin: 3px !important;
}
.container15550 {
padding-left: 0px;
padding-right: 0px;
font-size: 12px;
}
.container15550 {
}
</style>
uniapp uview循环子表单验证组件实现,比如果我们最常见的简历功能实现，一个人会多个工作经验。
文章来源：https://www.toymoban.com/news/detail-617438.html
文章来源地址https://www.toymoban.com/news/detail-617438.html
到了这里，关于uniapp uview循环子表单验证组件实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
