AForm

Posted 2020-07-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AForm相关的知识，希望对你有一定的参考价值。

相信大部分程序员都接触过表单，表单是收集用户输入的不二之选，但是表单的开发又是最繁琐、最复杂的，简单地说，开发表单你需要涉及到很多知识：

布局，表单如何布局排版，看起来最清晰整洁，且符合用户体验
控件的选用，用select还是radio，用多选的select还是用复选框，有时还需要编写个性化的输入控件
数据有效性的验证、输入的提示文案等
针对个别输入控件的特殊设置，输入控件之间的联动
表单中如果有数据列表，那么你还需要编写内嵌表格以收集这些数据

以上这些随便哪一条都不是一件简单的工程，尤其是遇到复杂的表单，会令人更加头疼，但是一直以来，表单的开发鲜有敏捷的框架可用，我们可以找到表单的css框架、数据验证框架、数据填充或序列化函数，以及一些输入控件的组件，如日期选择器等，但我们很难找到一个统一的省事的表单框架，因此我们开发的表单很难复用、保持风格的一致以及进行高度的扩展。

那么是否有这样一种框架，让我们能够轻易创建风格统一、兼容各种浏览器以及高度定制的表单呢？答案是有！这里介绍一个组件，名叫json2form，可以轻易地把json数据转换成表单，无论json数据中是嵌套了多么复杂的数据，包含何种数据类型，甚至是数组，它都可以轻松应对。

json2form的介绍

json2form是一个可以把json数据转换成表单输入项的javascript组件，并可以轻松把输入的数据又还原成json，您仅需输入几行配置即可轻松生成各式各样的标准表单；在web系统中，只要您使用表单收集数据，相信您一定可以通过json2form来大大提高开发表单的效率。

主要特点：

使用和配置简单，仅包含3个函数，可快速上手
表单标准化，支持文本框、文本区域、单选框、复选框、下拉列表等各种输入控件
支持对数组元素的增删改操作
支持html5的新特性
支持输入验证，输入提示
可高度定制，支持自定义样式、界面以及各种验证处理函数

适用场景：

各种WEB后台管理系统
可由用户自定义表单的WEB前台系统
任何使用表单收集用户数据的场合

现在我们来试验一下，把如下的数据生成表单：

{
  "Name": "张三丰",
  "Age": 32,
  "Height" : 165,
  "Married":true,
  "Sexy":1,
  "Hobby": "篮球,电影,旅行",
  "Address": {
    "Street": "南汇\\"区xx路xx号",
    "City": "上海",
    "Country": "中国",
    "zipCode": "543210"
  },
  "Children": [
    {
      "Name": "小明",
      "Age": 7
    },
    {
      "Name": "小丽",
      "Age": 4
    },
    {
      "Name": "小淘",
      "Age": 3
    }
  ]
}

再加上一些配置代码，配置字段的名字、控件类型等：

{
        arrayIndex: {
            show: true
        },
        fields: {
            Name: { label: "姓名", readonly: true },
            Married: { label: "已婚" },
            Height: { label: "身高", required: true, type:"number" , ctrlAttr : {min:100,max:200,step:1} },
            Age: { label: "年龄", maxlength: 3, required: true, pattern: "\\\\d+", title: "请输入数字", tips: "小于100" },
            Sexy: { label: "性别", type: "radio", datalist: [{ value: 0, text: "男" }, { value: 1, text: "女"}] },
            Children: { label: "子女", noCreate: false, noDelete: false },
            Hobby: { label: "爱好" , required: true,cssText : "background:infobackground;border:1px solid gray", type: "checkbox", delimiter: ",", multiple: true, size: 5, datalist: ["烹饪", "音乐", "电影", "睡觉", "篮球", "旅行"] },
            Address: { label: "居住地址" },
            Street: { label: "街道",width:"300px", tips: "居住所在地" , inline:true },
            zipCode: { label: "邮政编码", tips: "居住所在地" , inline:true },
            City: { label: "城市",cssText:"", inline:true,ctrlCssText:"color:red",hideLabel:false, maxlength: 2, size: 15, tips: "hello" },
            Country: { label: "国家",width:"300px", inline:true, readonly: true, type: "select", datalist: [‘美国‘, ‘中国‘, ‘韩国‘] }
        }
    }

下面是最终生成的表单界面：

技术分享

快速上手

使用json2form极其简单，您首先需在调用页面的head部分引入如下js文件和样式文件（样式文件是可选的）：

<link href="aform.css" rel="stylesheet" />
<script src="aform.js"></script>

然后，准备好需要渲染的json数据和针对该数据的一些配置（同样也是json格式），以及用于显示表单的DOM容器（比如一个form或者div，假设命名为“divOutput”），最后像下面这样使用：

<script>
var jf = new AForm("divOutput",{
        arrayIndex : {
                show : true
        },
        fields:{
                Name:{label:"姓名",readonly:true},
                Sexy:{label:"性别",type:"radio",datalist:[{value:0,text:"男"},
                {value:1,text:"女"}]},
                Country:{label:"国家",readonly:true,type:"select",datalist:[
                ‘USA‘,‘CHINA‘,‘KOREA‘]}
        }
});
jf.render({
  "Name": "John Smith",
  "Sexy": 1,
  "Country":"CHINA"
});
</script>

这样就会在指定的容器中生成一组输入项，当您想收集用户数据时，执行getJsonString函数即可，该函数返回一个符合json标准的字符串：

<script>
jf.getJsonString();
</script>


下载和文档：

https://github.com/xiehuiqi220/AForm