更新记录

1.1.2（2025-09-10） 下载此版本

  • 1、formList新增属性labelWidth，覆盖form配置得label宽度，默认使用form配置的labelWidth属性值；
  • 2、单行文本，config新增maxlength属性，默认值：200；

1.1.1（2025-07-25） 下载此版本

  • 1、细节调整
  • 2、文档完善

1.1.0（2025-07-25） 下载此版本

  • 1、增加password表单默认验证规则，验证条件：密码可由【字母、数字、下划线、特殊字符（!@%_+-*.=）】组成，且长度在6-14之间
  • 2、增加number、digit表单默认验证规则，config新增单位unit属性
  • 3、新增邮箱mail表单，默认邮箱验证规则
  • 4、修复微信小程序自定义验证规则不生效bug
查看更多

平台兼容性

uni-app(4.07)

Vue2 Vue2插件版本 Vue3 Chrome Chrome插件版本 Safari Safari插件版本 app-vue app-nvue Android iOS 鸿蒙
√ 1.0.0 - √ 1.0.0 √ 1.0.0 - - - - -
微信小程序 微信小程序插件版本 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ 1.1.0 - - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
× × √

ziqirj-dynamic-form 动态表单组件

  • 组件名：ziqirj-dynamic-form
  • 代码块： ziqirj-dynamic-form
  • 关联组件：scss/sass

插件说明

  • 1、动态表单组件v1.0.0发布
  • 2、基于uni-ui -> uni-forms开发
  • 3、加入自定义组件
  • 4、集成【单行文本、文本域、数字、小数、身份证、手机号、邮箱、密码、日期、单选框、复选框、下拉选项、弹出单选、弹出多选、级联选择器、图片上传、视频上传、附件上传】组件
  • 5、专注于配置信息，无需关注前端表单元素
  • 6、后端开发程序猿-懒人福利
  • 7、自【1.1.0】起微信小程序各表单组件支持默认验证规则

使用说明

组件参数Props

参数 类型 默认值 必填 描述
formId Stirng 'dynamicFormRef' false 表单ref，唯一标识
validateTrigger String 'blur' false 表单验证触发方式 可选值
labelPosition Stirng 'left' false label位置 可选值
labelWidth Stirng '100px' false label宽度
labelAlign Stirng 'right' false label对齐方向 可选值
border Boolean true false 是否显示分格线
formList Object [] true 动态表单配置信息
dynamicForm Object {} false 动态表单form
formRules Object {} false 表单验证规则
button Object {cancel: {show: true, icon: 'close', text: '取消', style: {color: '#686868'}},
confirm: {show: true, icon: 'checkbox', text: '确定', style: {color: '#fff'}}}		 false 按钮配置

formList 数据格式

属性名 类型 必须 描述
formName String true 表单属性名，formList中唯一存在
formTitle String true 表单label文本
formType String true 表单类型
required Boolean true 是否必填
placeholder String true 表单输入提示文本
requiredTip String false 表单验证提示文本，required为true时必填
forbidden Boolean true 是否禁用
labelWidth String false label宽度，默认使用form配置的labelWidth属性值
自【1.1.2】起支持
options Array false 【radio|checkbox|select|popupSelect|dataPicker】必填
数据格式：[{{value: 1, text: '选项一'}}]
config Object false 详见下方【formType可选值，及其config参数】

formType可选值，及其config参数

值 描述 表单值 示例值 config参数
text 单行文本 String 'set单行文本' {maxlength: 最大可输入字符数，默认：200}
自【1.1.2】起支持
textarea 文本域 String 'set文本域' {maxlength: 最大可输入字符数，默认：200}
number 数字 Number 123 {unit: 单位}，自【1.1.0】起支持
digit 小数 Number 12.3 {unit: 单位}，自【1.1.0】起支持
idcard 身份证号 '530325199506061313' String 无
phonenumber 手机号 '15911112222' String 无
mail 邮箱 '1770202799@qq.com' String 自【1.1.0】起支持
password 密码，默认验证规则：
【^[\w!@%_+-*.=]{6,14}$】		 '123456' String 自【1.1.0】起支持
datetime 日期时间 String '2025-02-13' 参考【uni-datetime-picker 日期选择器】，
所有参数修改命名方式为驼峰命名，
如start-placeholder修改为startPlaceholder
radio 单选 String|Number 1 无
checkbox 复选框 Array [1, 3] 无
select 下拉选项 String|Number 2 无
popupSelect 弹出多选 Array [2, 4] 参考【ziqirj-popup-select 弹出选择器】
dataPicker 级联选择器 Array [{value: '1-0', text: '一年级'},
{value: '1-1', text: '1.1班'}]		 无
uploadImage 图片上传 Array [{name: '文件名', url: '可访问链接'}] 参考【ziqirj-ui 图片或视频文件上传】
uploadVideo 视频上传，微信小程序支持预览 Array [{name: '文件名', url: '可访问链接'}] 参考【ziqirj-ui 图片或视频文件上传】
uploadAffix 文件上传 Array [{name: '文件名', url: '可访问链接'}] 参考【ziqirj-ui 文件上传】

