微信小程序动态表单, 动态生成自定义表单, 包含

包含图片视频选择, 正则验证, 错误提示, 日期选择, 表单初始化, 展示模式

formData:Array, //表单数组 showSubmitBtn:Boolean, //是否显示提交按钮 toSubmit: Number //当不显示提交按钮, 通过父组件触发提交时, 变更toSubmit数值, 触发子组件提交 bindDynamicFormSubmit:Function //监听表单提交事件 bindDynamicFormChange:Function //监听表单变化事件 示例

const formData = [ { type: 'input', id:'ipt1', lable:'标题', isRequired: true,//是否必填 maxLength: 20,//最大长度 defaultValue:'巡检计划',//初始值 disabled:true,//是否禁用 rules:[//规则验证数组 { regular: '^\\S*$',//正则字符串 tips: '不能有空格'//错误提示 }, ] }, { type: 'input', id: 'email', lable: '邮箱', placeholder: '请填写邮箱', rules: [ { regular: '^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$', tips: '邮箱格式错误' } ] }, { type: 'input', id: 'num', lable: '数字', inputType: 'digit', //对应input组件type值(text,number) placeholder: '请填写数字', rules: [ ] }, { type: 'picker', id: 'picker2', lable: '状态', defaultIdx:0,//默认选择索引 isRequired:true, range:[ { id: 0, name: '正常' }, { id: 1, name: '异常' }, ] }, { type: 'date', id: 'timePicker', lable: '日期', isRequired: true, /* 显示完整时间包含时分秒；当使用endDate的时候关闭,不要同时打开, 否则日期将会换行； 与config中的colum属性共同设置 */ // completeTime:true, //显示完整时间, 包含时分秒 config: { endDate: true, dateLimit: true, // initStartTime: "2020-01-01 12:32:44", // initEndTime: "2020-12-01 12:32:44", column: "day",//day、hour、minute、secend limitStartTime: "2000-01-01 00:00:59", limitEndTime: "2100-01-01 00:00:59" } }, { type: 'textarea', id: 'textarea1', lable: '描述', isRequired: true, maxLength: 200, // defaultValue: '初始值', placeholder:'请输入描述', rules: [ { regular: '^.{5,200}$', tips: '请输入5-200位以内字符' } ] }, { type: 'file', accept: 'image', id: 'pics', lable: '图片上传', maxCount: 5, maxSize: 5, isRequired: true, fileList: [ { url: 'https://img.yzcdn.cn/vant/leaf.jpg', name: '图片1' }//初始图片 ] }, { type: 'file', accept: 'video', id: 'video', lable: '视频上传', maxCount: 1, maxSize: 5, // isRequired: true, fileList: [ // { url: "http://tmp/wx4c198b0bd87f5470.o6zAJs1Ghz_xnqKSRnUi….xVILGkr0x8fm00dec98217739f2e6813a5937b68f928.mp4",isVideo:true} ] }, ], //小程序原生 <d-form formData="{{formData}}" showSubmitBtn="{{false}}" toSubmit="{{toSubmit}}" bindDynamicFormSubmit="{{onFormSubmit}}"></d-form> //调用Taro <d-form formData={formData} showSubmitBtn={false} toSubmit={toSubmit} onDynamicFormSubmit={this.onFormSubmit.bind(this)}></d-form>