uniapp 使用 Uview 前端框架，如何动态生成表单以及效验

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 482 天前的主题，其中的信息可能已经有所发展或是发生改变。

Uview 官网也没有例子。百度，goggle 都搜过了。求助大佬们，给个 demo 地址吧。我一个后端开发太难了

uview

效验

goggle

uniapp

7 条回复 • 2023-09-04 16:41:48 +08:00

nitmali

2023-09-04 15:50:35 +08:00

根据表单元素的类型分装好进行条件渲染。

nitmali

2023-09-04 15:52:09 +08:00

@nitmali #1 分装->封装，看看插件市场有没有做好的，没有只能自己封装了。

BwNVlwSq

2023-09-04 16:11:43 +08:00 via iPhone

sync-validator 能用吗，挺多用这个做校验的

BwNVlwSq

2023-09-04 16:12:17 +08:00 via iPhone

async-validator ，打错了...

Arthit

2023-09-04 16:26:51 +08:00

@nitmali 其实我已经把表单渲染出来了，就是效验规则一直有问题。我明明输入了值，效验不过去。

Arthit

2023-09-04 16:27:37 +08:00

贴部分代码，大佬们帮我看看把

怀疑我的 html 写的不对

```
<u-form ref="formRef" :model="dynamicForm" label-align='left' :error-type="['border-bottom']">
<u-form-item v-for="(item,index) in dynamicForm.formItemList" :key="index" :label="item.label +' :'"
:prop="dynamicForm.formItemList[index].prop" label-width='auto' :required="item.required">
<u-input v-if="item.el===0" v-model="item.defaultValue" placeholder="请输入" />
<u-keyboard v-else-if="item.el===2" v-model="item.defaultValue"></u-keyboard>
<u-calendar v-else-if="item.el===3" v-model="item.defaultValue"></u-calendar>
<u-input v-if="item.el===4" v-model="dynamicForm.formItemList[index].defaultKey" type="select" placeholder="请选择"
@click="onOpenSelect(item)" />
<view v-else-if="item.el===9">{{item.defaultValue}}</view>
</u-form-item>
</u-form>
```

```
const dynamicForm = reactive<{
formItemList : FormColumnProps[],
}>({
formItemList: [],
})
```

```
onReady(() => {
formRef.value.setRules(rules);
});
```

nitmali

2023-09-04 16:41:48 +08:00

dynamicForm.formItemList 是异步获取的吧，赋值后写一个
this.$nextTick(() => {
this.$refs.formRef.setRules(rules);
})