回调函数

方法名 参数 描述
clickAffix Object 文件上传组件，附件点击回调函数，
参考【ziqirj-ui 文件上传】
uploadAffix Object 文件上传组件，关闭自动上传，回调函数，
参考【ziqirj-ui 文件上传】
cancel 无 点击【取消】回调函数
confirm {formId: 表单ref，唯一标识, formData: 表单数据} 表单验证通过后，点击【确定】回调函数
validCatch {formId: 表单ref，唯一标识} 表单验证不通过回调函数

可用方法

方法名 参数 描述
clearForm 无 清空表单方法
uploadSuccess {param: '表单属性名'，
affixList: [{name: '文件名', url: '可访问url'}]}		 文件上传属性赋值，关闭文件自动上传，
可在手动上传成功后调用，手动赋值

使用示例

<template>
    <view style="padding: 0 15px;">

        <view style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
            <button @click="setFormData">设置表单值</button>
            <button @click="disabledItem">{{ this.disabled?'禁用': '启用' }}部分表单</button>
            <button @click="clearForm">重置表单</button>
        </view>

        <ziqirj-dynamic-form ref="dynamicFormRef" :form-id="formId" :form-list="formList"
            :dynamic-form="form" label-width="90px" @cancel="back" @confirm="confirm" />

        <view style="height: 30px;"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                formId: 'dynamicFormId',
                formList: [
                    { formName: 'text', formTitle: '单行文本', formType: 'text', required: true, placeholder: '请输入单行文本', requiredTip: '单行文本不能为空', forbidden: false },
                    { formName: 'textarea', formTitle: '文本域', formType: 'textarea', required: false, placeholder: '请输入文本域', requiredTip: '文本域不能为空', forbidden: false,
                        config: {maxlength: 200}},
                    { formName: 'number', formTitle: '数字', formType: 'number', required: true, placeholder: '请输入数字', requiredTip: '数字不能为空', forbidden: false },
                    { formName: 'numberUnit', formTitle: '单位数字', formType: 'number', required: false, placeholder: '请输入数字', requiredTip: '数字不能为空', forbidden: false,
                        config: {unit: '天'}},
                    { formName: 'digit', formTitle: '小数', formType: 'digit', required: false, placeholder: '请输入小数', requiredTip: '数字不能为空', forbidden: false },
                    { formName: 'idcard', formTitle: '身份证', formType: 'idcard', required: true, placeholder: '请输入身份证', requiredTip: '身份证不能为空', forbidden: false },
                    { formName: 'phonenumber', formTitle: '手机号', formType: 'phonenumber', required: false, placeholder: '请输入手机号', requiredTip: '手机号不能为空', forbidden: false },
                    { formName: 'mail', formTitle: '邮箱', formType: 'mail', required: false, placeholder: '请输入邮箱', requiredTip: '邮箱不能为空', forbidden: false },
                    { formName: 'password', formTitle: '密码', formType: 'password', required: false, placeholder: '请输入密码', requiredTip: '密码不能为空', forbidden: false },
                    { formName: 'datetime', formTitle: '日期', formType: 'datetime', required: true, placeholder: '请选择日期', requiredTip: '请选择日期', forbidden: false,
                        config: {}},
                    { formName: 'radio', formTitle: '单选框', formType: 'radio', required: true, requiredTip: '请选择选项', 
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}], forbidden: false },
                    { formName: 'checkbox', formTitle: '复选框', formType: 'checkbox', required: false, requiredTip: '请选择选项', forbidden: false, 
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}, {value: 3, text: '选项三', selected: false}, {value: 4, text: '选项四', selected: false}, {value: 5, text: '选项五', selected: false}] },
                    { formName: 'select', formTitle: '下拉选项', formType: 'select', required: true, requiredTip: '请选择选项', placeholder: '请选择选项', forbidden: false,
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}, {value: 3, text: '选项三', selected: false}, {value: 4, text: '选项四', selected: false}, {value: 5, text: '选项五', selected: false}] },
                    { formName: 'popupSelectRadio', formTitle: '弹出单选', formType: 'popupSelect', required: true, requiredTip: '请选择选项', placeholder: '请选择选项', forbidden: false,
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}, {value: 3, text: '选项三', selected: false}, {value: 4, text: '选项四', selected: false}, {value: 5, text: '选项五', selected: false}],
                        config: {multiple: false} },
                    { formName: 'popupSelect', formTitle: '弹出多选', formType: 'popupSelect', required: true, requiredTip: '请选择选项', placeholder: '请选择选项', forbidden: false,
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}, {value: 3, text: '选项三', selected: false}, {value: 4, text: '选项四', selected: false}, {value: 5, text: '选项五', selected: false}] },
                    { formName: 'dataPicker', formTitle: '级联选择器', formType: 'dataPicker', required: true, placeholder: '请选择选项', requiredTip: '请选择选项', forbidden: false,
                        options: [{"text":"一年级","value":"1-0","children":[{"text":"1.1班","value":"1-1"},{"text":"1.2班","value":"1-2"}]},{"text":"二年级","value":"2-0"},{"text":"三年级","value":"3-0"}],
                        config: {} },
                    { formName: 'uploadImage', formTitle: '图片', formType: 'uploadImage', required: false, placeholder: '请上传图片', requiredTip: '请上传图片', forbidden: false,
                        config: {limit: 5, url: 'http://localhost:9005/common/publish-upload', config: {name: 'originalFilename', url: 'url'}} },
                    { formName: 'uploadVideo', formTitle: '视频', formType: 'uploadVideo', required: false, placeholder: '请上传视频', requiredTip: '请上传视频', forbidden: false,
                        config: {url: 'http://localhost:9005/common/publish-upload', config: {name: 'originalFilename', url: 'url'}} },
                    { formName: 'uploadAffix', formTitle: '附件', formType: 'uploadAffix', required: false, placeholder: '请上传附件', requiredTip: '请上传附件', forbidden: false,
                        config: {url: 'http://localhost:9005/common/publish-upload', config: {name: 'originalFilename', url: 'url'}} }
                ],
                form: {},
                formRules: [],
                disabled: true
            }
        },
        methods: {
            setFormData() {
                this.form = {
                    text: 'set单行文本',
                    textarea: 'set文本域',
                    number: 123,
                    numberUnit: 456,
                    digit: 12.3,
                    idcard: '532225199506081311',
                    phonenumber: '19508800232',
                    mail: '1770202799@qq.com',
                    password: '123456',
                    datetime: '2025-02-13',
                    radio: 1,
                    checkbox: [1, 3],
                    select: 2,
                    popupSelectRadio: [4],
                    popupSelect: [2, 4],
                    dataPicker: [{value: '1-0', text: '一年级'}, {value: '1-1', text: '1.1班'}],
                    uploadImage: [{name: 'logo.png', url: 'https://icon.jjzqkj.cn/logo.png'}],
                    uploadVideo: [{name: 'uni-app.mp4', url: 'https://icon.jjzqkj.cn/uni-app.mp4'}],
                    uploadAffix: [{name: 'RuoYi-Vue-master3.8.7.zip', url: 'https://icon.jjzqkj.cn/RuoYi-Vue-master3.8.7.zip'}]
                }
            },
            disabledItem() {
                this.formList[0].forbidden = this.disabled
                this.formList[2].forbidden = this.disabled
                this.formList[4].forbidden = this.disabled
                this.formList[8].forbidden = this.disabled
                this.formList[10].forbidden = this.disabled
                this.formList[this.formList.length - 3].forbidden = this.disabled
                this.formList[this.formList.length - 1].forbidden = this.disabled

                this.disabled = !this.disabled
            },
            clearForm() {
                this.$refs.dynamicFormRef.clearForm()
            },
            back() {
                uni.navigateBack({delta: 1})
            },
            confirm(e) {
                console.log("confirm form", e)
            }
        }
    }
</script>

<style>

</style>

依赖组件

scss/sass

uni-data-checkbox

uni-datetime-picker

uni-data-select

uni-data-picker

uni-easyinput

uni-forms

uni-icons

ziqirj-file-upload

ziqirj-media-upload

ziqirj-popup-select

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

Email：zhangji_59@qq.com

紫琪程序猿

ziqiui示例

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。