Javascript json动态生成表单

本文介绍如何在基于iview的项目中,利用form-create库动态地根据JSON数据生成表单,实现后台系统的可视化界面,尽管elementui广泛应用,但iview的美学体验在后台场景中更具优势。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JSON.stringify(mock,null,4).toString()格式化json格式在页面输出,这个form-create是一个开源框架
/*! form-create v1.3 | github https://github.com/xaboy/form-create | author xaboy */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form-create-preview示例</title>

    <link href="../../../static/iview/styles/iview.css" rel="stylesheet">
    <script src="../../../static/vue/vue.min.js"></script>
    <script src="../../../static/iview/iview.min.js"></script>

    <!--省市区三级联动json数据-->
    <script src="./form-create.min.js"></script>
    <style>
        .container{
            width: 1300px;
            overflow: hidden;
            margin: 0 auto;
        }
        .jsonBox,.formCreate{
            overflow: auto;
            width:100%;
            resize: none;
            margin-top: 20px;
            height:600px;
            border:1px solid #666;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        button{
            width: 100%;
            height: 40px;
            line-height: 40px;
            border:none;
            font-size: 16px;
            outline:none;
            color: #fff;
            cursor: pointer;
            background:#2d8cf0;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="fl" style="width:50%">
            <textarea class="jsonBox" id="jsonBox" v-model="model"></textarea>
        </div>
        <div class="formCreate fr" id="formCreate" style="width:50%"></div>
        <button @click="markHtml">生成html</button>
    </div>
</div>
<script>
    // 定义模板
    let mock = [
        {
            type:"input",
            title:"商品名称",//label名称
            field:"goods_name1",//字段名称
            props: {
                "type": "text", //输入框类型,可选值为 text、password、textarea、url、email、date
                "clearable":false, //是否显示清空按钮
                "disabled": false, //设置输入框为禁用状态
                "readonly": false, //设置输入框为只读
                "rows": 4, //文本域默认行数,仅在 textarea 类型下有效
                "autosize": false, //自适应内容高度,仅在 textarea 类型下有效,可传入对象,如 { minRows: 2, maxRows: 6 }
                "number": false, //将用户的输入转换为 Number 类型
                "autofocus": false, //自动获取焦点
                "autocomplete": "off", //原生的自动完成功能,可选值为 off 和 on
                "placeholder": "请输入商品名称", //占位文本
                "size": "default", //输入框尺寸,可选值为large、small、default或者不设置,
                "spellcheck": false, //原生的 spellcheck 属性
                "required":false,
            }
        },
        {
            type:"input",
            title:"商品名称",//label名称
            field:"goods_name2",//字段名称
            props: {
                "type": "text", //输入框类型,可选值为 text、password、textarea、url、email、date
                "clearable":false, //是否显示清空按钮
                "disabled": false, //设置输入框为禁用状态
                "readonly": false, //设置输入框为只读
                "rows": 4, //文本域默认行数,仅在 textarea 类型下有效
                "autosize": false, //自适应内容高度,仅在 textarea 类型下有效,可传入对象,如 { minRows: 2, maxRows: 6 }
                "number": false, //将用户的输入转换为 Number 类型
                "autofocus": false, //自动获取焦点
                "autocomplete": "off", //原生的自动完成功能,可选值为 off 和 on
                "placeholder": "请输入商品名称", //占位文本
                "size": "default", //输入框尺寸,可选值为large、small、default或者不设置,
                "spellcheck": false, //原生的 spellcheck 属性
                "required":false,
            }
        }
    ];
    //定义模板数据
    let mockData = [
        {
            field:'goods_name1',
            newField:'goods_name01',
            value:'商品01'
        },
        {
            field:'goods_name2',
            newField:'goods_name02',
            value:'商品02'
        },
        {
            field:'goods_name3',
            newField:'goods_name03',
            value:'商品03'
        }
    ]
    vm = new Vue({
        el:'#app',
        cus:'foo',
        data:{
            model:JSON.stringify(mock,null,4).toString()
        },
        methods:{
            markHtml(){
                this.model = this.model?this.model:this.mocks;
                if(!this.model){
                    return alert('请输入要生成的json数据')
                }
                model = JSON.parse(this.model);
                window.formData = {};
                let root = document.getElementById('formCreate');
                $f = this.$formCreate(model,{
                    el:root,
                    submitBtn:false
                });
                $f.model(formData);
                console.log(formData,'formData')
                mock.forEach(items=>{
                    mockData.forEach(item=>{
                        if(items.field==item.field){
                            console.log(item)
                            $f.set(formData[item.field],'value',item.value);
                        }
                    })
                })
            },
        }
    });
</script>
</body>
</html>

因为项目是基于iview的ui框架,可能应用场景会受限,因为现在都流行elementui,但细心的你会发现iview的视觉效果更舒服更协调,用到后台系统是不错的选择,实现可视化界面

### 如何使用 `uni-forms` 基于 JSON 配置动态生成表单 #### 表单结构定义 通过 JSON 数据可以灵活地定义表单的字段及其对应的校验规则。以下是实现此功能的核心逻辑: 1. **JSON 结构设计** 定义一个 JSON 对象,其中包含每个表单项的关键信息,例如名称 (`name`)、标签 (`label`) 和验证规则 (`rules`)。 2. **动态渲染机制** 利用 Vue 的模板语法和 `v-for` 指令遍历 JSON 中的每一项,并将其映射到 `<uni-forms-item>` 组件上[^1]。 3. **绑定数据源** 将 JSON 数据中的字段名与表单模型 (`model`) 进行双向绑定,从而支持动态更新和提交操作。 --- #### 示例代码 以下是一个完整的示例,展示如何基于 JSON 动态生成表单并应用校验规则: ```vue <template> <view> <!-- 外层容器 --> <uni-forms ref="form" :modelValue="formData" :rules="validationRules"> <!-- 动态生成表单项 --> <block v-for="(item, index) in formConfig" :key="index"> <uni-forms-item :name="item.name" :label="item.label"> <!-- 根据类型选择不同的输入控件 --> <input v-if="item.type === 'text'" type="text" v-model="formData[item.name]" placeholder="请输入..." /> <picker v-else-if="item.type === 'select'" @change="onPickerChange($event, item.name)"> {{ formData[item.name] || '请选择' }} </picker> <!-- 可扩展其他类型的输入框 --> </uni-forms-item> </block> <!-- 提交按钮 --> <button @click="submitForm">提交</button> </uni-forms> </view> </template> <script> export default { data() { return { // 动态表单配置 formConfig: [ { name: "username", label: "用户名", type: "text", rules: ["required"] }, { name: "gender", label: "性别", type: "select", rules: ["required"] } ], // 表单初始值 formData: {}, // 校验规则对象 validationRules: {} }; }, created() { this.initValidationRules(); }, methods: { // 初始化校验规则 initValidationRules() { const rulesMap = { required: (value) => !!value || "此项必填" }; this.formConfig.forEach((item) => { this.validationRules[item.name] = {}; if (Array.isArray(item.rules)) { item.rules.forEach((ruleName) => { if (rulesMap[ruleName]) { Object.assign(this.validationRules[item.name], rulesMap[ruleName]); } }); } }); }, // Picker 改变事件处理函数 onPickerChange(e, fieldName) { this.formData[fieldName] = e.detail.value; }, // 提交表单 submitForm() { this.$refs.form.validate().then(() => { console.log("表单验证成功:", this.formData); }).catch((errors) => { console.error("表单验证失败:", errors); }); } } }; </script> ``` --- #### 关键点解析 1. **JSON 配置文件的作用** - JSON 文件用于描述表单的整体结构,包括字段名、显示标签、输入类型以及校验规则。 - 此方法使得前端开发者能够轻松调整表单布局而无需修改大量 HTML 或 JavaScript 代码。 2. **动态绑定与校验** - 使用 `v-for` 循环渲染表单项,确保每项都能正确关联至其对应的数据模型。 - 调用 `validate()` 方法触发全局校验流程,当任意一项未满足条件时会阻止进一步的操作。 3. **自定义校验器** 如果默认内置规则无法满足需求,则可以通过扩展方式添加新的约束逻辑。例如,在上述例子中实现了简单的 `"required"` 规则检测。 --- #### 注意事项 尽管该方案非常强大且易于维护,但在实际项目开发过程中仍需注意以下几个方面: - 性能优化:对于复杂度较高的大型表单来说,频繁重新计算可能会带来性能瓶颈; - 用户体验:合理设置提示文案以便引导用户快速修正错误内容; - 兼容性测试:不同平台间可能存在细微差异因此建议充分验证各端表现一致性。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值