小程序 表单 formId 为 the formId is a mock one

### 创建带有验证规则的动态表单 在 Vue 中实现动态创建带验证规则的 `Form` 表单可以通过组合使用 `$formCreate` 和特定框架组件来完成。下面是一个基于 Vue 2.x 及 Element UI 实现的例子。 #### 定义基础模板与脚本逻辑 ```html <template> <div id="app"> <!-- el-form 组件 --> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <component v-for="(item, index) in formItems" :key="index" :is="item.component" v-bind="item.props"></component> <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button> </el-form> </div> </template> <script> export default { data() { return { dynamicValidateForm: {}, formItems: [] }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, initForm() { const mockRules = [ { required: true, message: 'Please input activity name', trigger: 'blur' }, // 示例输入框规则 /* 更多规则 */ ]; let rules = window.mock; new Vue({ mounted: function () { let $f = this.$formCreate(rules, { onSubmit: function (formData) { console.log(formData); $f.submitStatus({ loading: true }); } }); // 动态添加表单项 $f.append($r, 'goods_name'); // 将生成的表单项加入到页面显示列表中 Object.keys(this.dynamicValidateForm).forEach(key => { this.formItems.push({ component: 'el-form-item', props: { prop: key, label: `${key} Label`, rules: [...mockRules], // 应用默认规则集 } }) }.bind(this)); }.bind(this), }).$mount(); } }, created() { this.initForm(); // 初始化表单结构 } }; </script> ``` 此代码片段展示了如何利用 `$formCreate` 插件结合自定义方法构建动态表单，并通过遍历 `this.dynamicValidateForm` 来向视图层追加新的 `el-form-item` 元素，同时为其指定必要的属性如 `prop`, `label` 和 `rules`[^1]。 为了确保每个单独的 `el-form-item` 能够应用各自的校验规则而不是整个 `el-form` 设置全局性的 `rules` 属性，这一点非常重要[^2]。 当用户点击提交按钮时，调用了 `submitForm()` 方法来进行最终的数据有效性检查。如果所有字段都满足相应的条件，则执行成功的回调函数；反之则提示错误信息并阻止进一步操作[^3]。