### 实现 UniApp Form 表单提交方法 在 UniApp 中处理表单提交并验证动态生成的子组件中的表单项是否为空，可以采用如下方式： #### 使用 `v-model` 和自定义事件绑定数据 为了确保能够捕获到所有表单字段的数据，在父组件中通过 `v-model` 将各个输入控件的状态同步至父级作用域。对于那些由子组件创建出来的额外输入框，则可以在这些子组件内部设置双向绑定机制，并向外暴露一个用于触发校验逻辑的方法。 当点击提交按钮时，调用此方法来遍历整个表单结构，检查每一个标记为必填 (`item.input_required = 1`) 的项目是否有值存在；如果发现有未填写的部分则阻止实际提交动作的发生，并给出相应的提示信息[^1]。 ```html <!-- Parent Component --> <template> <view> <!-- 动态渲染多个子组件实例 --> <child-component v-for="(item, index) in items" :key="index" v-bind:item="item" @validate="handleValidate(index)" /> <button type="primary" @click="submitForm">Submit</button> </view> </template> <script> export default { data() { return { items: [ { name: 'field1', value: '', input_required: true }, { name: 'field2', value: '', input_required: false } ], validationResults: [] }; }, methods: { handleValidate(idx) { const item = this.items[idx]; if (item.input_required && !item.value.trim()) { uni.showToast({ title: `${item.name} cannot be empty`, icon: 'none' }); this.validationResults.push(false); } else { this.validationResults.push(true); } }, submitForm() { this.$refs.childComponents.forEach((comp, idx) => comp.validate()); setTimeout(() => { if (!this.validationResults.includes(false)) { console.log('All fields are valid'); // Proceed with form submission... } this.validationResults.length = 0; }, 0); // Ensure all validations have been processed before checking results. } } } </script> ``` ```html <!-- Child Component Template --> <template> <input class="input-class" type="text" v-model="localValue" :placeholder="`${item.name}`" @blur="$emit('validate')" > </template> <script> export default { props: ['item'], computed: { localValue: { get() { return this.item.value; }, set(newValue) { this.$set(this.item, 'value', newValue); } } } }; </script> ``` 上述代码展示了如何在一个复杂的场景下管理表单状态以及执行必要的客户端侧验证流程。注意这里假设每个子组件都有自己的 `validate()` 函数负责向上传递其当前的有效性情况给父组件进行汇总分析。 此外，还可以利用内置的 `<form>` 标签配合 `@submit.stop.prevent` 来拦截默认行为从而更好地控制何时何地应该发生真正的 HTTP 请求发送操作[^2]。